React Hooks

useState

함수형 컴포넌트에서 상태를 관리할 때 쓴다.

const [state, setState] = useState(initialState);

반환된 배열 중 첫번째 원소는 값을 저장하는 state 이며, 두번째 원소는 setter 함수다.

state를 변경할 때에는 반드시 이 setter를 이용해야 렌더링이 정상적으로 이루어진다.

 

useState로 상태 변경 시, 렌더링이 된 후에 업데이트된 state를 조회 가능하다.

즉, useState가 호출된 이후라도 렌더링이 수행되지 않았다면 업데이트 이전의 state가 조회된다.

---

useRef

const refContainer = useRef(initialValue);

initialValue를 설정하면 refContainer.current가 해당 값으로 초기화된다.

 

ref는 크게 두 가지 사용법이 있다.

• 특정 DOM 선택 시 사용
• 컴포넌트 내부 변수

특정 DOM 선택 시 사용

DOM에 ref를 설정해 놓으면 해당 노드가 변경될 때 마다 ref.current의 값을 갱신한다.

function InputSample() {
  ...
    
  // useRef() 로 ref 생성
  const nameInputRef = useRef();

  ...
    
  const onReset = () => {
  // useRef()로 DOM 참조해 focus 설정
    nameInputRef.current.focus();
  };

  return (
    <input
    name="name"
    value={name}
    placeholder="이름"
    onChange={onChange}
    ref={nameInputRef} // DOM에 ref 설정
    />
  );
}

컴포넌트 내부 변수

컴포넌트 내부에서 사용되는 변수를 관리할 수 있다. ref로 관리되는 변수의 특징은 다음과 같다.

• 변수의 값이 바뀌어도 렌더링하지 않는다.
• 업데이트하면 즉시 업데이트된 상태를 조회 가능하다. cf) useState의 state는 렌더 후 업데이트된 상태를 조회 가능

이 변수를 사용하여 다음과 같은 값을 관리 할 수 있다.

• setTimeout, setInterval 을 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• scroll 위치

function Timer() {
  const intervalRef = useRef(); // ref container 생성

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id; // id값 저장
    return () => {
      clearInterval(intervalRef.current);
    };
  });

  // ...
  function handleCancelClick() {
    clearInterval(intervalRef.current); // 저장한 id값을 읽어옴
  }
}

---

useEffect

useEffect(effect, [deps]);

useEffect(
  () => { // effect function
    const subscription = props.source.subscribe();
    return () => { // cleanup function
      subscription.unsubscribe();
    };
  },
  [props.source], // deps
);

effect 함수

이펙트 함수는 렌더링이 완료된 후 실행된다. 기본적으로는 매번 렌더링 될 때 마다 실행되고, deps를 전달해 특정 변수가 변경되었을 때에만 실행되게 할 수 있다. 렌더링과 동시에 이펙트를 실행시키고자 하는 경우에는 useLayoutEffect를 사용한다.

• 리액트: state가 0 일 때의 UI를 보여줘.

• 컴포넌트

  • 여기 랜더링 결과물로 <p>You clicked 0 times</p> 가 있어.
  • 그리고 모든 처리가 끝나고 이 이펙트를 실행하는 것을 잊지 마: () => { document.title = 'You clicked 0 times' }.
• 리액트: 좋아. UI를 업데이트 하겠어. 이봐 브라우저, 나 DOM에 뭘 좀 추가하려고 해.
• 브라우저: 좋아, 화면에 그려줄게.

• 리액트: 좋아 이제 컴포넌트 네가 준 이펙트를 실행할거야.

  • () => { document.title = 'You clicked 0 times' } 를 실행하는 중.
    
    [출처] [번역] useEffect 완벽 가이드

cleanup 함수

이펙트 함수는 cleanup 함수를 리턴할 수 있다. cleanup 함수는 컴포넌트가 언마운트 되거나, 다시 렌더링 될 때 호출된다.

deps 배열 (의존성 배열)

deps 배열에 담긴 변수들의 내용이 변경되면 effect 함수를 실행한다.

• deps가 전달되지 않으면, 렌더링 될 때 마다 effect를 실행한다.
• deps를 빈 배열로 전달하면, 맨 처음 1회만 effect를 실행한다.

deps에는 effect 함수가 참조하는 모든 변수를 적어주어야 한다. (관련 린트도 있다) 그렇지 않으면 effect 함수 내에서 참조하는 값들이 최신 값이라고 보장할 수 없다. 기능을 구현하면서도, 의존성을 속이지 않는 패턴은 A Complete Guide to useEffect([번역] useEffect 완벽 가이드)에 상세히 소개되어 있다. 

---

참조

 

벨로퍼트와 함께하는 모던 리액트

벨로퍼트와 함께하는 모던 리액트 · GitBook

[번역] useEffect 완벽 가이드

[번역] useEffect 완벽 가이드

A Complete Guide to useEffect