TIL <defaultProps>

Components.defaultProps

defaultProps 프로퍼티를 할당함으로써 props 의 초기값을 정의할 수 있습니다.

공식문서 : https://ko.reactjs.org/docs/typechecking-with-proptypes.html

---

1. defaultProps 설정

2. props 로 받아와서 사용하기

3. Inputs 컴포넌트에서 props 값(label, placeholder, _onChange) 들을 입력 해준다.

4. 개발자도구 react components 를 살펴보면 prop로 넘겨주는 값들을 확인 할 수 있다.

(콘솔 안찍어도 됨)

 

요거를 자식 컴포넌트에서부터 코드를 작성하다보니

 

이해하는데 엄청난 시간이 걸렸으나 내 나름대로 정리해보면

 

1. 핵심은 props 는 부모가 자식에게 주는 데이터이다.
2. defaultProps로 받을 데이터들에 대해서 초기값을 설정을 하고 Props 로 받을 준비를 한다.
3. 자식 컴포넌트에서 Props로 받을 데이터들을 어디에다가 기입할지 {} 써준다. (당연한 말)
4. 부모는 자식에게 줄 데이터 속성(프로퍼티)들을 작성한다.
5. 자식은 그 데이터를 받아서 출력한다.

 

똑같은 모양의 컴포넌트들을 여러개 생성하고 그 안의 값들을 바꿔주며 사용 할 때 용이하다.

예를 들면 아래 사진과 같이 똑같은 버튼이 여러개 있으나 안의 값은 다름, 인풋창도 마찬가지이다.

 

네이버 뉴스도 똑같은 컴포넌트들을 여러개 생성하고 데이터 값만 다른 것을 볼 수 있다.