styled-components를 사용하면 컴포넌트별로 스타일을 적용할 수 있다. css 내에서 변수를 사용하여 css를 동적으로 처리할 수 있으며, 해당 컴포넌트에 적용된 css를 쉽게 확인할 수 있어 가독성이 높아진다는 장점이 있다.
먼저 yarn add styled-components 명령어를 사용해 라이브러리를 설치해주었다. import를 해준 뒤
위와 같은 방식으로 스타일을 지정해 줄 수 있다.
스타일을 적용할 땐 적용 할 컴포넌트를
위와 같이 감싸주면 된다.
당연히 인자 또한 넘겨줄 수 있다.
state와 삼항 연산자를 사용하면, 아래와 같이 js를 사용해 간단하게 css를 동적으로 처리할 수 있다.
'React.js' 카테고리의 다른 글
| package.json 필요한 라이브러리 한번에 설치하기 (0) | 2022.03.07 |
|---|---|
| [React] useMutation Hook isLoading 사용 중 문제 (0) | 2022.02.07 |
| [React] Components handleDelete 처리 (0) | 2022.01.28 |
| [React] React-Query를 사용할 때 (0) | 2022.01.25 |
| [React] DOM에 컴포넌트를 빠르게 나타내기 위해 .. (0) | 2022.01.24 |