Dev/React

useTheme vs theme import

rryu09 2024. 11. 18. 14:14

팀원이 코리 달아줘서 알게 된 내용!
theme 를 context 로 themeProvider 로 전달해서 사용하고 있을 때, styled-component 안에서는 props.theme 해서 접근해 사용할 수 있었다.

그런데 styled-component 밖 로직단에서 상태별로 분기해 색상을 변경해야 할 때는 어떨까?
props로 사용할 수 없으니 나는 export 된 theme 를 직접 사용했었다.

이때 useTheme의 존재를 알게 되었는데 ..

https://emotion.sh/docs/theming#usetheme

 

Emotion – Theming

(Edit code to see changes)

emotion.sh

 

 

가장 큰 차이점은 현재 theme 를 반영할 수 있다는 점인가보다. 이게 바뀌면 적용된 컴포넌트들도 전부 리렌더링된다.

기존처럼 theme 를 직접 임포트해서 쓴다면 테마 변경에 대응하기 어렵다는 점, 그리고 특정 테마 파일과 결합도가 강해진다는 점이 문제인 듯

context에 있는 theme 를 이용하는 것이 구조적으로 더 의도한 바라고 생각해 해당 리뷰를 반영했다.

'Dev > React' 카테고리의 다른 글

공통 컴포넌트 컨트롤버튼 개발일지  (1) 2024.11.20
공통 컴포넌트 아이콘버튼 만들기  (0) 2024.11.17
Next.js 라우팅  (8) 2024.05.08