React { Element props }

Element style 입히기 

  const element = (
    <div>
      <button className="button">Green</button>
      <button className="button button2">Blue</button>
      <button className="button button3">Red</button>
      <button className="button button4">Gray</button>
      <button className="button button5">Black</button>
    </div>
  );
  ReactDOM.render(element, document.getElementById("root"));

위에 코드는 그냥 'JSX'를 이용해서 button 5개를 element라는 변수에 넣어주고, 랜더를 돌린것이다. css는 첨부는 안하였다. 하지만 리액트에서는 저런 class라는 속성이름과, 아무래도 저런 반복적인 요소들은 컴포넌트로 만들어서 관리하는게 편하기 때문에 바꿔준다. 

// Button Component를 만들고, props를 받아온다.
// ...props안에는 해당 컴포넌트 태그안에 모든 속성값들이 들어있는데
// 그런데 저기 className처럼 따로 props와 따로 명시하면, 
// className은 빠지게된다. 

function Button({className = "", ...props}){
    return <button 
    className={`button${className === "" ? "" : ` ${className}`}`} 
    {...props}
    />
  }

// fragment로 감싸고 공통된 className은 따로 지워버림

  const element = (
    <>
    <Button>Green</Button>
    <Button className="button2">Blue</Button>
    <Button className="button3">Red</Button>
    <Button className="button4">Gray</Button>
    <Button className="button5">Black</Button>
    </>
  );
  ReactDOM.render(element, document.getElementById("root"));

위는 React 방식으로 바꾼것이고, 해당 element들은 컴포넌트로 바꾸고, 일단 여기서 React에서는 html에서의 이미 선점한 class같은 키워드를 겹치지않게하기 위해 className으로 보통 사용한다. 겹쳐도  문제는 없으나 어떻게 될지 모르니.. 

 

 

    // button5 라는 클래스에 border radius:50%;
    
    .button5 {
      background-color: #555555;
      border-radius: 50%;
    }


  	// 하지만 컴포넌트안에 style이 우선순위가 더 크기때문에 클래스안에 CSS요소는 무시된다. 

  function Button({className = "", style, ...props}){
    return <button 
    className={`button${className === "" ? "" : ` ${className}`}`} 
    style={{fontSize: 50, borderRadius:15, ...style}}
    {...props}
    />
  }

  const element = (
    <>
    <Button>Green</Button>
    <Button className="button2">Blue</Button>
    <Button className="button3" style={{borderRadius:"50%"}}>Red</Button>
    <Button className="button4">Gray</Button>
    <Button className="button5">Black</Button>
    </>
  );

가운데 RED 버튼은 borderRadius가 50% 먹은 것 같다 왜인가 ? Component 호출 당시 가져온 스타일 props를 컴포넌트 함수내에 style 안에서 제일 늦게 전개연산자로 풀어줘서 마지막에 적용되기때문에 앞에 있던 border-Radius:15가 overwriting이 된다. 반대로 전개연산자로 먼저 부르고 뒤에 추가로 넣는 style속성이 겹치는게 있다면, 그게 ...style을 overwriting 할 것이다. 이렇게 컴포넌트들은 Customizing해가면 될 것 같다. 

 

다른 방식의 style 적용이 있지만 후에 Library에서 알아보신다고 한다.