2022/06/16 (2) 썸네일형 리스트형 useState의 함정 : useEffect와 사용 시 주의할 점. useState를 너무 많이 사용하지 않기 단일 진실 원천 - 파생된 상태를 저장하기 위한 상태 피하기 상태란 무엇인가요? 공식문서에 따르면 각 데이터 조각에 대해 세 가지 질문을 합니다. 1) props를 통해 부모로부터 전달됩니까? 그렇다면 아마도 상태가 아닐 것입니다. 2) 시간이 지나도 변함없나요? 그렇다면 아마도 상태가 아닐 것입니다. 3) 컴포넌트의 다른 상태 또는 prop을 기반으로 계산할 수 있습니까? 그렇다면 상태가 아닙니다. 3번 케이스에서 주의할 점 : 비동기 데이터를 이용한 파생 상태를 state에 저장하지 않습니다. useEffect는 상태를 React 외부의 요소(서버, 브라우저 스토리지 등)와 동기화 하는 경우에만 사용합니다. import { fetchData } from '.. useState와 useReducer의 사용사례 TL;DR: useState : 간단한 상태. 상태가 같이 업데이트 되야 하는지를 고려하여 묶고 분리한다. useReducer : 서버 상태와 섞여있는 경우, 로직 구현 시 상태 간 종속성이 필요한 경우. 복잡한 로직. 어떤 상태가 함께 속하는지(업데이트 되어야 하는지) 추론할 수 있는 방식으로 코드를 구조화하면 성능 문제와 상관없이 장기적으로 가독성과 유지 보수에 도움이 됩니다. 별도의 useState 상태가 독립적으로 업데이트되는 경우 ex) 성과 이름 // asis state = { firstName: '', lastName: '', } // tobe const [firstName, setFirstName] = React.useState('') const [lastName, setLastName] .. 이전 1 다음
