최근 리액트로 개인 프로젝트를 하며 useRef와 useEffect를 활용해 애니메이션을 구현했었는데, 그 과정에서 알게 된 내용을 기존에 알고 있던 내용에 추가하여 정리해 보고자 한다.
일단 리액트의 component life cycle은 이러하다.
컴포넌트 생명 주기 (Component Life Cycle)
1. 마운트 (Mount)
마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미
2. 업데이트 (updatae)
컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우
3. 언마운트 (UnMount)
컴포넌트가 DOM에서 제거되는 것. 호출되는 함수는 하나로 componentWillUnmount 함수. 해당 컴포넌트가 제거되기 직전에 호출됩니다.
useRef
.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
- useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다.
- 값이 변경되더라도 re-render를 발생시키지 않고, re-render 되더라도 값이 유지되는 특징을 가진다.(매번 렌더링을 할 때 동일한 ref 객체를 제공)
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 는 마운트된 텍스트 input 엘리먼트를 가리킨다.
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
useRef() 를 사용하여 Ref 객체를 만들고, 이 객체에 일반 변수 혹은 DOM을 담을 수 있다.
위 예시처럼 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해준다. (<input ref={inputEl}>) 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM (input) 을 가르키게 된다.
-> button을 클릭한 경우에 input 박스에 포커싱이 되도록 DOM에 접근하여 focus() 함수를 실행시켜 구현할 수 있다.
콜백 ref를 사용하여 DOM 노드의 위치나 크기도 측정할 수 있다.
공식문서
주의사항
공식문서에 나와있는 useRef의 적절한 사용 경우는 다음과 같다.
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
- 애니메이션을 직접적으로 실행시킬 때.
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요.
예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen이라는 prop을 넘겨주세요.
useEffect(복습)
첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열을 넣는다.
의존성 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다.
의존성 배열에 특정 값이 있다면, 컴포넌트가 처음 나타날 때, 해당 값이 변화할 때 호출된다.
의존성 배열을 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출된다.
기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 된다useEffect의 cleanup function
A function in the useEffect Hook that allows us to tidy up our code before our component unmounts.
useEffect Hook 안에서 리턴할 수 있는 함수로, 컴포넌트가 언마운트 되기 전에 코드를 청소한다.
- 의존성 배열이 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다.
- 의존성 배열에 특정 값이 있는 경우 언마운트 될 때, 지정한 값이 바뀌기 직전에도 호출이 된다.
function Component() {
useEffect(() => {
console.log('mount 될 때');
return () => {
console.log('unmount 될 때');
};
}, []);