💿 이 글의 목적

Westagram을 구현하면서 피드에 대한 정보를 Mock data로 받아와서 맵을 돌려 피드 여러 개를 뿌리려고 했다. 근데 왜 자꾸 에러가 나지? 로그를 찍어봐도 데이터 제대로 받아오고 있는데? 한참 씨름하다 42기 프론트 대장 수현님의 도움으로 해결했고 원인은 props에 대한 이해 부족이었다.

💿 Props란?

Properties의 약자로 property를 직역하면 재산 또는 속성인데 tmi를 첨가하자면 재산이라는 뜻일 때는 불가산명사이므로 props는 속성이라고 해석하는 게 맞다. 근데 개념에 대한 이해는 재산이라고 해석하는 게 이해하기 편하다.

props = 재산 = 부모가 자식한테 상속하는 거!

근데 상속받을 때 어떻게 상속받는지 알아야 나처럼 헛짓 안하고 잘 써먹을 수 있음.

💿 Props는 어떻게 생겼을까?

아래 코드처럼 동산과 부동산을 자식 컴포넌트에 재산으로 던져주고 자식 컴포넌트 내에서 로그를 찍어보면

export default function 부모() {
  return (
    <div className="부모">
      <자식 동산="100원" 부동산="5평짜리 단칸방"/>
    </div>
  );
}

const 자식 = 재산 => {
  console.log(재산);
  return <h1>받은 부동산은 {재산.부동산}</h1>
}

{동산: "100원", 부동산: "5평짜리 단칸방"}

👆짜잔! 객체로 받습니다!

다시 말해 재산(props)가 결국

const 재산 = {동산: "100원", 부동산: "5평짜리 단칸방"}

👆이렇게 생긴 거임.

💿 Props를 구분할 해버리기

가독성을 높이기 위해

const 자식 = 재산 => {
  const {동산, 부동산} = 재산;
  console.log(재산);
  return <h1>받은 부동산은 {부동산}</h1>
}

👆이렇게 구조분해할당(디스트럭쳐링)하고 써도 되는데.. 가 아니라 디스트럭쳐링해서 쓰삼.

💿 Props에 객체 담기

그런데 props(재산)에 객체를 담아 전달하면 어떻게 될까?

export default function 부모() {
  return (
    <div className="부모">
      <자식 유산={{동산:"100원",부동산:"5평짜리 단칸방"}}/>
    </div>
  );
}

const 자식 = 재산 => {
  console.log(재산);
  return <h1>받은 부동산은 {재산.유산.부동산}</h1>
}

//console.log(재산)
{
  유산: {
    동산 :"100원",
    부동산: "5평짜리 단칸방"   
  }
}

짜잔! 유산이라는 객체를 또 객체로 감싸버림.

<자식 유산={{동산:"100원",부동산:"5평짜리 단칸방"}}/> 를 보고 '왜 객체를 또 객체로 감쌌음?!' 이라고 의문이 생길 수 있다. 내가 그랬음 ^^; 처음에 배울 때는 단순히 jsx 내에서 js처럼 쓰고 싶으면 {}로 묶으면 된다고 배웠는데, 사용해보니 jsx문 내에서 원시 데이터가 아닌 데이터들은 다 객체로 래핑한다고 이해하는 게 더 정확한 것 같다.

그래서 디스트럭쳐링을

const {동산, 부동산} = 재산;

👆이렇게 하면 안됨.

객체에 데이터가 유산 하나만 들어간 꼴이니까

const {유산} = 재산;

👆이게 맞음.

그럼 아까처럼

return <h1>받은 부동산은 {부동산}</h1>;

👆이렇게는 못씀?

아니! 쓸 수 있음!

const 자식 = 재산 => {
  const {유산} = 재산;
  const {동산,부동산} = 유산;
 
  return <h1>받은 부동산은 {부동산}</h1>;
}

👆이렇게 한번 더 풀거나 (근데 쓸데없이 길음)

const 자식 = ({유산}) => {
  const {동산,부동산} = 유산;
 
  return <h1>받은 부동산은 {부동산}</h1>;
}

👆이렇게 파라미터로 받을때부터 객체로 감싸서 받으면 됨.
주의할 점은 아까는 자식 컴포넌트 내에서 재산이라고 임의로 명시했다면 객체로 감싸서 받을 때는 부모가 props로 던질 때 명시했던 값을 그대로 써야함.
왜냐면

{
  유산: {
    동산 :"100원",
    부동산: "5평짜리 단칸방"   
  }
}

👆props가 이렇게 생겼으니까
{유산} << 이렇게 받아야

{
    동산 :"100원",
    부동산: "5평짜리 단칸방"   
  }

👆받은 내용이 이렇게 생겨서

const {동산,부동산} = 유산;

👆이렇게 디스트럭쳐링을 할 수 있는거임.
이해했지? 다음부터 잘하자.

💿 Reference

https://ko.reactjs.org/docs/components-and-props.html

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