3. props를 이용해서 컴포넌트한테 값 전달해보기

# props (properties) : 어떠한 값을 컴포넌트에게 전달해줘야 할 때! 사용

 

// 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을 조회할 때 props.name 으로 접근!

# 그럼 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;

# 그러면 컴포넌트에 props를 아무런 값도 전달되지 않았을 때는 어떻게 할까?

​

→ 이럴 때에는 기본적으로 사용할 값인 defaultProps 값을 설정해주면 된다!

아래 코드를 통해 App.js에서 name을 받지 못했을 때에는 기본 값으로 설정한 '이름없음' 값이 사용된다는 것이다.

 

// 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

 

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

 

위 코드에서 <Hello> 태그를 <Wrapper> 태그로 감쌌지만, 막상 브라우저에서는 Hello 컴포넌트들이 보이지 않을 것이다!

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

왜냐면, Wrapper에서 props.children을 렌더링해주지 않았기 때문!

Wrapper에서 감싸는 <div> 태그 사이에 {children} 을 렌더링 해주면 <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;

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

 

---

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