[React] props 개념 다지기

react의 기본 개념이 부족해서 값을 전달하거나 받아오는 것에 한계를 느껴 기본 개념을 정리하다가 글을 쓰게 되었다.

개념

컴포넌트 속성을 설정할 때 사용하는 요소로, 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터이다.(단방향 데이터의 형식의 흐름을 갖는다)

• properties의 줄임말이다.
• props는 읽기 전용으로, 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

순수함수 → 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문

function sum(a, b) {
  return a + b;
}

순수함수 ❌ → 자신의 입력값을 변경하기 때문

function withdraw(account, amount) {
  account.total -= amount;
}

반응형

사용방법

프로퍼티에 문자열을 전달할 때는 **큰 따옴표(””)**를 사용하고, 그 외에는 **중괄호({})**를 사용한다.

예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다.

1) 프로퍼티 전달

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 는 파라미터를 통하여 조회 할 수 있다. props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 props.name 을 조회하면 된다.

 

2) 여러개의 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(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

props 내부의 값을 조회 할 때마다 props. 를 입력해서 전달한다. 함수의 파라미터에서 비구조화 할당(혹은 구조 분해) 문법을 사용하면 조금 더 코드를 간결하게 작성 할 수 있다.

Hello.js(비구조화 할당)

import React from 'react';

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

export default Hello;

→ 처음 쓰는 사람들은 헷갈릴 수 있는데, 함수 옆에 받아와지는 값을 잘 확인해야 한다.

 

3) 숫자 프로퍼티

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function App() {
  return (
    <div>
      <Header />
      <Main name={9} color="blue"/>
      <Footer />
    </div>
  );
}

export default App;

값이 숫자이므로 위에서 말했던 것처럼 {}를 선언해야 한다.

 

프로퍼티의 타입 정의

• 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps라는 값을 설정하면 된다.
• 리액트 엔진이 프로퍼티로 전달하는 값을 효율적으로 알 수 있고, 버그예방에도 도움이 된다.
• 리액트에서 제공하는 prop-types를 이용하여 각각의 자료형을 선언하면 된다.

Hello.js

import React from 'react';
import PropType from 'prop-type';

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;

→ 위와 같이 쓰면 아래와 같은 결과가 나온다.

해당 결과물

→ 기본값으로 설정해놨기에 name을 지정하지 않아도 이름없음이 결과로 나온다. 또한 저렇게 쓰려면 모듈을 가져와서 써야 한다. 주의하자. 또한 PropType에는 여러가지 설정이 있으니 공식 문서를 확인해도 될 듯하다.

• 필수값 설정 : PropTypes.string.isRequired

 

children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children을 조회하면 된다.

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;

1) Wrapper.js

import React from 'react';

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

export default Wrapper;

2) 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;

아까와 같이 이를 표현하는 방법은 두 가지가 존재한다. 하나는 props를 쓰는 방법과 비구조화 할당 방법이 있다.

 

추가

props 값 설정을 생략하면 ={true}