[React] props

props

Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다.

 

Btn으로부터 저장받는 인자를 props라고 한다. 

Btn({text:"Save Changes"})와 같은 표현이다. 

이 사진과 같이 리액트는 모든 props들을 오브젝트 안에 집어넣고 오브젝트는 컴포넌트의

첫번째 인자로 주어진다. props는 첫번째 유일한 인자이다! 

 

즉, props는 우리가 넣은 모든 것이 오브젝트가 된다. 

 

props 객체 에 들어가는 property를 하나 더 추가해보려한다. big라는 property를 두어

big가 true면 폰트사이즈를 18로, big가 false이면 폰트사이즈를 16으로 두려한다.

이때 중요한건 true,false도 bool타입이라 js문법이 들어가기 때문에 중괄호를 꼭 써줘야한다.

 

 

헷갈릴 수도 있는 props와 event listener

onClick이라는 이벤트 리스너를

html요소에 넣으면 onClick은 이벤트 리스너가 되지만

 

직접 만든 컴포넌트인 Btn에 onClick 속성을 넣어주면 이건 이벤트 리스너가 아닌 props가 된다. 

그렇기에 컴포넌트에 onClick을 달아준다면 아무런 효과가 나타나지 않을 것이고 직접 Btn 컴포넌트로 가서

onClick 이벤트 리스너를 달아줘야 한다. 

 

우선 onClick으로 props이름을 지어주니 좀 헷갈려서 이걸 changeValue로 바꿔보겠다! 

Btn  컴포넌트에 changeValue props를 달아주고 

 

Btn에서 changeValue를 props를 받은 다음 onClick 이벤트 리스너에서 onClick이 발생했을 때 props로 받아온 changeValue함수를 호출한다.

 

 

그래서 부모 컴포넌트인 App 컴포넌트에 상태가 변화하면 빨간펜으로 표시해놓은 return 부분이 새롭게 다시 그려지게 된다! 

 

근데 여기서 잘 보면 첫번째 Btn 컴포넌트는 value가 변하기 때문에 다시 그려질 필요가 있어보이지만 두번째 Btn 컴포넌트는 변하는 값이 없는데 다시 그려져야 할 이유가 있을 까 싶다. 이럴때 쓰는게 React  Memo 이다!

 

Memo

 

React.memo를 통해 memo라는 기능을 사용하는데

 

 

이렇게 MemorizedBtn 을 컴포넌트로 사용해주면 text를 "Continue"로 갖고 있는 컴포넌트는 버튼을 클릭해도 다시 그려지지 않을 수 있다! 

 

정리 : React memo는 state가 변경되었을 때만 컴포넌트들을 그리도록 한다. 변경 사항이 없으면 다시 그려지지 않는다.

++) continue버튼은 state가 뭐 바뀐게 없기 때문에 다시 그려지지 않는다. 

prop types

 

아래쪽 Btn은 prop types가 완전히 틀렸는데 이런 경우에는 에러가 뜬다.

만약 작업량이 많아지면 실수를 할 수 있게 되는데 이런 props 들의 type이 제대로

들어왔는지 확인하는 방법이 있다.

바로 prop types 패키지를 사용하는 건데

이렇게 지정하면 prop type이 잘못 들어왔을 때 최소한의 경고창이라도 띄어준다. 

prop type이 안되면 나중에 cra 설치 후 터미널에서 npm i prop-types 명령어를 입력해주면 설치된다!