[리액트(React) 스터디]'props'로 컴포넌트에게 값 전달하기

props란 !

props는 properties의 줄임말이다.
어떠한 값을 컴포넌트에게 전달할 때 사용한다.

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, 비구조화 할당(구조분해)

App.js

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

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

export default App;

color추가하기!

Hello.js

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'를 '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.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컴포넌트들은 보여지지 않는다.
내부의 내용이 보여지게 하기 위해서는 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;