[React] props

props

→ properties의 줄임말. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.

비구조화 할당(=구조분해)

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

• 비구조화 할당 문법

  const object = { a: 1, b: 2 };
  
  const { a, b } = object;
  
  console.log(a); // 1
  console.log(b); // 2

  → 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해주는 것.

  const object = { a: 1, b: 2 };
  
  function print({ a, b }) {
    console.log(a);
    console.log(b);
  }
  
  print(object);

  함수의 파라미터에서도 비구조화 할당을 할 수 있다.
  

defaultProps로 기본값 설정

→ 컴포넌트에 props를 지정하지 않았을 때, 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 **defaultProps**라는 값을 설정하면 된다.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

**Hello.defaultProps = {
  name: '이름없음'
}**

export default Hello;

props.children

→ 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 때 사용.

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;
### ```