Hook (2) 썸네일형 리스트형 [Epic React] async 훅 사용 시 하나의 state를 사용하는 이유 state / loading / error 각각 다른 상태로 만들 경우. 데이터를 세팅하고 상태를 업데이트 하는 순서를 지키지 않으면 오류가 발생한다. (상태는 바뀌었으나 데이터가 없으면 오류 발생) // useEffect hooks... React.useEffect(() => { if (!pokemonName) { return } setStatus('pending') fetchPokemon(pokemonName).then( pokemon => { setPokemon(pokemon) setStatus('resolved') }, error => { setError(error) setStatus('rejected') }, ) }, [pokemonName]) // ... jsx part if (status =.. useEffect는 라이프사이클 훅이 아니다. Myths about useEffect | Epic React by Kent C. Dodds Myths about useEffect Some common mistakes I see people make with useEffect and how to avoid them. epicreact.dev TLDR : useEffect는 deps의 상태들과 사이드이펙트를 동기화하기 위한 훅이다. 처음에 리액트를 학습하면 클래스 컴포넌트와 라이프사이클에 대해 배운다. 라이프사이클 함수는 보통 내 코드를 다른사람의 코드 안에 끼워넣는 방법이다. 해당 정보를 의식하고 클래스 컴포넌트처럼 코딩하면 아래처럼 된다. function DogInfo({dogId}) { const controllerRef = React.useRef.. 이전 1 다음
