스타일드 컴포넌트
-
스타일드 컴포넌트 조건부 렌더링 활용하기React.js & Next.js 2022. 8. 26. 22:51
스타일드 컴포넌트 조건부 렌더링 활용하기 프론트엔드 개발 환경에서 CSS-in-JS 를 사용하는 가장 큰 이점 중에 하나는 property를 css 에도 적용할 수 있다는 것일 것이다. 리액트에서 className 을 통해 조건부 렌더링 하는 것보다 state 를 전달하는 것이기 때문에 맥락을 파악하기 쉽고 이해하기도 쉽다. 이렇게 CSS-in-JS 중 스타일드 컴포넌트(styled-component) 를 잘 활용하는 방법을 소개해볼까 한다. CSS-in-JS의 장점은 재사용 가능한 컴포넌트로써 스타일링 코드의 양을 줄일 수 있고, 타입스크립트의 경우 props에 대한interface를 적극적으로 활용하여 더욱 가독성이 높은 코드를 만들 수 있다. 코드 상에서는 다음과 같이 사용된다 setIsHandsU..