리엑트 입문 2 - props로 값 전달하기

1. props의 기본 사용법

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는 객체형태로 전달되며, name의 값이 react로 넘어오게 됩니다.

2. 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({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

함수에서 인자로 바로 할당하여 사용할 수 있습니다.
구조분해 할당(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

3. props.children

태그 사이의 컴포넌트를 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;

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.js에서 children을 랜더링 해주게 되면 Hello 컴포넌트 2개가 랜더링 됩니다.

참고자료 : https://react.vlpt.us/basic/05-props.html