React 컴포넌트에서 props의 기본값을 설정하는 방법: defaultProps

기본값을 설정하는 이유와 방법을 이해하기 위한 글로, 기본값을 설정해주면 컴포넌트를 더 안전하게 사용할 수 있고 에러를 예방할 수 있다고 한다.

 

 

1. 기본개념: `props`란 무엇인가?

React에서 `props`는 컴포넌트에 데이터를 전달할 때 사용하는 객체이다. 컴포넌트는 부모 컴포넌트로부터 `props`를 받아 자식 컴포넌트가 그 데이터를 화면에 표시하거나 동작을 처리하게 된다. 예를 들어, `Button` 컴포넌트(자식 컴포넌트)에 `color`라는 `props`가 전달되면 그 값을 이용해서 버튼의 색상을 정할 수 있다.

<Button color="blue" text="Click me" />

 

위 코드를 보면, `color="blue"`로 버튼의 색상이 설정된다.

 

 

2. `props`에 기본값을 설정해야 하는 이유

만약 `Button` 컴포넌트에 `color`를 전달하지 않는다면 어떻게 될까?

<Button text="Click me" />

 

• 위와  같은 상황에서는 `color`가 전달되지 않았기 때문에 `props.color`는 `undefined`가 된다. 
  이때 `props.color`에 대한 연산을 하면 오류가 발생할 수 있다.
• `props.color`가 전달되지 않은 상태에서 `props.color.toUpperCase()` 같은 메서드를 호출하면 오류가 발생한다.
  왜냐하면 `undefined` 타입은 해당 메서드를 지원하지 않기 때문이다.
• 다른 말로, `undefined`는 문자열이 아니기 때문에, 문자열에서 사용하는 메서드인 `toUpperCase()` 메서드를 사용할 수 없어 오류가 발생한다.

 

 

3. `defaultProps`로 기본값 설정

이 문제를 해결하기 위해 기본값을 설정할 수 있다. 기본값이란, `color` 같은 특정 `props`가 전달되지 않았을 때 자동으로 사용할 값을 말한다. 예를 들어, `Button` 컴포넌트가 `color`를 받지 못하면 기본적으로 검정색(black)을 사용하도록 만들 수 있다.

 

`defaultProps`는 바로 이런 값을 설정하는 기능이다. 만약 `props.color`가 없다면, 자동으로 `"black"`이라는 값을 사용하게 되는 것이다.

Button.defaultProps = {
  color: "black",  // 기본값 설정
};

 

이렇게 하면 `color`가 없을 때도 오류 없이 안전하게 컴포넌트를 사용할 수 있다.

 

 

4. 예시 코드 설명

이제 다시 코드를 보면

const Button = (props) => {
  console.log(props);
  return (
    <button style={{ color: props.color }}>
      {props.text} - {props.color}
    </button>
  );
};

Button.defaultProps = {
  color: "black",
};

export default Button;

• `props` 사용: `Button` 컴포넌트는 `props.color`와 `props.text`를 받아서 화면에 표시한다. `props.color`는 버튼의 텍스트 색상을 정해주고, `props.text`는 버튼에 표시될 텍스트이다.
• 기본값 설정: `Button.defaultProps = { color: "black" };`는 만약 `color`를 전달하지 않으면 자동으로 `"black"`을 사용하라는 의미이다.
• 결과: `color`를 전달하지 않은 경우에도 버튼의 색상은 검정으로 설정된다.

 

 

5. `defaultProps`가 없을 경우의 문제 재정리

만약 기본값을 설정하지 않고, `props.color`에 어떤 값도 전달하지 않았다면 `props.color`는 `undefined`가 된다. 그리고 `props.color`가 undefined 상태에서 `toUpperCase()` 같은 메서드를 호출하면 오류가 발생한다.

따라서, defaultProps를 통해 `props`의 기본값을 설정해두면, 이런 문제르 인한 오류를 방지하고 안전하게 코드를 실행할 수 있다.