인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

석동근님의 프로필 이미지
석동근

작성한 질문수

처음 배우는 리액트 네이티브

프로젝트 준비

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

작성

·

225

0

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

답변 1

0

김범준님의 프로필 이미지
김범준
지식공유자

안녕하세요 석동근님, 

  

정확하게 어느 파일의 어느부분 코드인가요?

화살표 함수를 사용하지 않고 아래 코드로 작성해서 동작을 했다면 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 객체를 이용한 코드입니다. 
  

감사합니다. 

석동근님의 프로필 이미지
석동근

작성한 질문수

질문하기