[React] Props의 개념과 사용법

프로퍼티(Props)란 ?

프로퍼티는 props(properties의 줄임말)로, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용합니다.(단방향 데이터 흐름)

 

프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호{ }를 사용합니다. 

그리고 true와 false와 같은 Boolean 자료형의 경우, 중괄호로 감싸서 전달할 필요 없이 프로퍼티의 이름만 선언하면 됩니다.

 

이전에 Component 게시물에서도 언급했듯, props는 읽기 전용이기 때문에 하위 컴포넌트에서는 상위 컴포넌트의 프로퍼티를 수정할 수 없습니다. ⭐️⭐️⭐️

 

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="킹우현"/>
      <Footer />
    </div>
  );
}

export default App;

import React from 'react';

function Main(props) {
    return (
        <div>
            <main>
                <h1>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

props를 다음과 같이 Javascript의 비구조화 할당 문법을 사용해서 생략도 가능합니다.

💡 비구조화 할당 이란 ? 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식
(참고 : https://ossam5.tistory.com/161) 

import React from 'react';

function Main({name, color}) { // props 대신 비구조화 할당
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

PropTypes와 함께 하는 타입 검사

애플리케이션의 규모가 커짐에 따라 타입 검사를 활용하면 많은 버그를(bug) 잡을 수 있습니다. 특

정 애플리케이션에서는 전체 애플리케이션의 타입 검사를 위해 Flow 또는 TypeScript와 같은 JavaScript 도구(Extensions)를 사용할 수 있습니다.

 

이러한 것들을 사용하지 않더라도 React는 내장된 타입 검사 기능들을 가지고 있습니다.

컴포넌트의 props에 타입 검사를 하려면 다음과 같이 특별한 프로퍼티인 propTypes를 선언할 수 있습니다.

 

1) 프로퍼티의 자료형 및 타입 정의

import React from 'react';
import PropTypes from 'prop-types' // 프로퍼티 타입을 지정해주기 위해 사용 한다.

function Main({name, color}) {
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

// 프로퍼티 타입 지정
Main.propTypes = {
  name: PropTypes.string
}

export default Main;

React에서 제공하는 prop-types를 이용하여 프로퍼티의 자료형을 미리 선언할 수 있는데, 이는 React 엔진이 프로퍼티로 전달하는 값을 효율적으로 알 수 있고, 런타임 에러 예방에도 도움이 됩니다.(https://ko.reactjs.org/docs/typechecking-with-proptypes.html)

 

2) 프로퍼티 기본 값 설정 및 필수 값 설정

1. 기본 값 설정

컴포넌트에 props 기본값을 설정하고 싶은 경우 defaultProps 프로퍼티를 할당함으로써 props의 초깃 값을 정의할 수 있습니다.

import React from 'react';
import PropTypes from 'prop-types' // 프로퍼티 타입을 지정해주기 위해 사용 한다.

function Main({name, color}) {
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

// 프로퍼티 타입 지정
Main.propTypes = {
  name: PropTypes.string
}

// 프로퍼티 기본값 지정
Main.defaultProps = {
  name: 'default'
}

export default Main;

2. 필수 값 설정

디폴트 설정을 하지 않는 경우 해당 프로퍼티를 .isRequired를 사용해서 필수 프로퍼티로 선언 할 수도 있습니다.

import React from 'react';
import PropTypes from 'prop-types' // 프로퍼티 타입을 지정해주기 위해 사용 한다.

function Main({name, color}) {
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

// 프로퍼티 타입 지정 및 필수값 설정
Main.propTypes = {
  name: PropTypes.string.isRequired,
}

export default Main;