[CS]useRef, useEffect

useRef

useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다.

useRef는 언제 사용하는가?

1. 특정 DOM 선택하기
   리액트에서는 DOM 을 선택할 때 ref 를 사용합니다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용합니다.

2. 컴포넌트 안의 변수 만들기
   useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있습니다.

   이 변수를 사용하여 다음과 같은 값을 관리할 수 있습니다.
   - setTimeout, setInterval 을 통해서 만들어진 id
   - 외부 라이브러리를 사용하여 생성된 인스턴스
   - scroll 위치

3. 리렌더링 방지
   컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 됩니다. 심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 됩니다.

   useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않으므로 리렌더링 방지에 활용할 수 있습니다.
   

useEffect

useEffect란 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook으로 컴포넌트가 마운트, 언마운트, 업데이트 됐을 떄 특정 작업을 수행할 수 있습니다.

useEffect의 실행 순서는?

하위에 있는 컴포넌트 먼저 실행됩니다. useEffect는 컴포넌트가 렌더링이 된 후에 실행됩니다. 따라서 App이 render되기 위해서는 OuterBox가 먼저 렌더링이 되어야 되고, OuterBox가 완전히 렌더링 되기 위해서는 InnerBox가 렌더링이 되어야하기 때문에 하위 컴포넌트가 먼저 실행됩니다.