props를 통해 컴포넌트에게 값 전달하기

이번에는 컴포넌트의 props라는 개념에 대해서 알아보자.props는 properties의 줄임말이다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, 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컴포넌트에서 name값을 사용하고 싶을땐 어떻게 사용하면 되는지 알아보자.

 

Hello.js

 

import React from 'react';

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

export default Hello;

컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할수 있다. props는 객체 형태로 전달되며, 만약 name값을 조회하고 싶다면 props.name을 조회하면 된다.

 

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

Hello컴포넌트에 또 다른 props를 전달해보자. color라는 값을 설정해보자.

 

App.js

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

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

export default App;

그 다음에는 Hello컴포넌트에서 color값을 조회해서 폰트의 색상으로 설정을 해보자.

 

Hello.js

import React from 'react';

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

export default Hello;

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

 

Hello.js

import React from 'react';

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

export default Hello;

defaultProps 로 기본값 설정

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

 

Hello.js

import React from 'react';

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

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

export default Hello;

한번 App에서 name이 없는 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을 조회하면 된다.

이번에 props.children을 사용하는 새로운 컴포넌트를 만들어 보자.

Wrapper.js를 src디렉터리에 만들어 보자.

 

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에서 사용해 보자.

 

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태그 내부에 Hello컴포넌트 두개를 넣었는데, 브라우저를 확인하면 다음과 같이 Hello컴포넌트들은 보여지지 않을 것이다.

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