[짜잘한 react] defaultProps, Props children

오늘의 주제
1. defaultProps
2. Props Children

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

• 함수명.defaultProps={} 형태 사용

import React from 'react';

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

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

export default Hello;

2. Props children 불러오기

• 컴포넌트 내부에 다른 컨포넌트를 넣었을 때, {children}props를 추가해줘 내부를 보이게 해준다.

🔻 App.js / 컴포넌트 반영

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

🔻 Wrapper.js / 컴포넌트 내에 children props 기입

import React from 'react';

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

export default Wrapper;