- 리액트에서의 데이터 흐름은 크게 2가지로 나눌 수 있음
- 컴포넌트 간의 데이터 전달 → property
- 컴포넌트 내의 데이터 변경 → 상태state
- 배울 것들
- 어떻게 컴포넌트 트리의 아래 방향으로 상태를 전달하는지
- 어떻게 컴포넌트 트리의 윗 방향으로 사용자 상호작용을 보내는지
- stateful context provider를 통해 애플리케이션에서 관심사를 분리하는 방법
Hooks
- 훅이 걸린 데이터가 변경되면 훅이 걸린 컴포넌트에 새 값을 전달 하면서 컴포넌트를 다시 렌더링 함
상태를 한 곳에서 관리하는 방법
- 상태를 컴포넌트 트리에 저장, 자식 컴포넌트들에게 프로퍼티로 전달
- 상태 관리는 최상위에서, 자식 컴포넌트에서의 상태 변화는 프로퍼티로 전달된 콜백함수호출로 최상위에 있는 상태를 변경
제어가 되는 컴포넌트
- useRef를 이용해 DOM에 직접 접근해 값을 바꾸는 컴포넌트는 제어되지 않는 컴포넌트
- 리액트 밖에서 폼에 접근에 폼에 속한 입력 값을 처리하고 싶을 때 사용 가능
- 일반적으로는 제어가 되는 컴포넌트를 사용하는 것이 유지보수가 수월함
- useState를 onChange에 걸어서 폼이 변경될 때마다 setState를 호출, 리렌더링하는 방식으로 제어
- 리액트는 이런 부하를 견디게끔 설계되었지만 이러한 컴포넌트 안에 큰 비요잉 드는 처리를 추가하지 않는 것이 바람직함
감동 코딩