만들면서 배우는 react : 기초 - 5

오늘은 스타일링 하는 법을 배워볼 거다~~!!!!
리액트에서는 css를 인라인 형식으로 구현한다.

---

.favorites img {
    width: 150px;
}

위와 같은 css가 있다.
이것을 리액트 인라인 형식으로 구현하려면 어떻게 해야할까?!

function CatItem(props) {
  return (
    <li>
      <img src={props.img} style={ { width: '150px' } } />
    </li>
  );
}

짜자잔 바로 이렇게 하면 된다!
style 라는 이름의 요소를 만들고 그곳에 object 형태로 스타일을 넣어준다.
여러개의 스타일을 넣어주고 싶다면,

<li>
  <img src={props.img} style={ { width: '150px', border: '1px solid' } } />
</li>

이런식으로 추가로 넣으면 된다.
세상 간단~~~


인라인 형식이 번잡하게 느껴진다면, 요즘 사람들이 자주 쓰는 라이브러리들도 있다고 한다.
바로 이모션과 윈드테일~!!!
둘 중에 마음에 드는 걸로 골라서 사용하면 된다고 하는데, 나는 우선 기본부터 충실해야할 것 같아서
라이브러리를 사용하지 않고 그냥 인라인 형식으로 구현할까 한다 ㅎㅎ
나중에 공부해서 응용할때는 라이브러리를 사용해서 해봐야겠다!!!