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

여러 style을 모두 갖는 단 한 가지의 컴포넌트를 만들어 다른 컴포넌트들이 공유할 수 있다면?

밑의 코드는 불편하고 좋지도 않다.

• 코드

모든 style을 재사용하면서 text만 변경 및 설정할 수 있다면

<aside> 💡 tag 내 syntax를 자식 컴포넌트의 인자(props)로 보내줄 수 있다. 모든 syntax의 값들은 object로 자식 컴포넌트의 첫번째(이자 유일한) 인자로 전달된다.

</aside>

• 코드

props로 state를 보낼 수 있을까

컴포넌트에 들어가는 함수는 이벤트 리스너가 아니라 자식에게 전달되는 Prop이다.

html element에 넣었다면 이벤트 리스너가 되었겠지만 지금은 내가 만들어 준 컴포넌트에 넣어주었으므로 prop이다.

<aside> 💡 prop으로 무언가를 보냈다면, 자동으로 자식 컴포넌트의 return에 들어가지 않으므로 명시적으로 넣어주어야 한다.

</aside>

• 코드

결과적으로 부모의 상태를 바꾸는 modifier를 만들었는데, 그 함수가 자식 컴포넌트에서 실행되는 것이다.

React Memo

이 컴포넌트를 다시 렌더링할지 안할지를 선택할 수 있다.

현재는 버튼을 클릭하면 부모의 state가 바뀌므로 전체가 다시 렌더링된다. 그럼 state를 가지고 있는 자식 컴포넌트만 리렌더링 되면 되는 건데 굳이 다른 컴포넌트는 렌더링을 다시 할 필요가 없음.

prop이 바뀌지 않는 선(state가 바뀌거나)에서 해당 컴포넌트의 리렌더링을 막을 수 있다.