[React] props

 

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

: 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회,

props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 porps.name을 조회하면 된다. 

 

import React from 'react';

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

export default Hello;

 

 

여러개의 porps, 비구조화 할당

: props 내부의 값을 조회 할 때는 함수의 파라미터에서 비구조화 할당 문법을 사용하면 조금 더 코드를 간결하게 작성할 수 있다. 

 

import React from 'react';

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

export default Hello;

 

 

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

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