styled-components를 사용하면 컴포넌트별로 스타일을 적용할 수 있다. css 내에서 변수를 사용하여 css를 동적으로 처리할 수 있으며, 해당 컴포넌트에 적용된 css를 쉽게 확인할 수 있어 가독성이 높아진다는 장점이 있다. 먼저 yarn add styled-components 명령어를 사용해 라이브러리를 설치해주었다. import를 해준 뒤 위와 같은 방식으로 스타일을 지정해 줄 수 있다. 스타일을 적용할 땐 적용 할 컴포넌트를 위와 같이 감싸주면 된다. 당연히 인자 또한 넘겨줄 수 있다. state와 삼항 연산자를 사용하면, 아래와 같이 js를 사용해 간단하게 css를 동적으로 처리할 수 있다. 다크모드 전환 & 해제
