지금까지 React를 class컴포넌트를 사용해 왔었는데 요번주에 Hooks을 배우게 되어 어떤 개념인지 정리할겸 글을 써볼려고합니다.

Hooks은 뭘까?

공식 문서를 봐보면 아래와 같이 적혀 있습니다.

Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공합니다. 또한 Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공합니다.

Class를 두고 Hooks를 사용하는 이유는?

• 복잡한 컴포넌트들은 이해하기 어렵습니다. (관심사의 분리, Lifecycle API)

componentDidMount() {
	applyFirstLogic()
	applySecondLogic()
}

// 관심사의 분리 - Data fetching
useEffect(() => {
	applyFirstLogic()
}, [])

// 관심사의 분리 - Attach event listener
useEffect(() => {
	applySecondLogic()
}, [])

• State가 참조하는 값은 항상 최신 ⇒ 결과를 보장하기 힘듬(버그 발생)
  
  인스타 그램으로 간단히 예시를 들어보면 이 인스타 그램은 팔로우 버튼을 클릭하면 3초뒤에 팔로우가 되는 시스템을 가지고 있다 생각해보자 함수형은 Dan에서 팔로우 버튼을 누르고 Sophie로 이동을 해도 Dan이 팔로우가 되는 반면 클래스형 버튼을 Sophie에서 누르고 Dan이 팔로우가 되는 버그가 발생한다.

컴포넌트 선언에서 달라진점

Class

import React, { Component } from 'react';

export class Haha extends Component {
  render() {
    return (
      <div>
        <h1>하이</h1>
      </div>
    );
  }
}

export default Haha;

Hooks

import React from 'react';

function Hm() {
  return <h1>하이</h1>;
}

export default Hm;

state 선언은 어떻게?

여기에서 큰 차이를 보인다 Class형은 constructor() super() 를 선언해 그 안에 state값을 선언해 주지만 Hooks 에선 const 안에 배열로 state와 setState를 선언하고 useState(초기값)을 넣어줍니다.

Class

import React, { Component } from 'react';

export class Haha extends Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }
  render() {
    return <h1>하이</h1>;
  }
}

export default Haha;

Hooks

import React, { useState } from 'react';

function Hm() {
  const [count, setcount] = useState(0);
  return <h1>하이</h1>;
}

export default Hm;

Hooks 사용 규칙

• 최상위에서만 Hooks을 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hooks을 실행 하면 안됩니다.

import React, { useState } from "react"

function Hooks(props) {
	if (!props.isExist) {
		const [state, setState] = useState(); // Error!
	}
	const [state2, setState2] = useState(); // Error!
}

// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

• React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다

useEffect

함수형 컴포넌트인 Hooks에서는 componentDidMount , componentDidUpdate 같은 LifeCycle을 쓸수가 없다
그래서 필요한게 useEffect 이다.

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

위에처럼 인자로 콜백 함수와 의존성 배열을 가지고 있습니다.
의존성 배열은 배열 안에 담긴 값들을 추적하고 그때 마다 업데이트 할수 있게 해줍니다.