3. Props를 통해 컴포넌트에게 값 전달

props란 properties의 줄임말로 컴포넌트에게 값을 전달해 줘야할때 props를 사용한다.

예시를 들어서 App 컴포넌트에서 hello컴포넌트를 사용할 때 name이라는 값을 전달하면서 사용한다고 가정해보자

<app.js>

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

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

Hello 컴포넌트에 name(react)라는 값을 전달했다.

이 name 을 Hello컴포넌트에서 사용하려면

<hello.js>

import React from 'react';

function Hello(props) {
  return <div>react : {props.name}</div>
}

export default Hello;

이렇게 사용하면 된다.

여러개의 props와 비구조와 할당

<app.js>

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

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

export default App;

이번엔 Hello 컴포넌트에 name과 color를 전달 해 보겠다.

<hello.js>

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>react is {props.name}</div>
}

export default Hello;

props가 객체화되어 color와 name을 사용할 수 있게 된다.

하지만 여기서 객체화하지않고 파라메터에서 비구조화 할당을 이용하면 좀 더 쉽게 코드 작성이 가능하다

<hello.js>

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>react is {name}</div>
}

export default Hello;

defaultProps

어떤 컴포넌트에 props값을 따로 정해주지 않았을때 그 props가 null값이 아닌 default값으로 출력하게만드는 방법이다.

<app.js>

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

function App() {
  return (
    <>
      <Hello name="react" color="red"/>
      <Hello color="pink"/> /*해당 코드에 name이 정의되지 않았다.*/
    </>
  );
}

export default App;

이것을 Hello.js에서

<hello.js>

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>react is {name}</div>
}

Hello.defaultProps = { //default값을 정해준다.
  name: '이름없음'
}

export default Hello;

이러면 출력이

react is 이름없음 으로 출력이 되는것을 볼 수 있다.

props.children

컴포넌트 태그 사이에 값이 있을때 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;

wrapper.js라는 컴포넌트를 생성 후 app.js에서 hello랑 사용해보자

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