[React] 자식 컴포넌트에 Prop 전달하는 방법

 

import imageA from './assets/imageA.png';
// 나머지 이미지 import 생략


const LIST = [
  {
    image: imageA,
    title: 'REACT',
    description:
      'REACTREACTREACT.',
  },
  {
    image: imageB,
    title: 'NEXT',
    description:
      'NEXTNEXTNEXT.',
  },
  {
    image: imageC,
    title: 'VUE',
    description:
      'VUEVUEVUE.',
  },
  {
    image: imageD,
    title: 'NUXT',
    description:
      'NUXTNUXTNUXT.',
  },
];

위와 같은 list 가 있다고 가정하면 

 

 

1. 단일 Prop 객체 전달

// 방법 1) 1:1 매칭

<Children
  title={LIST[0].title}
  description={LIST[0].description}  
  image={LIST[0].image} />


// 방법 2) 스프레드 연산자 사용

<Children
  {...LIST[0]} />


// 방법 3) 변수이름에 할당

<Children
  props={LIST[0]} />
  
그러면 Children 컴포넌트에서는 그 하나의 Prop만 받게 됩니다:

export default function Children({ props }) {
  //  props.title, props.description 이렇게 받거나
  //  const { title, description, image } = props;   로 구조분해 할당으로 사용
}

 

 

2. 복수의 Prop  를 단일 객체로 그룹화 해서 받기

<CoreConcept
  title={LIST[0].title}
  description={LIST[0].description}  
  image={LIST[0].image} />

export default function CoreConcept({ ...example }) { 
  // Rest Property (객체 구조분해) 사용
  // 1.  example.title, example.description 이렇게 사용하거나
  // 2. const { title, description, image } = example; 한번 뽑아서 쓴다