TIL62.React Hooks

함수형 컴포넌트에서 react hooks를 사용하여 상태 관리를 해보자.

React Hooks란?

react Hook를 한마디로 요약하면, 클래스형 컴포넌트를 사용하지않고도 함수형 컴포넌트에서도 state 를 운용할 수 있는 기능을 말한다.

기존의 함수형 컴포넌트는 클래스형과 비교해서 선언하기 쉽고, 메모리 지원도 덜 사용한다는 이점이 있지만, state와 라이프사이클 API의 사용이 불가능하다는 큰 단점이 있있다.

이를 해결하기 위해서 v16.8업데이트 이후 hooks라는 기능이 도입되었다.
상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect에 대해서 더 자세히 공부해보자.

useState

가장 기본적인 Hook이며, 상태를 관리할 때 사용된다.

• 코드상단에서 import를 통해 사용할 것이라는 것을 명시한다.
• useState 함수의 파라미터에는 상태의 기본값을 넣어준다. 이 함수가 호출되면 배열을 반환하는데 이때 첫번째 원소는 상태값, 두번째 원소는 상태를 설정한다.
• 하나의 useState 함수는 하나의 상태 값만 관리할 수 있기때문에 관리하고자 하는 상태가 여러개라면 여러 번 사용해줘야 한다.

//Counter.js
import React, { useState, useEffect } from "react";

const Counter = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  const onChangeName = (e) => {
    setName(e.target.value);
  };
  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <input value={name} onChange={onChangeName} />
      <input value={name} onChangeNickname={onChangeNickname} />
      <div>이름: {name}</div>
      <div>별명: {nickname}</div>
    </div>
  );

*class형처럼 state를 하나의 객체형태로 코드를 줄인다면?

const [state, setState] = use.state({name:"", nickName:"",})

 const onChangeName = (e) => {
    setState({name:e.target.value, nickName: "",});
  };

오류화면이 나지는 않지만, 저렇게 state를 합쳐버리면 setState를 설정할 때 귀찮아진다. 예시에 적은 state는 두개이지만 관리해야할 값이 많아진다면 모든 state의 값을 다 써줘야한다.

useEffect

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook이다. 클래스형 컴포넌트의 componentDidMount와 componentDidupdate를 합친 형태로 볼 수 있다.

useEffect(() => {
    console.log("completed rendering");
    console.log({ name, nickname });
  });

마운트될 때만 실행하기

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 인자로 빈 배열을 넣어주면 된다.

useEffect(() => {
    console.log("렌더링이 완료되었습니다.");
  }, []);

특정 값이 업데이트될 때만 실행하기

특정 값이 변경될 때만 호출하고 싶을 경우, 두 번째 인자로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다. 배열 안에는 state를 넣어 주어도 되고, props로 전달받은 값을 넣어 주어도 된다.

//클래스형 컴포넌트
componentDidUpdate(prevProps, prevState) {
	if(prevProps.value !== this.props.value) {
    	doSomething();
    }
}

//함수형 컴포넌트
useEffect(() => {
    console.log(name);
  }, [name]);

언마운트되기 전이나 업데이트되기 직전에 작업을 수행하기

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 'cleanup'함수를 반환해야한다.
클래스형 컴포넌트의 componentWillUnmount메서드의 형태라고 볼 수 있다.

//Info.js
useEffect(() => {
    console.log("effect");
    console.log(name);
    return () => {
      console.log("cleanup");
      console.log(name);
    };
  });

return (
    <div>
      <input value={name} onChange={onChangeName} />
      <input value={name} onChangeNickname={onChangeNickname} />
      <div>이름: {name}</div>
    </div>
  );

//App.js
 return (
    <div>
      <button
        onClick={() => {
          setVisible(!visible);
        }}
      >
        {visible ? "숨기기" : "보이기"}
      </button>
      <hr />
      {visible && <Info />}
    </div>
   );

컴포넌트가 나타날 때마다 콘솔에 effect가 나타나고, 사라질 때, cleanup이 나타난다.
렌더링될 때마다 cleanup함수가 계속 나타난다. 그리고 함수가 호출될 때는 업데이트되기 직전의 값을 보여준다. 언마운트될 때만 clean up함수를 호출하고 싶다면, useEffect함수의 두번째 인자에 비어있는 배열을 넣어주면 된다.