useEffect (3) 썸네일형 리스트형 [3분 리액트] ref prop의 콜백 타입을 사용해 useEffect 사용 대체하기 원문 : https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs Avoiding useEffect with callback refs Interacting with DOM nodes doesn't necessarily need useEffect tkdodo.eu 8월 14일에 올라온 글인데 누가 velog에 번역해서 올려뒀네요... 한국사람들 진짜 공부 열심히 하는것 같습니다. TLDR DOM 노드가 렌더링된 후 직접 상호 작용해야 하는 경우, useRef + useEffect 대신 ref 프롭의 콜백 형태 사용을 고려해보세요. type Ref = RefCallback | RefObject | null 모든 ref 프롭은 함수다.(onAfterRend.. [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 다음
