react의 style-component에 대해 궁금한점이 있습니다.

Question

최근 리엑트를 공부하면서 스타일 컴포넌트를 찾아보고 있습니다.각 컴포넌트 마다 css를 별도로 작성하여 사용하는 방법으로 알고있는데 이렇게 각 컴포넌트 마다 css를 개별로 주게 되면 재사용성이 떨어지는거 안닌가 궁금증이 듭니다.예를 들어 A라는 컴포넌트에 padding-left: 10px 등의 값을 주고 B 컴포넌트에도 이와 같은 값을 줄때 또 똑같은 코드를 작성해야 할거같은데 이걸 감수하고 사용하는건가요? 아니면 태그 하나하나 모두 컴포넌트로 만들어서 컴포넌트를 재사용하는것인가요?그리고 부트스트랩 같이 외부css파일을 가져와 사용하고자 할때 이를 style-component랑 같이 접목시켜 사용하는 방안이 있을까요?

메이플비 · Accepted Answer

리액트 + 스타일 컴포넌트는 컴포넌트 그 자체의 재사용성을 높히는데 중점을 두기 때문에 오히려 그렇게 쓰기를 권장합니다.버튼 하나 만들어 놓으면, 스타일이건 html이건 신경쓸 것 없이, 클릭이벤트 함수만 전달하는 방식으로 재사용성을 극대화 하는거니까요.어떤 의미로 보면 스타일을 따로 관리할 필요가 없어서 어떤 의미에선 더 컴포넌트화가 쉬워집니다.그래서 컴포넌트 별로 스타일을 주고, 이러한 컴포넌트를 모아서 더 큰 컴포넌트를 만드는 방식이 리액트의 방식과 잘 맞는 라이브러리라고 봅니다.

동생 · Answer

공통으로 사용할 css나 scss 파일만들어서 전역으로 설정해주시면됩니다scss같은경우 변수처럼 사용도 가능해여

빠른코딩 · Answer

감수하고 사용합니다.스타일 시트가 방대해지는 문제가 있지만서로 독립되는게 장점입니다.

react의 style-component에 대해 궁금한점이 있습니다.

3개의 답변

기술 목록