useSateAreaInsets를 Container에 넘겨주고 이... - 인프런

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

Stack Navigation - 헤더 수정

useSateAreaInsets를 Container에 넘겨주고 이것을 활용하는 부분이 이해가 잘 되지 않습니다.

작성

153

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} 이런 식으로 사용했었는데

문법이 좀 생소합니다. 좀 자세히 설명해주시면 감사드리겠습니다!

react-native javascript

답변 3

김범준

지식공유자

안녕하세요,

${ ({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);

감사합니다.

김범준

지식공유자

안녕하세요,

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

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

즐거운 하루 되세요.

감사합니다.

Jun

질문자

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

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

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

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

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

useSateAreaInsets를 Container에 넘겨주고 이것을 활용하는 부분이 이해가 잘 되지 않습니다.