[TIL] React-Hooks 알아보기

클래스형 vs 함수형

 

React는 처음에 클래스형 컴포넌트의 방법만 존재했다.

하지만, 클래스형은 어렵고 복잡하여 함수형 컴포넌트 방법이 생겨나게 되었다.

함수형 컴포넌트는 클래스형 컴포넌트보다 훨씬 간단하기에 점점 함수형 컴포넌트의 사용 비율이 높아지게 되었고, 요즘 현업에서는 클래스형보다는 함수형 컴포넌트를 많이 사용하는 추세라고 한다.

 

클래스형 컴포넌트

import { Component } from 'react';

class Hello extends Component {
	render() {
    	return <div>클래스형 컴포넌트</div>
    }
}

export default Hello

함수형 컴포넌트

const Hello = () => <div>함수형 컴포넌트</div>

export default Hello

이 함수형 컴포넌트는 화살표 함수로도 적용이 가능합니다.

function Hello() {
	return <div>함수형 컴포넌트</div>
}

export default Hello

 

그래서 이게 React-Hooks와 무슨 상관인데?

 

함수형 컴포넌트는 사용이 간편한 대신, 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 활용할 수 없다.

그래서 React에서 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 동일하게 사용할 수 있도록 도구를 만들어 주었는데 이를 Hooks(훅) 이라 부른다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용이 가능하다.

 

Hook의 규칙

1. 최상위(at the Top Level)에서만 Hook을 호출해아 한다.

 

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안되고 항상 React 함수의 최상단에서 호출해야 한다.

이 규칙을 지키면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.

 

2. 오직 React 함수 내에서 Hook을 호출해야 한다.

 

Hook은 일반적인 JavaScript 함수에서 호출하면 안된다.

대신 React 함수 컴포넌트에서나 Custom Hook에서는 Hook을 호출할 수 있다.

이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확히 확인할 수가 있다.

 

useState, useEffect

 

대표적인 React-Hooks로는 useState와 useEffect를 들 수가 있다.

useState는 상태를 관리하는 Hook이다.

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());
  // ...

예시와 같이 컴포넌트의 최상단에서 useState를 호출하여 state 변수를 선언한다.

현재 상태를 나타내는 state 값과 이 상태를 변경하는 setState 값을 한 쌍으로 제공한다.

state는 초기값을 설정할 수 있고 setState 함수를 사용하여 이 값을 변경할 수가 있다.

 

useEffect는 기존 클래스형 컴포넌트에서 사용했던 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 통합한 것과 같다. 이 말이 무엇이냐면, React 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이라는 의미이다.

 

useEffect 기본 형태:

useEffect(function, deps)

function: 수행하고자 하는 작업

deps: 배열 형태이며, 배열에는 검사하고자 하는 특정 값이나 빈 배열이 들어간다.

import { useEffect } from 'react';

const Hello = () => {
    useEffect(() => {
        console.log('마운트될 때만 실행!');
    }, []);
}

export default Hello

deps에 빈 배열이 들어가면 처음 렌더링 될 때만 실행되고 이후에는 실행되지 않는다.

만약 배열을 생략한다면 리렌더링될 때마다 실행된다.

만일 특정 값이 update 될 때마다 실행하고 싶은 작업이 있다면 아래와 같이 작성해주면 된다.

 

예를 들어, age라는 state 값이 바뀔 때마다 실행되게 하고 싶다면

import { useState, useEffect } from 'react';

const Hello = () => {
    const [age, setAge] = useState(20)

    useEffect(() => {
        console.log('마운트될 때만 실행!');
    }, [age]);
}

export default Hello

 

 

[참고] 

React 공식 문서

https://ko.legacy.reactjs.org/docs/hooks-rules.html