React - props 통해 컴포넌트에 값 전달

props = properties

 

1. App.js 에서 JSX 코드 내에 속성값 넣어줌

import React from 'react';
// import logo from './logo.svg';
// import './App.css';
import Hello from './hello';

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

export default App;

2. hello.js 에 파라미터로 props를 사용하고 콘솔로그에 찍어보면

import React from 'react';

function Hello(props){
  console.log(props)
  return <div>안녕하세요</div>;
}

export default Hello;

3. 객체 형태로 컴포넌트에 값을 전달했다는 것을 확인할 수 있다.

4. 넘겨받은 값을 컴포넌트에서 사용

- hello.js -

import React from 'react';

function Hello(props){
  return <div>안녕하세요 {props.name}</div>;
}

export default Hello;

{props.name} 이렇게 써주면 된다.

 

 

Props 사용법

1. App.js 에서 속성값 넣기

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

2. hello.js 에 style={{color : props.color}}

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

- 중괄호 두개인 것은 안에 중괄호는 객체를 감싸는 중괄호, 밖의 것은 객체 가져오는 중괄호

 

3. 매번 props.style, props.name 로 쓰긴 번거롭다면, 비구조 할당 사용

import React from 'react';

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

export default Hello;

 

4. 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 logo from './logo.svg';
// import './App.css';
import Hello from './hello';

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

export default App;

- 브라우저 -

 

 

5. props.children

- JSX 안의 값을 조회하기 위해 사용

- 다른 컴포넌트로 어떤 컴포넌트의 내용 포함시키고 싶을 때

 

- 확인위해 새로운 컴포넌트 생성(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 -

import React from 'react';

function Wrapper( {children} ){
  const style = {
    border: '2px solid black',
    padding: 16
  }

  return <div style={style}>{children}</div>
}

export default Wrapper;

- App.js 에서 <Wrapper></Wrapper>로 props들 감싸면 내부 props들이 브라우저 내에는 보이지 않음

- Wrapper.js 에서 { children }을 파라미터로 넣어주고, 반환시켜 주어야 정상적으로 내용이 보인다.