리액트에서 module css 와 styled-components 중 어떤 것을 사용하는 것이 좋을지 판단이 서지 않습니다.

Question

제목 그대로입니다.개인 프로젝트를 진행하고 있는데 module css 와 styled-components 중 어떤 것을 사용하는 것이 좋을지 정확한 판단이 서지 않습니다. 상황마다 적합한 스타일링법이 있는 걸까요? 아니면 개인의 취향일까요? 아니면 상황에 따라 동시에 사용하는 경우도 있나요?styled componont 만을 사용하기엔 코드의 가독성이 떨어지는 것 같고, module css를 사용하기엔 스타일링을 할 때마다 파일을 생성해줘야 하는게 무겁게 느껴집니다.

구직인 · Answer

저는 styled-component가 좋은것같은데성능이나 기타저타 이유로 css in js를 하지 않는것도 좋다라는 말도 있더군요.

ivanselah · Answer

상황에 따라 다르겠지만 postCSS 경우는클래스 이름 충돌도 피할수 있고 각 브라우저별 별도로 다르게 써줘야하는 경우가 있어도 별도로 작성안해도 알아서 해줍니다. styled components의 경우 자바스크립트 파일안에서 css를 변수처럼 사용할때 주로 사용합니다.상황에 따라 컨트롤 하기 편합니다.ex. <Hello hello&#61;{true} /> const Hello &#61; styled.div’color: ${props &#61;> props.hello &#61;&#61;&#61; true ? “white” : “black”‘; 또한 반복하지 않아도 동일한 속성을 상속? 하여 넘겨 줄수 있습니다. 그리고 딱 봤을때 가독성이 좋아 사용하는 경우도 많구구요. 이외에도 공식 문서 보면 차이점이 확실히 있고 장단점이 있으니 확인해보시면 좋을것같습니다. 한 파일에 다 있어서 지저분할수 있지만 저도 개인적으로 styled-components 가 좋더라구요..

potato · Answer

구직인 / goldman720 의견 감사합니다 : ) styled-components 사용하는 것으로 결정했어요!

리액트에서 module css 와 styled-components 중 어떤 것을 사용하는 것이 좋을지 판단이 서지 않습니다.

3개의 답변

Q&A 목록