[React] useRef, useEffect

useRef, useEffect

useRef

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

공식 홈페이지의 설명에 따르면 .current 속성이 전달된 인수로(initialValue) 초기화되는 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전체 수명동안 유지된다고 함
이를 풀어서 설명하면 아래와 같음

• useRef는 변경 가능한 객체를 반환함
• 반환 객체는 useRef 인자를 current라는 속성 안에 저장함

const ref = useRef('hihi')
console.log(ref.current) // 'hihi'

// { current: 'hihi' } 이런식으로 반환됨

• 반환 객체는 컴포넌트의 수명이 다하기 전까지 유지된다(언마운트 되기 전까지 유지가 된다는 소리)

또한 useRef로 직접 DOM을 조작할 수 있는데, useRef를 사용하면 Ref의 값이 변해도 리렌더링이 되지 않고, 리렌더링이 되어도 컴포넌트가 언마운트 되기 전까지(컴포넌트의 수명이 다 하기 전까지) Ref의 값이 유지됨

useRef가 사용되는 대표적인 예

• 저장 공간
  state 처럼 값을 저장하는 공간으로 사용할 수 있지만 차이점이 있음

State 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화
Ref 변화 -> 렌더링 X -> 변수들의 값이 유지됨
State 변화 -> 렌더링 -> Ref의 값은 계속 유지됨(컴포넌트 언마운트전까지)

=> 그래서 변경시 렌더링을 발생시키지 말아야하는 값을 다룰 때 사용하면 좋음

• DOM 에 접근
  바닐라 자바스크립트의 document.querySelector() 같이 직접적으로 DOM 요소에 접근할 수 있음
  예를 들면 로그인 페이지에 들어왔을 때 자동으로 아이디를 적는 인풋을 클릭하지 않아도 자동으로 포커스가 가게 한다든지 등의 상황에서 사용됨

useEffect

useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount룰 하나로 통합한 리액트 훅이고, 컴포넌트 렌더링과 관련된 side effect 를 처리하고(데이터 가져오기, 수동 DOM 조작 등), 의존성 배열을 통해서 필요한 상황에서만 실행되도록 관리할 수 있는 훅임

useEffect 훅을 사용하면 리액트 컴포넌트가 화면에 렌더링 된 후 비동기 작업을 처리함.

useEffect(() => {
  console.log('componentDidMount')

  return () => {
    // cleanUp
    console.log('componentWillUnmount')
  }
}, [array dependencies])
// deps에 포함된 state나 props가 변경될 때마다 다시 렌더링 됨(componentDidMount와 componentDidUpdate를 합친 것처럼 동작)
// deps에 빈배열을 넣은 경우 componentDidMount처럼 동작함. 즉, 마운트되고 첫 렌더링이 끝난 직후에만 첫번째 인자인 함수가 실행됨
// 리턴 부분에 쓰인 함수는 클린업 함수로 componentWillUnmount처럼 동작함

useEffect는 사이드 이펙트를 처리하면서 컴포넌트 성능이나 렌더링에는 영향을 끼치지 않도록 도와주는 역할을 하며, 이는 비동기 작업과 컴포넌트 렌더링을 분리하고 최적화를 가능하게 함

사이드 이펙트(부수효과, side effect)란?

리액트 컴포넌트는 함수로 정의되며, 대부분의 리액트 함수는 순수함수처럼 동작함.
즉, 입력(props)을 받으면 예측 가능한 jsx를 return하는 것을 의미함

순수함수는 주어진 입력에 대해 항상 동일한 결과를 리턴하고 외부 상태나 변수에 영향을 주지 않음. 하지만 사이드 이펙트를 가진 함수는 무엇인가를 하기 위해 리액트 컴포넌트 외부와 함께 수행되기 때문에 순수함수와는 달리 외부 상태를 변경하거나, 외부와 상호작용해 수행한 결과가 어떤지 예측할 수 없음

사이드 이펙트는 다음과 같은 것들이 있음

• 백엔드 서버로 api 데이터 요펑
• 브라우저 api와 상호작용(document, window 직접 사용 등 DOM 조작에 관련됨)
• setTimeout, setInterval 등 타이머 관련 함수

---

정리

useRef

• useRef로 직접 DOM을 조작할 수 있음
• useRef는 값이 변해도 리렌더링X, 컴포넌트가 리렌더링이 되어도 컴포넌트가 언마운트 되기 전까지(컴포넌트의 수명이 다 하기 전까지) Ref의 값이 유지됨

useEffect

• componentDidMount, componentDidUpdate, componentWillUnmount룰 하나로 통합한 훅
• 컴포넌트 렌더링과 관련된 side effect 를 처리하고 의존성 배열을 통해서 필요한 상황에서만 실행되도록 관리할 수 있음
• 비동기 작업과 컴포넌트 렌더링을 분리하고 최적화를 가능하게 함