[React] HOOK 맛보기 (State hook, Effect hook)

react hook은 기존 Class 코드를 작성할 필요 없이 함수 컴포넌트에서 state와 life cycle method를 이용할 수 있도록 도와줍니다. 굳이 기존의 Class 컴포넌트들을 함수형으로 다 바꿀 필요는 없지만 코드의 유지보수성과 가독성을 위해서 상황에 따라 Hooks를 사용하는 게 더 좋을때도 있다고 하니 배워보려 합니다!!

 

오늘은 useState와 useEffect에 대해서 알아보도록 하겠습니다.

 

 

1. useState

-함수형 컴포넌트에서 상태를 관리해야 할 때 사용

-실제의 state 값과 업데이트 할 수 있는 함수 두 개를 리턴

 (아래 예시에서는 count와 setCount 두 가지 호출)

 

※ hooks에서는 this 사용하지 않음

 

 

2. useEffect

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

-클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보면 됨

 

  2.1 마운트 될 때만 실행하고 싶을 때

  만약 useEffect 에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우에는 실행    할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는 배열을 넣어주시면 됩니다.
  

  2.2 특정 값이 업데이트 될 때만 실행하고 싶을 때

  useEffect 를 사용 할 때 특정 값이 변경이 될 때만 호출하게 하고 싶을 경우에는 두 번째 파라미터로 특정 값을 넣어      줍니다. 아래 예시에서는 count가 업데이트 될때마다 함수를 호출하도록 설정했습니다.

 

 

 

아래 예시는 기존 코드를 hooks를 활용해 바꿔본 것입니다.

//기존 코드

import React, { Component } from "react";

class SimpleHabit extends Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <li className="habit">
        <span className="habit-name">Reading</span>
        <span className="habit-count">{this.state.count}</span>
        <button
          className="habit-button habit-increase"
          onClick={this.handleIncrement}
        >
          <i className="fas fa-plus-square"></i>
        </button>
      </li>
    );
  }
}

 

//react hooks로 변경한 코드 

import React, {  useState, useRef, useCallback, useEffect  } from "react";

const SimpleHabit = (props) => {
  const [count, setCount] = useState(0);
  const spanRef = useRef();

  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  });

  useEffect(() => {
    console.log("mounted & updated: ${count}");
  }, [count]); //count가 업데이트 될때마다 이 함수 호출
  return (
    <li className="habit">
      <span ref={spanRef} className="habit-name">
        Reading
      </span>
      <span className="habit-count">{count}</span>
      <button className="habit-button habit-increase" onClick={handleIncrement}>
        <i className="fas fa-plus-square"></i>
      </button>
    </li>
  );
};
export default SimpleHabit;