React Hook 정리 (useState, useEffect)

훅(hook) 이란?

리액트 16.8버전부터 새로 도입된 개념이다. hook은 class 를 사용하지 않고도 리액트의 기능을 사용할 수 있게 도와준다.

기존 리액트의 컴포넌트는 클래스를 이용해 상태 관리를 했었지만 훅이 도입된 이후 보다 간편하게 상태 관리를 할 수 있게 되었다.

 

기존 리액트의 상태관리

class Counter extends Component {
  // 상태 초기화
  state = {
    count: 0,
  };

  // 버튼 클릭 시 호출되는 핸들러 메서드
   handleClick= () => {
    this.setState({ count: this.state.count + 1 }); // 상태 업데이트
  };

  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={this.handleClick}>증가</button>
      </div>
    );
  }
}

export default Counter;

훅을 통한 상태관리

function Counter() {
  const [count, setCount] = useState(0); // 상태 관리

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

useState 라는 훅을 이용해 복잡한 코드를 줄였고 상태 로직을 재활용하기 쉽게 만들었다.

useState

 const [state, setState] = useState(initialState)

Reate 훅의 종류중 하나. 상태를 관리해 주는 역할을 한다.

사용법은 다음과 같다.

  const [변수, 변수를 바꿀 수 있는 함수] = useState(초기값);
  
  // 예시
  const [count, setCount] = useState(0);

첫 번째 자리에는 상태변수가 들어간다. 해당 변수는 다음에 들어갈 함수로 접근이 가능하다.

예시로 제공된 코드를 읽어보면 count라는 변수를 0으로 초기화 한다. count를 변경하기 위해서는 setCount 라는 함수를 이용해 접근한다.

이 때 setCount는 setter 역할을 하며 setCount를 사용하지 않고 count를 변경한다면 리렌더링이 되지 않는다.

이는 리액트의 상태변경은 예측 가능해야한다. 라는 상태 관리 원칙에 따라 함수를 순수하게 유지시키기 위함이다.

useEffect

useEffect(setup**,** dependencies?)

useEffect는 외부 시스템과 컴포넌트를 동기화 하는 React Hook이다.

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();      // 설정함수 (시작하자마자 또는 dependencies가 변경되었을 때 실행)
    return () => {
      connection.disconnect(); // 정리함수 (사라질 때 또는 dependencies가 변경되기 직전에 실행)
    };
  }, [serverUrl, roomId]);

매개변수

setup: Effect의 로직이 포함된 함수이다. 의존성 (위 코드에서는 serverUrl, roomId) 이 변화하면 실행된다.

설정 함수는 선택적으로 clean up(정리) 함수를 반환할 수 있다.

의존성의 변화에 따라 컴포넌트가 리렌더링 되었을 때 이전 렌더링에 사용된 값으로 정리 함수를 실행한 후 새로운 값으로 설정 함수를 실행한다.

컴포넌트가 DOM에서 제거 되었을 때에도 정리함수를 실행한다.