-
질문 & 답변
카테고리
-
세부 분야
모바일 앱 개발
-
해결 여부
미해결
useSateAreaInsets를 Container에 넘겨주고 이것을 활용하는 부분이 이해가 잘 되지 않습니다.
21.04.20 00:00 작성 조회수 103
0
const Container = styled.View`
align-items: center;
background-color: #ffffff;
padding-top: ${({ insets: { top } }) => top}px;
padding-bottom: ${({ insets: { bottom } }) => bottom}px;
padding-right: ${({ insets: { right } }) => right}px;
padding-left: ${({ insets: { left } }) => left}px;
`;기존에 props에 있는 데이터를 사용할 때
${({theme}) => theme.color} 이런 식으로 사용했었는데
문법이 좀 생소합니다. 좀 자세히 설명해주시면 감사드리겠습니다!
답변을 작성해보세요.
1
김범준
지식공유자2021.04.20
안녕하세요,
${ ({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
김범준
지식공유자2021.04.21
안녕하세요,
"구조 분해 할당"이라고 검색하시면 됩니다.
영어로는 "destructuring assignment" 라고 검색하시면 됩니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
즐거운 하루 되세요.
감사합니다.
0
Jun
질문자2021.04.21
감사합니다! 자바스크립트 문법인 것 같아서 여쭤보기 죄송했는데 답변해주신 덕분에 많이 도움이 됐습니다!
${(props) => props.insets.top}에서 ${({insets})=> insets.top} 생략한 거랑
${({insets}) => insets.top}에서 ${ ({ insets: {top} }) => top } 이렇게 바꾸는 방식을 좀더 알아보고 싶은데
구글에 뭐라고 치면 자세히 나올까요?
답변 3