리액트를 다루는 기술 - props

컴포넌트의 Props 개념

props는 properties의 줄임말. 컴포넌트에 값을 전달할 때 사용한다.

 

props 사용법

App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name을 전달해주고 싶다면?

//App.js
import React from 'react';
import Hello from './Hello';

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

export default App;

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

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

props는 객체 형태로 전달되며 조회할 때는 props. 으로 조회를 한다

 

여러 개를 전달

//App.js
import React from 'react';
import Hello from './Hello';

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

export default App;

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

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

export default Hello;

비구조화 할당을 사용하면 코드를 더 간결하게 작성할 수 있다.

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

defaultProps로 기본값 설정하기.

컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값 설정.

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

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

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

export default Hello;

props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶다면, children을 조회하면 된다.

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

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

export default Wrapper;


//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;

proptypes

https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95

[React] PropTypes 쓰는 이유, 방법