[React] props 정리

Props 사용법

컴포넌트 내부에서 코드를 작성한다.

받는쪽은 props 라는 예약어를 통해 받는다.

function Hello(props) {
return <div>{props.name}</div>
}

비구조화할당

컴포넌트의 파라미터에서 {}안에 받는 내용을 미리 표기한다.

function Hello({name}) {
return <div>{name}</div>
}
defaultProps
function Hello({name, age}) {
return <div>{name}</div>
}

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

Props.children

컴포넌트 태그 사이에 값이 있을때 '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;