104%

useEffect완벽가이드 2편 읽고오기 지난 포스팅에서는 useEffect에서 의존성배열에 올바른 변수를 명시해주지 않으면 어떤 문제가 발생하는지 살펴봤습니다. 이번 포스팅에서는 useEffect에 올바르게 의존성을 명시하는 방법에 대해서 살펴보겠습니다. useState의 함수형 업데이트 사용하기 useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); 이런식으로 코드를 작성할 경우 매 렌더링 마다 타이머가 초기화되고 다시 세팅되는 과정이 반복되어 비효율적이라고 말했었습니다. 이 코드를 아래와 같이 변경해봅시다. useEffect(() =..

useEffect 완벽 가이드 - 1편 읽고 오기 이제 우리는 함수형 컴포넌트 내부 함수에서 state, props를 참조할때 이전 값을 가져오는 현상이 발생하는 원인에 대해서 알게 되었습니다. 그럼 이제 최신 상태의 state와 props를 가져오기 위해서는 어떻게 해야하는지에 대해서 알아봅시다. useRef 사용하기 useRef를 공부해보신분은 알겠지만 함수형 컴포넌트 내부에서 useRef를 마치 지역변수처럼 사용할 수 있습니다. 이 useRef를 사용하면 과거의 렌더링 시점에 갇혀있는 함수가 미래의 값을 참조하게 만들 수 있습니다. 이렇게 하는게 "가능 하긴 하지만" state와 props에 맞춰 ui를 보여주는 리액트의 패러다임을 벗어나는 느낌이 있어서 깨끗한 느낌이 들진 않습니다. 어쨌든 use..

프로젝트를 진행하면서 useEffect를 사용할때 가끔씩 이상하게 동작할때가 많았습니다. useEffect에서 리덕스 스토어의 값을 참조할때 예전값을 가져오는등의 현상이 발생해서 훅스를 제대로 이해하지 못하고 사용하는것 같아 이번 기회에 정리해보려고 합니다. 훅스를 쉽게 이해하기 위해 컴포넌트 라이프사이클 개념을 가져다 쓰다보니, 자꾸 엇나가는 부분이 생긴것같습니다. 훅스를 제대로 이해하기 위해서는 라이프 사이클을 잊으라고 말합니다. 렌더링 마다 고유한 Props와 State가 있다. function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click m..