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

출처 

https://react.vlpt.us/basic/05-props.html 

 

props 는 properties 의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다.

 

props의 기본 사용법

App.js

...
return (
    <>
      <Hello name="react"/>
    </>
  )
...

 

Hello.js

import React from 'react';

function Hello(props) {
    return <div>안녕하세요 {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.js

import React from 'react';

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

export default Hello;

→ 한번 더 간결하게

import React from 'react';

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

export default Hello;

💡

jsx안에서 {} 를 써서 js표현을 사용하는 것은 공식문서 - jsx-props에 나와있는데, style=안에 중괄호가 두 번 들어가는것은 가장 위 {}는 jsx문법, 그리고 그 안에 {}는 객체리터럴 입니다.

import React from 'react';

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

export default Hello;

 

---

 

props.children

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

App.js

import React from 'react';

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

export default 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;