Custom hooks 및 useRef 복습 !codesandbox[custom-hooks-useref-practice-forked-nydmm7?fontsize=14&hidenavigation=1&theme=dark] 처음 App.js 렌더링 될 때 그 시점에는 previousValue 값이 비어있으므로, 빈 값을 렌더링 하지만 이후 호출된 UsePrevious 내부에서는 current 값이 채워진다. 다음 버튼 클릭시 다시 App.js가 렌더링 되는데 prv~ 에서 이전에 채워진 ref.current 값을 가지고 렌더링 그러나 다른 이유로 버튼 클릭 없이 App.js가 렌더링되면 채워진 값을 다시 가져오므로 둘의 값이 같게된다.

최근 리액트로 개인 프로젝트를 하며 useRef와 useEffect를 활용해 애니메이션을 구현했었는데, 그 과정에서 알게 된 내용을 기존에 알고 있던 내용에 추가하여 정리해 보고자 한다. 일단 리액트의 component life cycle은 이러하다. 컴포넌트 생명 주기 (Component Life Cycle) 1. 마운트 (Mount) 마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미 2. 업데이트 (updatae) 컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우 3. 언마운트 (UnMount) 컴포넌트가 DOM에서 제거되는 것. 호출되는 함수는 하나로 componentWillUnmount 함수. 해당 컴포넌트가 제거되기 직전에 호출됩니다. [참고](https://lktprogrammer.tistor