Todo list 프로젝트 준비 부분에서 질문있습니다

Question

backgroundColor: ${ ({ theme }) => theme . background } // 강의에서 사용된 코드 backgroundColor: ${ theme . background } 두 코드 동일하게 동작하는데 왜 화살표 함수를 사용하신건가요?

김범준 · Answer

안녕하세요 석동근님, 정확하게 어느 파일의 어느부분 코드인가요? 화살표 함수를 사용하지 않고 아래 코드로 작성해서 동작을 했다면 App.js 파일일텐데 맞나요? ThemeProvide 컴포넌트의 자식 컴포넌트로 사용되는 스타일드 컴포넌트로의 props에는 theme이 전달됩니다. 따라서, ThemeProvider 컴포넌트를 최상위 컴포넌트로 이용하고, 모든 스타일드 컴포넌트에서 props의 theme을 이용하기 위해 ${ props => props.theme.background } 와 같이 사용하고, 이는 ${ ({theme}) => theme.background } 와 동일한 코드 입니다. App.js 에서 ${theme.background}를 이용해도 문제가 없는 이유는 ThemeProvider에 theme을 지정하기 위해 파일의 상단에서 가져온 theme 때문입니다. import { theme } from './theme'; 석동근님이 사용한 코드는 ThemeProvider 컴포넌트가 스타일드 컴포넌트의 props로 전달해준 theme이 아니라, App.js 파일에서 가져온 theme 객체를 이용한 코드입니다. 감사합니다.