theme provider의 역할

[jindonyy]

현재 text 컴포넌트를 만들고 있습니다.
text 컴포넌트에 사용할 font-size를 정의하여 theme provider에서 사용하고자 하는데요.
theme에 font 속성을 추가해도 되는지 의견이 듣고싶습니다.

수정 방향

현재: 다크모드와 라이트 모드의 색상만 theme provider를 이용해 사용, 이외에 theme 폴더의 color, font는 import 해와서 사용한다.
수정 방향: theme 폴더에 color, palette, font, typography를 theme provider를 이용해 사용한다.

현재처럼 import 해와서 사용할 때 문제점을 적어놓은 글이 있긴 한데 현재 저희 코드에서의 문제점이 아니긴 한거 같아요.
사실 처음에는 일일히 import 해와야하는 점이 전 불편하다고 생각해서 font 속성도 함께 넣었으면 했는데요.
MUI에서 설명한 테마 관련 문구를 빌리자면 "Themes let you apply a consistent tone to your app."라고 적혀있는데요.
그냥 폰트만 지정한다면 폰트 추가가 선택 사항이지만 다크모드, 라이트모드처럼 웹이냐 모바일이냐에 따라 폰트가 달라지니 테마로 사용하면 좋지 않을까 생각이 듭니다.

참고 라이브러리

1. MUI에서 사용하는 테마에 사용할 수 있는 값으로 typography가 지정되어 있습니다.
2. styled-typography 라이브러리에서도 themeProvider를 이용하고 있습니다. (제가 생각한거처럼 폰트테마가 아닌데 provider를 사용하고 있습니다.)
3. react-theme-provider 라이브러리에서는 "You can use it to customize colors, fonts, etc."라고 정의하고 있습니다.

@hemudi @healtheloper @mina-gwak

[healtheloper]

웹이냐 모바일이냐에 따라 폰트가 달라지니 테마로 사용하면 좋지 않을까 생각이 듭니다.

dark, light 는 사용자에 의해서 수시로 바뀔 수 있지만, font 의 경우 디바이스가 웹 <-> 모바일로 바꾸도록 하는 것은 의도된 행동이 아니라고 생각합니다.
디자인에 의해서 폰트가 웹이냐 모바일이냐에 따라 달라질 수도 있지만, 앱이 시작될 때 사용자의 환경을 체크해서 그에 알맞는 폰트를 지정해주면 되는걸로 해결될 거라 생각해요.

mui Typography

만약 라이브러리를 사용할 때 custom 한 font size, weight 를 사용해야 한다면 어느곳에 묶여야 하는가? 를 생각하면 theme 이 맞다고 생각해요
라이브러리들은 그런 의미에서 font 를 theme 에 포함시키고, theme config 를 수정할 수 있게 제공하는 거라고 생각하고요.
그런데 프로젝트가 자체적으로 수정할 수 있는 fonts 정보를 갖고있고, 자체적인 Text(Typography) Component 를 갖고있다면 그것을 꼭 theme 에 포함시켜야 되냐? 라고 생각하면 불필요하다고 생각했습니다.

어찌되었건 theme 이라는 것의 정보에 font 정보가 포함되어져서 theme 을 사용하는 곳 마다 모두 font 정보를 갖게되는데 불필요한 운반같아요

[mina-gwak]

Theme Provider를 어떤 용도로 사용할 것이냐에 따라 다를 것 같은데요! 지금 사용하고 있는 방식의 경우 이전처럼 전역적으로 쓰이는 컬러, 폰트값 등을 공유하는 용도로 쓰이는 게 아니라 특정 테마가 있고(라이트, 다크) 그 테마에 따라 바뀌는 값들을 제공하고 있으니 폰트가 현재 저희가 정의하고 있는 테마에 따라 달라지는 경우에는 포함하고 그렇지 않으면 제외하는 게 맞다는 생각이 드네요. 말씀하신 것처럼 현재 웹인지 모바일인지에 따라 폰트 관련된 속성이 변경되는 부분이 있는지는 잘 모르겠고, 달라진다고 하면 폰트 사이즈 정도일텐데 이게 테마에 따라 달라지는 값은 아닌 것 같아 포함하지 않는 게 맞지 않을까 싶습니다!

그리고 참고 라이브러리로 제시해주신 MUI의 경우 테마에 사용할 수 있는 값으로 typography를 지정하고 있긴 한데, 하단의 Theme builder 부분에서 보여지고 있는 영상을 보니 4가지 테마에 따라 주가 되는 색상이나 사용되는 폰트가 달라지고 있고, 제가 생각하기엔 위에서 말씀드린 것과 비슷한 맥락으로 typography에 관한 값을 사용할 수 있다는 것으로 보여졌습니다!

[hemudi]

처음에는 본문에서 말씀하신 것 처럼 Theme이라는 용어 자체의 의미만 생각해 봤을 때 색상 뿐 아닌 fonts 속성 등이 추가되어도 어색함은 없고, ThemeProvider로 상수 값인 스타일 속성들을 한꺼번에 관리 할 수 있다는 이점도 있다고 생각해서 괜찮지 않나 싶었습니다.

그런데 위의 제이미께서 말씀해주신 ThemeProvider의 용도 측면에서 생각을 해보니 ThemeProvider를 여러 Theme을 구현하는 용도로 쓴다면 딱 각각의 Theme에 종속적인 속성 값들만 관리하게 구현하여 ThemeProvider로 가져오는 값이 Theme에 따라 변동이 되는 값이라는 의미를 명확히 하고 사용 하는게 오히려 유지보수에 용이 할 것 같다는 생각이 드네요. ThemeProvider는 Theme에 따라 변동 되는 스타일 속성값들만 관리한다는 책임만 있을테니까요.

[jindonyy]

넵 의견 감사합니다 여러분! 그럼 기존의 theme으로 유지하는걸로 할께여!