React 리펙토링 중에 만난 defaultProps 경고 에러

회사에서 받은 코드를 리펙토링 하기 위해 뜯다가 콘솔 창에서 생소한 경고를 마주쳤다. 

 

Warning: MyComponent: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

 

 

💡defaultProps가 무엇이고, 관련 에러는 왜 발생할까?

기존까지 defaultProps는 React 컴포넌트, 특히 클래스형 컴포넌트에서 props의 기본값을 설정하는 방법이었다. 그러나 React 17 이후로 함수형 컴포넌트가 보편화되면서 더 이상 defaultProps가 권장되지 않았고, 대신 ES6의 기본 매개변수 방식을 사용하는 것이 표준이 되었다.

따라서 해당 기능은 더 이상 사용하지 않을 것이라고 경고 에러가 뜨는 것이다.

 

.... 정리하자면 옛날 코드에서 쓰던 거니까 그거 이제 그만 쓰라는 경고 메세지이다. 미래에는 아예 사용이 불가능해질 수도 있으니 빠르게 리펙토링이 되어야 하는 부분이다. 사실 기능 구현만 급하게 짠 뒤 받은 코드라 전체적으로 함수형 컴포넌트를 사용하고 있음에도 이런 에러까지는 체크하지 못한 것 같다. 하필 메인 페이지에서 뜨는 게 거슬려, 마침 다른 hotfix 처리하는 김에 에러도 빨리 해결해서 합치기로 했다.

 

 

📍해결 방법 : 기본 매개변수 넣어주기

defaultProps 에러를 해결하는 방법은 간단하다. 

아래 예시와 같이 기본 매개변수(default parameters)를 사용해주면 된다.

// 기존까지는 이렇게 사용되었다.
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

MyComponent.defaultProps = {
  name: 'Guest',
  age: 25,
};


<MyComponent />  // Name: Guest, Age: 25
<MyComponent name="Alice" />  // Name: Alice, Age: 25

 

//기본 매개변수를 사용하면 훨씬 깔끔하다.
const MyComponent = ({ name = "Guest", age = 25 }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

 

관련 코드만 검색해서 전부 기본 매개변수로 바꿨더니 에러가 사라졌다.

이전보다 개선된 코드로 바뀐 것 같다.