Reack: Hooks (useState, useRef, useEffect)

Hooks

함수형 컴포넌트에서도 상태를 관리하기 위해서 hooks를 사용한다.

useState

컴포넌트에서 동적인 값을 상태(state)라고 하는데, 이것을 사용하면 컴포넌트에서 상태를 관리할 수 있다.

 import React, { useState } from 'react';

 const [stageIdx, setStageIdx] = useState<number>(0);
 const [questionIdx, setQuestionIdx] = useState<number>(1);

 setQuestionIdx(questionIdx + 1);
 setStageIdx(questionIdx);

useState를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주면 배열이 반환되는데, 첫번째 원소는 현재 상태, 두번째 원소는 Setter함수이다.
배열 비구조화 할당을 통하여 다음과 같이 사용하지 않고 각 원소를 추출해서 사용한다.

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해준다.

함수형 업데이트

setter 함수를 사용할 때 업데이트 하고 싶은 새로운 값을 파라미터로 넣어줄 수도 있지만 그 대신에 기존 값을 어떻게 업데이트 할지에 대한 함수를 등록하는 방식으로도 값을 업데이트할 수 있다.

const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

이렇게 그 다음 상태를 값을 업데이트 하는 함수로 파라미터에 넣어주며 함수형 업데이트는 주로 컴포넌트를 최적화 하게될 때 사용된다.

useRef

Javascript를 사용할 때 특정 DOM 을 선택해야 하는 상황에 getElementById. querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택하는데, 리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야 하는 상황이 발생하면 ref 라는 것을 사용한다.
함수형 컴포넌트에서 ref를 사용할 때는 useRef라는 Hook 함수를 사용한다. (클래스형 컴포넌트에서는 콜백 함수를 사용하거나, React.createRef 라는 함수를 사용한다.)

const Result: React.FC<RouteComponentProps> = (props) => {
  const element = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (element.current) {
      const { current } = element;
      current.style.transition = `transform 1.2s ease-in`;
      current.style.transform = `translateX(1800px)`;
      setTimeout(() => props.history.push("/result/bali"), 1500);
    }
  }, [props.history]);

  return (
    <MainWrapper>
      <AnimationWrapper ref={element}>
        <LoadingImage                                     		src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQ...."/>
      </AnimationWrapper>
    </MainWrapper>
  );
};

useRef()를 사용하여 Ref 객체를 만들고, 이 객체를 선택하고 싶은 DOM에 ref 값으로 설정해준다. 그러면 Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.
useRef Hook은 DOM을 선택하는 용도 외에도 다른 용도가 한가지 더 있는데, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것이다.
useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않는다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회할 수 있다.
이 변수를 이용하여 setTimeout, setInterval 을 통해서 만들어진 id,

외부 라이브러리를 사용하여 생성된 인스턴스, scroll 위치 등의 값을 관리할 수 있다.

import React, { useRef } from 'react';
import UserList from './UserList';

function App() {
  const users = [
    {
      id: 1,
      username: 'test01',
      email: 'test01@gmail.com'
    },
    {
      id: 2,
      username: 'test02',
      email: 'test02@gmail.com'
    },
    {
      id: 3,
      username: 'test03',
      email: 'test03@gmail.com'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });

    nextId.current += 1;
  };
  return <UserList users={users} />;
}

export default App;

useRef() 를 사용 할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 되며, 이 값을 수정 할때에는 .current 값을 수정하고 조회 할 때에는 .current 를 조회한다.

useEffect

useEffect라는 hook은 컴포넌트가 마운트 되었을 때(처음 나타났을 때), 언마운트 되었을 때(사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 때) 특정 작업을 처리하여 사용할 수 있다.

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

useEffect를 사용할 때에는 첫번쨰 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열(dependency)을 넣는다. 만약 배열을 비우게 되면, 컴포넌트가 처음 나타날때에만 useEffect에 등록한 함수가 호출괸다.
그리고 useEffect에서 함수를 반환할 수 있는데, 이를 cleanup 함수라고 부른다. cleanup 함수는 useEffect에 대한 뒷정리를 해주는데, 배열이 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.
주로 마운트시에는 props 로 받은 값을 컴포넌트의 로컬 상태로 설정, 외부 API 요청청, setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약과 같은 작업을 하고, 언마운트시에는 setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout), 라이브러리 인스턴스 제거를 한다.
dependency에 특정 값을 넣으면 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔때에도 호출이 된다. 그리고 배열 안에 특정값이 있다면 언마운트시에도 호출이 되고 값이 바뀌기 직전에도 호출이 된다.
useEffect안에서 사용하는 상태나 props가 있다면 배열 안에 넣어주어야 한다. 만약 넣지 않는다면 useEffect에 등록한 함수가 실행될 때 최신 props와 상태를 가르키지 않게 된다.
배열을 아예 생략하게 된다면 컴포넌트가 리렌더링 될때마다 호출이 된다.
리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링 되면 바뀐 내용이 없어도 자식 컴포넌트도 리렌더링된다.(실제 DOM 에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당하지만, Virtual DOM 에는 모든걸 다 렌더링하고 있다.)

벨로퍼트와 함께하는 모던 리액트 리액트의 Hooks 완벽 정복하기 About React Hook When to useMemo and useCallback 영어 문서 때늦은 React Hooks 시리즈 4탄 - useCallback/useRef When to useMemo and useCallback 한글 문서



```toc