React에서 props의 기본 구조와 타입 검사

 

React는 컴포넌트 기반 라이브러리로, 컴포넌트 간 데이터를 전달하는 데 props(properties)를 사용합니다. props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터이며, React 애플리케이션의 재사용성과 유지보수를 높이는 핵심 요소입니다. 이번 글에서는 React에서 props의 기본 구조를 이해하고, props의 타입을 검사하여 버그를 방지하는 방법에 대해 자세히 알아보겠습니다.

---

1. React에서 props의 기본 구조

React의 props는 자바스크립트 객체 형태로 전달됩니다. 이를 통해 컴포넌트는 동적으로 데이터를 받아 UI를 구성할 수 있습니다.

1-1. Props의 기본 사용법

React 컴포넌트는 기본적으로 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다. 두 방식 모두 props를 사용할 수 있습니다.

// 함수형 컴포넌트에서의 props 사용
function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

// 사용 예
<Welcome name="홍길동" />;

// 클래스형 컴포넌트에서의 props 사용
class Welcome extends React.Component {
  render() {
    return <h1>안녕하세요, {this.props.name}님!</h1>;
  }
}

// 사용 예
<Welcome name="홍길동" />;

1-2. Props의 특징

1. 읽기 전용
   • props는 자식 컴포넌트에서 수정할 수 없습니다. 부모 컴포넌트에서만 설정 가능합니다.
   • 상태 관리가 필요하다면 state를 사용해야 합니다.
2. 데이터 전달
   • props는 단일 값, 객체, 배열, 함수 등 다양한 데이터 유형을 전달할 수 있습니다.

---

2. React에서 Props의 타입 검사

컴포넌트가 받을 props의 타입과 필요 여부를 명확히 정의하면, 애플리케이션의 안정성을 높이고 디버깅 시간을 줄일 수 있습니다. React는 이를 위해 PropTypes와 TypeScript와 같은 방법을 제공합니다.

2-1. PropTypes를 사용한 타입 검사

React는 prop-types 라이브러리를 통해 컴포넌트의 props를 검사할 수 있습니다. 이를 사용하면 개발 중 잘못된 props 전달을 방지할 수 있습니다.

npm install prop-types

import PropTypes from 'prop-types';

function UserProfile({ name, age, isAdmin }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>나이: {age}</p>
      {isAdmin && <p>관리자 계정</p>}
    </div>
  );
}

// PropTypes 설정
UserProfile.propTypes = {
  name: PropTypes.string.isRequired, // 필수 문자열
  age: PropTypes.number,            // 선택 숫자
  isAdmin: PropTypes.bool,          // 선택 불리언
};

// 사용 예
<UserProfile name="홍길동" age={30} isAdmin={true} />;

PropTypes 주요 유형

• PropTypes.string: 문자열
• PropTypes.number: 숫자
• PropTypes.bool: 불리언
• PropTypes.array: 배열
• PropTypes.object: 객체
• PropTypes.func: 함수
• PropTypes.node: React 노드
• PropTypes.element: React 엘리먼트

---

2-2. TypeScript를 활용한 타입 검사

TypeScript는 정적 타입 검사를 제공하여 더 강력하고 안전한 코드 작성을 돕습니다.

type UserProfileProps = {
  name: string;
  age?: number; // 선택적 프로퍼티
  isAdmin?: boolean;
};

const UserProfile: React.FC<UserProfileProps> = ({ name, age, isAdmin }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>나이: {age}</p>
      {isAdmin && <p>관리자 계정</p>}
    </div>
  );
};

// 사용 예
<UserProfile name="홍길동" age={30} isAdmin />;

---

3. Props와 Default Props

React 컴포넌트에서 특정 props를 전달하지 않았을 경우 기본값을 설정하려면 defaultProps를 사용할 수 있습니다.

3-1. defaultProps의 사용 예

function Greeting({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

Greeting.defaultProps = {
  name: '손님',
};

// 사용 예
<Greeting />; // "안녕하세요, 손님님!" 출력

TypeScript에서 기본값 설정

TypeScript에서는 기본값을 함수 파라미터에서 설정할 수 있습니다.

type GreetingProps = {
  name?: string;
};

const Greeting: React.FC<GreetingProps> = ({ name = '손님' }) => {
  return <h1>안녕하세요, {name}님!</h1>;
};

// 사용 예
<Greeting />;

---

4. 실제 예제: ToDo 리스트 컴포넌트

아래는 props를 활용해 동적인 데이터를 렌더링하고 PropTypes로 타입을 검사하는 예제입니다.

import PropTypes from 'prop-types';

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

TodoList.propTypes = {
  todos: PropTypes.arrayOf(PropTypes.string).isRequired, // 필수 문자열 배열
};

// 사용 예
<TodoList todos={['리액트 배우기', '코드 작성하기', '블로그 작성하기']} />;

---

결론

React의 props는 컴포넌트 간 데이터를 전달하는 중요한 메커니즘으로, 이를 올바르게 이해하고 활용하면 유지보수성과 확장성을 크게 높일 수 있습니다. 특히 PropTypes와 TypeScript를 사용하면 타입을 명확히 정의하여 버그를 사전에 방지할 수 있습니다. 이제 실제 프로젝트에서 props를 더욱 적극적으로 활용해 보세요!