React props : 컴포넌트에게 값 전달

 

컴포넌트 props란?

properties의 줄임말로서, 컴포넌트의 입력값이다.

props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미한다.

그리고 props 는 state와 달리 read-only 라는 것에 주의해야한다.

 

 

props 사용법

 

App.js

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

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

export default App;

App 컴포넌트에서 Hello 컴포넌트를 불러와서 사용할 때,

name과 color 값을 전달해주고자 한다.

 

 

첫 번째 방법: props 파라미터 활용

 

Hello.js

import React from 'react';

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

export default Hello;

 

props는 객체 형태로 전달 되는데, 콘솔로그로 props를 찍어보면

{name: 'subin', color: 'blue'} 라고 뜬다.

따라서 두 값을 사용할 때 객체형태로 props.name과 같이 사용하면 된다.

 

 

두 번째 방법 : es6문법 destructuring 활용

 

Hello.js

import React from 'react';

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

export default Hello;

es6문법인 destructuring 을 통해서 Hello의 인자로 {name, color} 을 전달한다.

 

 

전달받은 props를 바꿔서 사용하고 싶다면?

 

props는 직접적으로 바꿀 수 없다.

하지만 자식 컴포넌트에서 state에 props 값을 넣어준 후에 바꿔서 사용할 수 는 있다.

 

import React, {useState} from 'react';

function Hello({name, color}) {
  const [result, setResult] = useState(name);
  const onClick = () => {
    setResult('jenny');
  };
  
  return (
    <div style={{ color: color }}>
        <div onClick={onClick}> 안녕하세요 {result} </div>
    </div>
  )
}

export default Hello;

 

const [result, setResult] = useState(name);

 

: 전달 받은 name props를 state 로 관리해준다.

 

setResult('jenny');

 

: 그리고 바꾸고자 하는 값을 setResult의 인자로 준다.

 

 

defaultProps로 props 기본값 설정

 

컴포넌트에 props를 지정하지 않았을 때 기본값을 설정할 수 있다.

 

방법

컴포넌트이름.defaultProps = { key: 'value' }

 

Hello.js

import React from 'react';

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

Hello.defaultProps = {
  color: 'black'
}

export default Hello;

index.js

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

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

export default App;

 

props.children

 

컴포넌트 태그 사이에 넣은 것들을 조회하기 위해서는 props.children을 사용해야한다.

 

App.js

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

function App() {
  return (
    <Wrapper>
      <Hello name="subin" color="blue"/>
      <Hello name="subin" />
    </Wrapper>
  );
}

export default App;

위와 같이 Wrapper 태그 내부에 있는 Hello 컴포넌트를 보여지게 하려면,

 

 

Wrapper.js

import React from 'react';

function Wrapper({children}) {
  const style = {
    border: '2px solid black',
    padding: 20,
    width: 200
  };
  return (
    <div style={style}>
        {children}
    </div>
  )
}

export default Wrapper;

 

Wrapper 컴포넌트 인자로 디스트럭쳐링한 {children} 을 넣어줘야한다.