React - defaultProps 사용해보기

리엑트에서 상태값 저장하기

리엑트에서는 상태값을 저장하는 2가지의 종류가 있습니다.

State : 컴포넌트 내부에서 선언되는 값입니다. 내부에서 값을 변경할 수 있습니다.

Props : 부모가 자식에게 주는 값입니다. 자식컴포넌트에서는 Props를 받아오기만 하고 직접 수정할 수 없습니다.

defaultProps를 통한 예외처리

실제로 코딩을 하다보면 가끔 실수로 props를 빼먹을 때가 있습니다.

또는 특정 상황에 props를 일부로 비워야 할 때도 있는데요.

이러한 경우에 props의 기본 값을 설정해 줄수 있는데 그것이 바로 defaultProps입니다.

위의 예제는 MyName이라는 컴포넌트를 부모 컴포넌트인 App에서 렌더링 하고 있는 예제입니다.

name이라는 값을 props로 넘겨주고 있는것을 확인 할 수 있습니다.

실제 MyName이라는 컴포넌트는 다음과 같이 되어있습니다.

static으로 defaultProps를 설정하게 되면 부모 컴포넌트에서 props를 넘겨주지 않아도 예외처리가 가능하게 됩니다. ^^

*static 은 javascript es6 class 내부의 정적 변수(또는 메소드)

아래와 같은 방법으로 설정할 수도 있습니다.