useEffect

useEffect로 state 변경 바로 감지하기

이전 글에서 함수가 끝날 때까지 state의 값은 변하지 않는다는 것을 배웠다. 그렇다면 한 함수 안에서 state를 변경하고, 그 값을 바로 사용해야 한다면 어떻게 해야 할까? 내가 고민한 코드는 아래 코드였다. const handleBlur = useCallback( (e, i) => { let updated = [...edited]; if (e.target.innerText === text[i]) { updated[i] = null; } else if (e.target.innerText.trim() === "") { updated[i] = "-"; } else { updated[i] = e.target.innerText; } setEdited(updated); // patchUserSymbol();..

React Hooks useEffect

프로젝트 진행 중 모달 창에서 선택된 탭의 ID에 따라 부모 페이지로 다른 데이터를 전달해야 했다. useEffect에 대한 정확한 이해 없이 사용했더니 항상 고정된 값이 전달되거나(dependency를 설정하지 않았기 때문) 다른 모달을 선택해도 이전의 값이 전달(useEffect를 이용한 초기화를 하지 않음)되는 등의 문제가 생겼다. 이 기회에 정확하게 정리하고 넘어가려고 한다. React Hooks에서 useState와 더불어 가장 많이 사용하는 useEffect다. useEffect는 렌더링이나 특정 값이 달라지는 이벤트가 발생하면 그것을 인지하고 업데이트 해주는 함수다. 앞서 설명했듯이 useEffect는 크게 다음과 같은 조건에 의해 작동한다. 페이지가 처음 렌더링 됐을 때 (렌더링 시 무조건..