배운점
- 상태를 위로 올려보내는 것이 개발이 훨씬 편리하다. 단, 과도한 리렌더링이 발생한다면 상태 함께 두기를 통해 하위 컴포넌트로 이관할 수 있다. 이를 판단하는 것도 개발자의 역량이다.
- 부모 컴포넌트에서 커스텀 훅을 사용하면서 상태를 변경하면
부모 컴포넌트 및 자식 컴포넌트들이 모두 리렌더링 된다.
- 부모 컴포넌트와 자식 컴포넌트에 모두 동일한 커스텀 훅을 사용한다면, 두 개의 커스텀 훅은 별개의 커스텀 훅이다.
- props로 객체를 전달한 값은 리렌더링이 발생할 때마다 새로운 값이 된다. useMemo를 사용하든지, 값의 변화를 나타내는 불리언 값을 만들어라
- useEffect 시에 무한 루프에 빠지는 것을 주의하라 useEffect(() => { setValue('무한 루프'); }, [ value ]);
- useEffect 시에 값의 변동이 서로 영향을 미치는 것을 경계하라
- defaultValue로 값을 넣어주면
마운트 시에만 적용될 뿐, 초기값을 다시 동적으로 바꿀 수 없다.
useState를 사용할 수 있다.
- 데이터의 변경 사항이 제대로 반영되고 있는지 확인하라. useEffect를 통해 해당 값을 추적하여 반영해줄 수 있다.
- 디바운스를 통해, 사용자의 입력이 끝날 때에만 이벤트를 트리거하기
- 상태를 직접 수정하지 마라. 가능한 불변성을 보장하라.
- useRef는 리렌더링과 무관하다.
그러므로 useEffect에서 사용할 때 언제나 최신값이다.
반면에 useState는 그렇지 않다. 이를 주의하라.
- 불필요한 속성을 서버에 보내도 오류가 발생하지 않았다.
이는 상황에 따라 다르다.
확인이 필요하다.
- 객체 템플릿에서 프로퍼티 네임으로
아래와 같이 계산된 프로퍼티를 사용할 수 있다.
submitData.current = {
[key]: value,
};