React에서 defaultProps 사용법

 

React 컴포넌트는 기본값을 설정하여 예상치 못한 상황에서도 안정적으로 동작하도록 만들 수 있습니다. defaultProps는 클래스형 및 함수형 컴포넌트 모두에서 기본 props 값을 설정하는 데 사용됩니다. 이 글에서는 defaultProps의 사용법과 함께 최신 React 환경에서의 대안도 살펴보겠습니다.

1. defaultProps란 무엇인가?

defaultProps는 컴포넌트가 특정 props를 전달받지 않았을 때 사용할 기본값을 정의하는 속성입니다. 이를 통해 컴포넌트의 props가 항상 유효한 값을 가지도록 보장할 수 있습니다.

2. 클래스형 컴포넌트에서 defaultProps 사용하기

클래스형 컴포넌트에서는 defaultProps를 컴포넌트 클래스의 정적 속성으로 정의합니다.

사용 예시

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, {name}!</h1>;
  }
}

Greeting.defaultProps = {
  name: 'Guest',
};

export default Greeting;

동작 원리

• Greeting 컴포넌트에 name props가 전달되지 않을 경우, defaultProps에 정의된 값 Guest가 사용됩니다.
• 이로 인해 Hello, Guest!가 렌더링됩니다.

3. 함수형 컴포넌트에서 defaultProps 사용하기

함수형 컴포넌트에서도 defaultProps를 동일하게 사용할 수 있습니다.

사용 예시

import React from 'react';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Greeting.defaultProps = {
  name: 'Guest',
};

export default Greeting;

4. 최신 React 환경에서의 대안: 기본값 매개변수

React 16.8부터 함수형 컴포넌트에서 defaultProps 대신 JavaScript의 기본값 매개변수를 사용할 수 있습니다. 기본값 매개변수는 더욱 간결하며 최신 React 개발자들 사이에서 선호됩니다.

사용 예시

import React from 'react';

const Greeting = ({ name = 'Guest' }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

장점

• 문법이 간단하고 직관적입니다.
• 컴포넌트 정의 시 기본값을 바로 설정할 수 있습니다.
• defaultProps보다 최신 JavaScript 문법을 활용하므로 더 현대적인 코드를 작성할 수 있습니다.

5. 클래스형 컴포넌트에서의 대안

클래스형 컴포넌트는 defaultProps 외에 constructor에서 기본값을 설정하거나, render 메서드에서 props를 처리하는 방식으로 대체할 수 있습니다.

Constructor에서 기본값 설정하기

import React, { Component } from 'react';

class Greeting extends Component {
  constructor(props) {
    super(props);
    this.defaultName = 'Guest';
  }

  render() {
    const { name } = this.props;
    return <h1>Hello, {name || this.defaultName}!</h1>;
  }
}

export default Greeting;

6. 주의할 점

• defaultProps는 null이나 undefined에만 기본값을 적용합니다. false, 0, 빈 문자열('') 등은 기본값으로 대체되지 않습니다.

예시

import React from 'react';

const Example = ({ value = 'Default' }) => {
  return <p>{value}</p>;
};

// 사용 예
<Example value={null} />  // 'Default' 출력
<Example value={0} />     // '0' 출력

7. 결론

React에서 defaultProps는 컴포넌트의 기본값을 설정하는 간단하고 효과적인 방법입니다. 하지만 함수형 컴포넌트에서는 JavaScript 기본값 매개변수를 사용하는 것이 더 간결하고 최신 트렌드에 부합합니다. 프로젝트의 요구 사항과 팀의 코드 스타일에 따라 적절한 방법을 선택하세요.