[React] 함수형 컴포넌트의 React hooks

🌈 Hook의 개요

Hook가 React 버전 16.8에 새롭게 추가되었다. Hook를 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.

🔸 Hook를 만들게 된 동기

1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.
2. 복잡한 컴포넌트들은 이해하기 어렵다.
3. Class은 사람과 기계를 혼동시킨다.

• 📌 자세한 내용 참조

🌈 Hook의 규칙

Hook을 사용할 때는 두 가지 규칙을 준수해야 한다.
이러한 규칙을 자동으로 지켜주는 linter 플러그인이 있다.
위 ESLint 플러그인은 create react app에 기본적으로 포함하고 있다.

1. 1. 최상위에서만 Hook을 호출해야 한다.
   반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않는다.
2. 2. 오직 React 함수 내에서 Hook을 호출해야 한다.
   Hook을 일반적인 javascript 함수에서 호출하지 말아야 한다.

🌈 useState

• 가장 기본적인 Hook로 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해 준다.

• useState 함수의 파라미터에는 상태의 기본값을 넣어주는 것으로 초기 렌더링 시에 사용하는 값이다.

• 그 이후의 렌더링 시에는 이 값은 무시된다.

  const [value,setValue] = useState(0);

• useState 함수는 호출되면 배열을 반환하는데 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다.

• setValue 함수는 value를 갱신할 때 사용한다.

  setValue(newValue);

• 클래스 컴포넌트

     class Example extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            value: 0
          };
        }
        render() {
          return (
            <div>
              <p> 카운터 값 {this.state.value} 입니다. </p>
              <button onClick={() => this.setState({ count: this.state.value + 1 })}>+1</button>
              <button onClick={() => this.setState({ count: this.state.value - 1 })}>-1</button>
            </div>
          );
        }
      }

• 함수형 컴포넌트

    const Counter = () => {
      const [value,setValue] = useState(0);
  
      return(
          <div>
              <p> 카운터 값은 <b>{value}</b>입니다. </p>
              <button onClick={() => setValue(value+1)}>+1</button>
              <button onClick={() => setValue(value-1)}>-1</button>
          </div>
      )

• 🔸 state 갱신의 취소
  State Hook을 현재의 state와 동일한 값으로 갱신하는 경우 React는 자식을 렌더링 한다거나 무엇을 실행하는 것을 회피하고 그 처리를 종료한다.(React는 Object.is 비교 알고리즘을 사용한다.)

Object.is()

🌈 useEffect

• useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되게 된다.

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.

• 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태랑 같다.

• useEffect()는 값이 업데이트될 때마다 실행되는데 화면에 맨 처음 렌더링 될 때만 실행하고, 업데이트될 때는 실행되지 않게 하려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 된다.

• 이 배열은 effect가 종속되어 있는 값의 배열이지만, 빈 배열 시에 어떤 값에도 의존하지 않으므로, 다시 실행할 필요가 전혀 없어진다.

    useEffect(() => {
        console.log({ name, nickName })
    },[])

• 특정 값이 업데이트될 때만 실행하고 싶으면 두 번째 파리미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어 주면 된다.

  useEffect(() => {
  console.log(name);
  },[name])

🔸 effect 정리

• 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떤 작업을 수행하고 싶다면 useEffect에서 정리(clean-up) 함수를 반환해 주어야 한다.

• 정리 함수는 메모리 누수 방지를 위해 UI에서 컴포넌트를 제거하기 전에 수행된다.

• 만약 컴포넌트가 여러 번 렌더링 된다면 다음 effect가 수행되기 전에 이전 effect는 정리된다.

    useEffect(() => {
        console.log("effect");
        console.log({
            name, nickName
        })
        return () =>{
            console.log('cleanUp');
            console.log(name);
        }
    },[])

• 정리 함수가 호출될 때는 업데이트되기 직전 값을 보여준다.

🌈 useContext

• 📌 React context 참고

  const value = useContext(MyContext);

• context 객체(React.createContext에서 반환된 값)를 받아 그 context의 현재 값을 반환한다.

• 컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 이 Hook은 그 MyContext.Provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거한다.

• useContext로 전달된 인자는 context 객체 그 자체이어야 한다.

• useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 된다. 만약 컴포넌트를 리렌더링 하는 것에 복잡해진다면, 메모이제이션을 사용하여 최적화할 수 있다.

    const themes = {
      light: {
        foreground: "#000000",
        background: "#eeeeee"
      },
      dark: {
        foreground: "#ffffff",
        background: "#222222"
      }
    };
  
    const ThemeContext = React.createContext(themes.light);
  
    function App() {
      return (
      // Provider로 prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다. (context의 변화를 알린다.)
        <ThemeContext.Provider value={themes.dark}>
          <Toolbar />
        </ThemeContext.Provider>
      );
    }
    function Toolbar(props) {
      return (
        <div>
          <ThemedButton />
        </div>
      );
    }
    function ThemedButton() {
      const theme = useContext(ThemeContext);
      return (
        <button style={{ background: theme.background, color: theme.foreground }}>test</button>
      );
    }

🌈 useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

• useState의 대체 함수로 (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환한다.

• 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다.

• 리듀서 함수에서 새로운 상태를 만들 때는 불변성을 지켜야 한다.

• useReducer는 콜백 대신 dispatch를 전달할 수 있기 때문에 업데이트를 하는 컴포넌트의 성능을 최적화할 수 있다.

    const initialState = {value : 0};
    function reducer(state,action){
      switch (action.type){
          case 'INCREMENT':
              return {value : state.value + 1};
          case 'DECREMENT':
              return {value : state.value - 1};
          default :
          //아무것도 해당되지 않을 때 기존 상태 반환
              return state;
      }
    }
    const Counter = () => {
        // useReducer(리듀서 함수, 초기값)
      const [state, dispatch] = useReducer(reducer,initialState);
      return (
          <div>
              <p>
                  현재 카운터 값은 <b>{state.value}</b>입니다.
              </p>
              <button onClick={() => dispatch({type : 'INCREMENT'})}>+1</button>
              <button onClick={() => dispatch({type : 'DECREMENT'})}>-1</button>
  
          </div>
      );
    };

• state값과 dispatch 함수를 받아오는데 state는 현재 가리키고 있는 상태이고, dispatch는 액션을 발생 키기는 함수이다.

• useReducer를 사용했을 때 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 점이다.

🔸 초기화 지연

• 초기화 state를 지연시켜서 생성할 수 있다.

• useReducer(리듀서 함수, 초기값, init 함수) 세 번째 인자로 전달한다.

• 예를 들어 버튼 클릭 시에 state를 재설정시킨다.

  function init(initialCount) {
  return {count: initialCount};
  }
  
  function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {count: state.count + 1};
    case 'DECREMENT':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
         state;
  }
  }
  
  function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
      <button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
    </>
  );
  }

