이번 2차 프로젝트 기획 단계에 들어가면서 redux를 쓰느냐 style-component를 쓰느냐 이야기를 나눠봐야 하는 상황이 왔다.
redux는 나중에 쓰는 것이 맞다는게 결론이었고 style-component는 이 기회에 한번 써보자는 통일된 의견으로 이번 2차 프로젝트는 style-component를 사용했다!
처음에는 어려웠지만 쓰다보니 왜 쓰는지 너무 잘 알 것 같았다.
style-component
css in js라는 개념을 가지고 있다. js안에 css를 넣는다는 의미이다.일반적으로 항상 css파일 하나를 따로 두어서 관리하는 형식으로 사용 했다면 이 경우는 동시에 사용이 가능하다.
내부에서 사용시 css가 전역으로 중첩되지 않도록 하는 장점이 있다.
설치 방법
$ npm install --save styled-components
사용 방법
const Cartbox = styled.{태그명}``;
으로 사용 되는데, 스타일을 지정하기 위해서는 tagged template literal을 사용해주어야 한다.
*여기서 (input 태그는 자식을 가질 수 없다! 이런 것도 체크하면서 공부하면 좋다!)
${props => props.primary && css background: white; color: black; }
이렇게 props로 전달해서 사용도 가능하다.
(이런 경우 따로 파일을 만들어서 관리하게 되면 커스터마이징이 훨씬 쉽다)
✍✔ 여기서 우리 팀은 style-component를 따로 관리할지 아니면,
한 파일 안에 관리할지 이야기를 나눴는데 다 같이 쓰자는 의견이 많아서 그렇게 관리하였다!
처음에는 너무 헷갈렸는데 쓰다보니 style-component가 왜 편리함을 알게됐다.
공동으로 사용되는 css들은 global Theme을 사용했는데,이번 2차 프로젝트에서 나는 잘 사용하지 못했다. 리팩토링을 현재도 하면서 다시 수정하고 있는 부분이다.
왜 사용하지 못했냐면 왜 필요한지에 대한게 와닿지 않았기 때문이었는데 작업물이 나온 이후로 이게 왜 필요한지 절실히 와닿고 있어서 열심히 수정하고 있다.
