컴포넌트에 데이터를 보내는 통로
1-1) 부모 컴포넌트로부터 자식 컴포넌트에게 정보 전달
Q) 두 개의 버튼에 (style을 지정한) 하나의 함수를 연결하고 싶다고 하자.
"Save Changes", "Continue" 버튼마다 일일이 함수 만들고 스타일 지정 ㄴㄴ (길어)
하지만 버튼에 적힌 text는 달라야! (공유 X)
A) 부모 컴포넌트( App함수 )로부터 → 자식 컴포넌트( Btn함수 )에게
'인자(props)' 를 통해 정보( 문자열 "Save Changes" "Continue" )를 전송!
↓
↓
↓
① App 함수에서 Btn( )를 호출 → text 인자(=props)를 Btn( )에 전달
② Btn 함수는 전달받은 {모든 정보}를 객체에 담아, 첫번째 인자(=props)로 받아들인다.
③ 전달받은 props를 Btn( ) 컴포넌트 안에서 { prop.text }로 연동.
버튼 컴포넌트는 Btn( ) 하나, 그러나 UI는 다름! "Save Changes", "Continue"
같은 Btn( ) 컴포넌트를 이용하지만, 이 버튼들은 App( ) 컴포넌트에 의해 각각 설정됨!
1-2) 문자열 뿐 아니라, true/false도 props가 될 수 있다
true/false와 if-else문을 이용해, 버튼마다 폰트사이즈를 지정해보자.
1-3) 커스텀 컴포넌트의 prop으로 함수도 전달할 수 있다!
state를 열고, 초기값 "Save Change" 지정.
① "Save Change" 버튼 클릭하면
② onClick(≒ eventListner )이 변화를 감지 & changeValue 함수가 호출된다.
③ changeValue 함수가 실행되면, value가 "Save Change" → "Revert Changes"로 변경됨
④ value가 업데이트 되면, setValue(=modifier) 함수에 의해 전체 화면이 리렌더링 된다.
⑤ "Revert Changes" 버튼
React.memo
"Continue"는 변한 게 없는데, 얘도 같이 리렌더링 될 필요 있나? NO.
→ React.memo 사용해, props가 변경되지 않은 컴포넌트는 다시 리렌더링 되지 않도록 지정!
propTypes 패키지
어떤 타입의 props를 받고 있는지 체크해줌
