React Hooks

React 에는 4가지의 Built-in Hooks(useState, useEffect, useRef, useReducer) 등이 있다. 이외에도 다양한 커스텀 훅이 존재 하지만 가장 기본적이고 많이 쓰이는 useState와 useEffect 이다.

Hook은 함수 컴포넌트에서 React sTate와 생명주기 기능 (lifecycle features)dmf 연동 할수 있게 해주느 함수이다.

Hook 사용 규칙

1. 최상위(at the top level)에서만 Hook을 호출해야 한다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.

import React, { useState } from "react"

function Hooks(props) {
	if (!props.isExist) {
		const [state, setState] = useState(); // Error!
	}
	const [state2, setState2] = useState(); // Error!
}
// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

2. React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안된다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)

state Hook

useState

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

상태 유지 값과 그 값을 생신하는 함수를 반환한다. 최초로 렌더링 하는 동안, 반한된 state는 첫번 째 전달된 인자 (initialState)의 값고 같다.

setState(newState + 1); // setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);

다음 리렌더링 시에 useState를 통해 반환받은 첫 번째 값은 항상 갱신된 최신 state가 된다.

Effect Hook

useEffect

useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다. React class의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하늬 API로 통합 된 것이다.

useEffect(didUpdate);

useEffect(() => {}, [count])

명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.
useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되게 된다.

기본적으로 동작은 모든 렌더링이 완료된 후에 수행되지만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate(prevProps, prevState) {
		if(prevState.count !== this.state.count){
	    document.title = `You clicked ${this.state.count} times`;
		}
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
		if (isMounted) {
			// 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
	    document.title = `You clicked ${count} times`; // CDM
		}
  }, [count]);

	useEffect(() => {
		setIsMounted(true)
	}, [])

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect (componentDidUpdate)

componentDidUpdate(prevProps, prevState) {
 if (prevState.count !== this.state.count) {
   document.title = `You clicked ${this.state.count} times`;
 }
}

// componentDidUpdate - count 바뀔 때만
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []); // count가 바뀔 때만 effect를 재실행합니다.