🌈 useMemo

• useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

• 메모이제이션된 값을 반환한다.

• 렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다.

• useMemo로 전달된 함수는 렌더링 중에 실행된다. 때문에 렌더링 중에 실행되지 않는 것은 사용하면 안 된다.

    const getAverage = numbers => {
        console.log("평균값 계산");
        if(numbers.length === 0)return 0;
        const sum = numbers.reduce((a,b) => a+b);
        return sum / numbers.length;
    }
    // 생략..
    const avg = useMemo(() => getAverage(list), [list]); // list 값이 변경될때만 실행
    // 생략..

🌈 useCallback

• useMemo와 비슷하고 렌더링 성능을 최적화해야 하는 상황에서 사용된다.

• 메모이제이션된 콜백을 반환한다.

• 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.

• useCallback(fn, deps)은 useMemo(() => fn, deps)와 같다.

   const onChange = useCallback(e => {
     setNumber(e.target.value);
   },[]); //처음 랜더링될 때만 함수 생성
   const onInsert = useCallback(e => {
     const nextList = list.concat(parseInt(number));
     setList(nextList);
     setNumber('');
   },[number,list]); //number, list 가 바뀌었을 떄만 함수 생성

• useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지를 명시하는 배열을 넣는다.

• 빈 배열을 넣게 되면 컴포넌트가 렌더링 될 때 단 한 번만 함수가 생성되고, 배열 안에 값을 넣게 되면 내용일 바뀌거나 새로운 항목이 추가될 때마다 함수가 생성된다.

🌈 useRef

• 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.

  function TextInputWithFocusButton() {
    const inputEl = useRef(null); //ref 값 기본값 설정
    const onButtonClick = () => {
      inputEl.current.focus(); // 등록버튼 누른뒤 input 태그 focus
    };
    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>클릭</button>
      </>
    );
  }

• useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킨다.

• ref 안의 값이 바뀌어도 컴포넌트가 렌더링 되지 않는다.(렌더링과 관련되지 않은 값을 관리할 때만 사용)

🌈 useImperativeHandle

useImperativeHandle(ref, createHandle, [deps])

• useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자 화한다.
• useImperativeHandle는 forwardRef와 같이 사용한다.

  function FancyInput(props, ref) {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
      focus: () => {
        inputRef.current.focus();
      }
    }));
    return <input ref={inputRef} ... />;
  }
  FancyInput = forwardRef(FancyInput);

• <FancyInput ref={inputRef} />를 렌더링 한 부모 컴포넌트는 inputRef.current.focus();를 호출할 수 있다.

🌈 useLayoutEffect

• 이 함수는 모든 DOM 변경 후에 동기적으로 발생하고 DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용한다.
• useLayoutEffect의 내부에 예정된 갱신은 브라우저가 화면을 그리기 이전 시점에 동기적으로 수행된다.
• useLayoutEffect는 componentDidMount나 componentDidUpdate와 동일한 단계를 실행하긴 하지만 먼저 useEffect를 사용하고 문제가 있으면 useLayoutEffect을 사용해본다.

🌈 useDebugValue

• useDebugValue는 React 개발자 도구에서 사용자 Hook 레이블을 표시하는 데에 사용할 수 있다.

    function useFriendStatus(friendID) {
      const [isOnline, setIsOnline] = useState(null);
      useDebugValue(isOnline ? 'Online' : 'Offline');
  
      return isOnline;
    }

🌈 다른 Hooks

• 📌 참고 링크 : React-Hooks 공식 문서
• 다른 개발자가 만든 Hooks도 라이브러리로 설치하여 사용할 수 있다.
• 📌 참고 링크 : https://nikgraf.github.io/react-hooks
• 📌 참고 링크 : https://github.com/rehooks/awesome-react-hooks

Hooks API Reference – React