props

props 사용법

props 는 properties 의 줄임말이다.

우리가 어떠한 값을 컴포넌트에게 전달해주어야 할 때 props 를 사용한다.

 

예를 들어 App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name 이라는 값을 전달해주고 싶다고 가정하자.

 

컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회할 수 있다.

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

props 는 객체 형태로 전달되며 만약 name 값을 조회하고 싶다면 props.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 내부의 값을 조회할 때마다 props. 을 입력하게 된다.

여러개의 props 는 함수의 파라미터에서 비구조화 할당(구조분해)을 통해서 간결하게 작성할 수 있다.

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

import React from 'react';

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

export default Hello;

🤔 App 에 color 라는 값을 추가 설정한 뒤, Hello 컴포넌트에서 color 값을 조회해서 폰트의 색상을 설정해보자.

 

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;

 ↓ props 파라미터에서 비구조화 할당

import React from 'react';

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

export default Hello;

 

defaultProps 기본값 설정

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

 

Hello.js

import React from 'react';

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

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

export default Hello;

 

App.js

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

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

export default App;

 

props.children

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

 

Wrapper.js

import React from 'react';

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

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

Wrapper 태그 내부에 Hello 컴포넌트 두 개를 넣었는데 브라우저에서는 보여지지 않는다.

 

내부의 내용이 보여지게 하기 위해서는 Wrapper 에서 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;