React defaultProps

리액트에서 제공하는 defaultProps 속성을 통해 props의 기본값을 지정할 수 있다.

Examples.defaultProps = {
  name: "",
  age: 20
};

function Examples({ name, age }) {
  return (
    <Container>
      <User
        name={name}
        age={age}
      />
    </Container>
  );
}

 

함수형 컴포넌트의 경우 자바스크립트의 기본값 매개변수 할당을 통해 props의 기본 값을 지정할 수도 있다.

function Examples({ name = "" , age = 20 }) {
  return (
    <Container>
      <User
        name={name}
        age={age}
      />
    </Container>
  );
}

 

그렇다면 굳이 defaultProps을 사용해야 할 필요가 있을까?

 

관련 내용을 찾아보니 클래스 컴포넌트에선 생명주기 메서드가 서로 다른 스코프를 갖기 때문에 defaultProps를 사용했다고 한다. 함수형 컴포넌트가 대세인 지금은 불필요할지도 모르겠지만 경우에 따라서, 예를 들어 전달하는 props가 많은 경우엔 defaultProps를 사용하는 것이 더 읽기 좋을 수도 있을 것 같다. 

 

하지만 함수형 컴포넌트에선 사용하지 말라는 글, 곧 deprecated 된다는 글이 꽤 많은 걸 보니 클래스 컴포넌트를 작성하는 경우가 아니면 사용하지 않는 것이 좋겠다.

 

참고

Stop using defaultProps

defaultProps에 대한 짧은 고찰