Theme Context 관련 질문

Question

안녕하세요 선생님. 1) 1: 55 에서 styled로 컴포넌트를 만들때는 Button.js 파일 안에 theme을 따로 import 하지 않는데, 지난 강의에서 Auth.js navigation 안에 헤더 컬러를 정할땐 왜 theme을 따로 import 하거나 useContext로 처리해줬어야했는지 궁금합니다. styled 는 styled-components 라이브러리에서 온 가족이라서 굳이 theme이 없어도 자동으로 적용되는건가요...? 2) 강의랑 관련 없는 질문이긴 하나 혹시 리액트로 개발을 하실 때 에러 메시지가 나오면 보통 어떻게 디버깅 하시는지 여쭤도 될까요? 다른 언어들과 다르게 리액트 에러 메시지는 어떤 에러가 났는지도 제대로 알려주지 않고 몇번째 줄에 에러가 났는지도 알려주지 않는거 같아서요. 예를 들어, 가끔 에러가 나서 핸들링을 하려고 하면 단순히 오타가 난건데 아예 관계없는 에러메시지가 뜬다는지 하는게 보여서 혹시 이런 경우 어떻게 처리하시는지 궁금합니다. 다시 코드를 하나하나 뜯어보는 수 밖에 없는건가요...? 감사합니다. 좋은 하루 보내세요.

김범준 · Answer

안녕하세요 Lee Ga In님, 1) 네, styles-components를 사용하면 styles-components를 작성하는 코드 안에서는 theme이 자동으로 전달됩니다. 조금 더 정확하게는 App 컴포넌트에서 ThemeProvider를 사용해서 theme이 전달되는 것입니다. ThemeProvider가 Context API에서 배운 Provider입니다. 그래서 자식 컴포넌트로 theme을 전달합니다. 2) 몇 가지 방법이 있습니다. 다만 어떤것이 가장 좋다고 말씀드리긴 어렵고 프로젝트의 규모나 상황에 따라 적절하게 사용하는 것이 좋습니다. 처음에는 상황에 따라 어떤 방법을 사용하는 것이 좋은지 잘 모를테니 모두 다 경험해 보는 것을 추천합니다. 1. console.log 이용하기 - 가장 쉽게 이용할 수 있는 방법으로 문제가 발생하는 예상 지점에 console.log를 이용해서 잘못된 값이 들어오는지 확인합니다. 2. debugger와 중단점 활용 - 크롬 개발자 도구를 이용해서 중단점을 활용하면 단계별로 코드 동작을 확인할 수 있습니다. 3. 리액트 디버깅 툴 - 리액트 디버깅 툴( 링크 )를 사용하는 방법이 있습니다. 그 외에 ESLint와 Prettier를 설정하면 코드도 깔끔해지고 기본적인 문법 이슈를 잡아주기 때문에 오타가 날 확률이 줄어들고, 눈으로 오타나 문제를 찾기도 쉬워집니다. ESLint와 Prettier를 활용하는것을 추천합니다. 즐거운 하루 되세요 감사합니다