리액트의 값 전달 방식 Props - React

React JS

React - 값 전달 방식 Props

---

Props란?

props는 properties의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다.
또한 각 컴포넌트가 비슷하지만 다른 속성을 가지고 있을 때 리액트에서는 함수 컴포넌트 혹은 클래스 컴포넌트를 이용하여 그 값을 전해주고 표시합니다.

 

Props의 기본 사용법

어떠한 컴포넌트를 이용하여 "안녕하세요 name"이라는 내용을 표시하고 싶을 때 아래의 Hello.js 와 같이 작성해줍니다.

 

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

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

export default Hello;

 

이제 이름을 위해 다른 컴포넌트를 작성할 필요는 없습니다. 이를 App.js에 import 하여 사용합니다. name 프로퍼티를 따로 정리하여 주면 "안녕하세요 react"의 내용을 표시할 수 있습니다.

 

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

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

export default App;

 

여러 개의 props, 비구조화 할당

여러 개의 props를 전해주어야 할 때는 어떠한 방식을 사용하는지 예시를 통해 보겠습니다.

 

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

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

export default Hello;

 

Hello.js에서 이전 사용했던 점(.)을 이용하는 방법이 아닌 프로퍼티의 이름을 바로 사용하였습니다.

원래라면 style={props.color}라고 작성해야 하지만 { color }를 사용해 더 간결한 코드 작성 가능했습니다 이를 비구조화 할당이라고 합니다. 데이터를 디스트럭팅한다고 표현하기도 합니다.

 

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;

 

defaultProps를 설정하고 App.js에서 프로퍼티를 작성하지 않으면 기본값을 반환해줍니다.

 

props.children

컴포넌트를 만들다 보면 예시와 같이 Wrapper 컴포넌트로 감싸진 즉 부모 컴포넌트를 가지는 경우가 있습니다. 여기서 children 값을 작성하지 않고 props를 전달하려고 한다면 내용은 표시되지 않을 것입니다. 부모 컴포넌트가 자식 컴포넌트의 props를 비구조화 할당으로 받고 이를 다시 표시하는 것입니다.

 

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

 

예시에서 {children} = <Hello/> 컴포넌트 두 개를 의미하게 됩니다.

 

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

 

기억해야 할 점은 props는 읽기 전용입니다 state처럼 값을 변경하는 것은 불가능합니다.