[ React ] Props 사용하기

1. Props란 무엇인가요?

props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하기 위한 객체입니다. React에서 컴포넌트는 재사용 가능한 단위로 이루어져 있으며, props를 사용하면 동적인 데이터와 UI를 구현할 수 있습니다.

props는 읽기 전용으로, 자식 컴포넌트는 props를 변경할 수 없습니다. 데이터를 전달하고 렌더링할 때 매우 유용합니다.

 

2. Props 사용 기본 예제

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기

아래는 부모 컴포넌트가 자식 컴포넌트로 **이름(name)**과 **나이(age)**를 전달하는 예제입니다.

 

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent(){ 
return ( 
    <div> <h1>부모 컴포넌트</h1> 
        {/* 자식 컴포넌트로 props 전달 */}
        <ChildComponent name="React" age={17} /> 
    </div> 
    ); 
}

export default ParentComponent;

 

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

function ChildComponent(props) {
  return (
    <div>
      <h2>안녕하세요, {props.name}!</h2>
      <p>당신의 나이는 {props.age}살입니다.</p>
    </div>
  );
}

export default ChildComponent;

 

• props.name: 부모 컴포넌트로부터 전달된 이름 데이터.
• props.age: 부모 컴포넌트로부터 전달된 나이 데이터.

3. Destructuring을 사용한 Props 사용

더 간결한 코드를 위해 구조 분해 할당을 사용하여 props를 처리할 수 있습니다.

 

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

function ChildComponent({ name, age }) {
  return (
    <div>
      <h2>안녕하세요, {name}!</h2>
      <p>당신의 나이는 {age}살입니다.</p>
    </div>
  );
}

export default ChildComponent;

 

4. Props의 기본값 설정 (defaultProps)

props가 부모 컴포넌트에서 전달되지 않을 때 기본값을 설정하고 싶다면 defaultProps를 사용합니다.

 

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

function ChildComponent({ name, age }) {
  return (
    <div>
      <h2>안녕하세요, {name}!</h2>
      <p>당신의 나이는 {age}살입니다.</p>
    </div>
  );
}

// 기본값 설정
ChildComponent.defaultProps = {
  name: '기본 이름',
  age: 0,
};

export default ChildComponent;

 

5. Props 타입 검사 (PropTypes 사용)

React에서는 props의 타입을 검사하여 예기치 않은 오류를 예방할 수 있습니다. 이를 위해 PropTypes 라이브러리를 사용합니다

 

// ChildComponent.js
import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent({ name, age }) {
  return (
    <div>
      <h2>안녕하세요, {name}!</h2>
      <p>당신의 나이는 {age}살입니다.</p>
    </div>
  );
}

// PropTypes 설정
ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,  // name은 문자열이며 필수값입니다.
  age: PropTypes.number,              // age는 숫자형입니다.
};

export default ChildComponent;

 

PropTypes 설치:

npm install prop-types

 

6. 자주 발생하는 문제: Prop Drilling

프로젝트가 커질수록 부모에서 자식으로 props를 여러 단계에 걸쳐 전달해야 하는 상황이 발생합니다. 이를 Prop Drilling 문제라고 하며, 이 문제를 해결하기 위해 Context API나 Redux와 같은 상태 관리 도구를 사용할 수 있습니다.

 

7. 마무리

React에서 props는 컴포넌트 간에 데이터를 전달하는 매우 중요한 개념입니다. 위에서 소개한 props의 기본 사용법과 고급 기능을 잘 활용하면 효율적이고 재사용 가능한 컴포넌트를 만들 수 있습니다.

 

요약

1. props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달할 때 사용합니다.
2. 구조 분해 할당으로 코드를 더 간결하게 만들 수 있습니다.
3. defaultProps로 props의 기본값을 설정할 수 있습니다.
4. PropTypes로 props의 타입을 검사하여 예기치 않은 오류를 방지합니다.