useEffect
-
[React] useEffect : 오용을 경계하자Front-End/React 2024. 9. 29. 15:46
🍀목차글의 목적useEffect 문서 읽어보기(Event vs Effect)1 - Effect는 동기화에만 사용하자2 - Effect의 생명주기는 컴포넌트의 생명주기와 다르다3 - 데이터 페칭 목적으로 사용 시 주의하자 글의 목적 React로 함수 컴포넌트를 만들다 보면 자연스럽게 React Hooks들을 사용하게 된다. 그중에서도 useEffect는 컴포넌트 렌더링 후 특정 작업을 수행하거나 외부 시스템과 컴포넌트를 동기화할 때 유용한 Hook이다. 그리고 오용을 주의해야 하는 Hook이기도 하다. - Effect로 인해 무한루프에 빠질 때도- 의존성 배열에 경고가 뜰 때도- 혹은 useEffect 자체의 목적을 잊어버리는 경우도 있는데이번 글은 useEffect의 목적과 대표적인 주의점에 대해 ..
-
[React] useState : console.log에 이전 state가 출력되는 이유?Front-End/React 2024. 9. 14. 07:09
🍀목차글의 목적useState 문서 읽어보기state 업데이트 큐flushSyncuseEffect 글의 목적 React로 함수 컴포넌트를 만들다 보면 자연스럽게 React Hooks들을 사용하게 된다. 그중에서도 useState는 컴포넌트에 state 변수를 추가해서 상태 관리와 업데이트를 하게 해 주는 Hook이다. 그런데 state 업데이트 후 바로 console.log를 사용해 출력해 보면 이전 상태값이 출력된다.이유가 무엇일까? useState 작업이 비동기이기 때문에? 더 자세히 설명할 수는 없을까?많이 사용함에도 이처럼 설명을 못하는 부분이 있어 글을 작성하게 되었다. 이번 글은 useState를 사용하며 헷갈렸던 state 업데이트에 관해 알아보았다. useState 문서 읽어보기문서 c..
