Jun

작성한 질문수 3

1

안녕하세요,

  

${ ({theme}) => theme.color } 부터 천천히 살펴보겠습니다. 

스타일드 컴포넌트는 ThemeProvider 컴포넌트에 의해 전달된 theme props를 사용할 수 있습니다. 
따라서, 다음과 같이 theme을 사용할 수 있습니다.
${ (props) => props.theme.color } 

  

우리는 props 중에서 theme만 사용할 예정이기때문에, 
${ ({theme}) => theme.color } 
라고 간단하게 작성했습니다. 

  

문의주신 내용도 동일한 방법으로 작성된 코드입니다. 
Container 컴포넌트로 insets라는 props를 전달해서, 스타일드 컴포넌트에서 사용했습니다. 
처음 코드는 다음과 같습니다. 
${ (props) => props.insets.top } 

  

우리는 props 중에서 insets만 사용하니 간단하게 다음과 같이 작성할 수 있습니다. 
${ ({insets}) => insets.top } 

마찬가지로, insets 에 있는 값중에서 top만을 사용하니 다음과 같이 작성할 수 있습니다. 
${ ({ insets: {top} }) => top } 

  

테스트를 위해 다음 코드를 브라우저의 콘솔, 혹은 터미널에서 node를 실행해서 확인해 보시면 이해가 편할것이라 생각합니다. 

const obj1 = {name: 'beomjun', insets: {top: 1, bottom: 2 }};

const func1 = (params) => console.log(params)

const func2 = ({name, insets}) => console.log(name, insets)

const func3 = ({name, insets: {top, bottom}}) => console.log(name, insets, top, bottom)

func1(obj1);

func2(obj1);

func3(obj1);

  

감사합니다. 

0

안녕하세요, 

  

"구조 분해 할당"이라고 검색하시면 됩니다. 
영어로는 "destructuring assignment" 라고 검색하시면 됩니다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

  

즐거운 하루 되세요. 

감사합니다. 

0

감사합니다! 자바스크립트 문법인 것 같아서 여쭤보기 죄송했는데 답변해주신 덕분에 많이 도움이 됐습니다!

${(props) => props.insets.top}에서 ${({insets})=> insets.top} 생략한 거랑

${({insets}) => insets.top}에서 ${ ({ insets: {top} }) => top }  이렇게 바꾸는 방식을 좀더 알아보고 싶은데

구글에 뭐라고 치면 자세히 나올까요?