[React] React Hooks와 useState, useEffect

 

React Hooks와 useState, useEffect

 

---

 

# React의 클래스형 컴포넌트와 함수형 컴포넌트

 

 React의 컴포넌트를 작성하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 생명 주기 관련 기능을 사용할 수 있다. 함수형 컴포넌트는 상태값과 생명 주기 관련 기능을 사용할 수 없지만, Hook을 이용하여 이를 해결한다. 클래스 방식보다 함수 방식이 선언이 더 쉽고 메모리를 덜 사용한다는 장점이 있어서 현재는 함수형 컴포넌트 방식을 많이 사용한다. (React 공식 문서에서도 함수형을 권장하고 있다.)

 

 

# React Hooks

 

 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있도록 추가된 자바스크립트 함수이다. React 16.8부터 새로 추가되었고, Hook을 이용하여 클래스형 컴포넌트를 사용하지 않고도 상태 값과 여러 React의 기능을 사용할 수 있다. 

 

 

# 대표적으로 사용하는 Hook 알아보기

 

1. useState

 

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div
      onClick={() => {
        setCount(count + 1);
        console.log(count);
      }}
    >
      hello world
    </div>
  );
}

export default App;

 

 const [변수이름, set변수이름] = useState(초기값) 형식으로 선언한다. set변수이름을 이용하면 변수의 상태를 변경할 수 있다. 위 예시는 count라는 변수를 선언하고, 그 초기값이 0이다. 그리고 setCount를 이용해서, 글자가 클릭될 때마다 count 변수의 값이 1씩 증가한다.

 

 변수를 선언하고 그 변수의 값을 변경하는 기능을 하기 때문에, 어떻게 보면 자바스크립트의 let과 비슷해 보인다. 그러나 state로 데이터를 저장하면 state가 변경되었을 때 HTML이 자동으로 리렌더링된다. let으로 변수로 선언하면 변수에 있는 값이 바뀌어도 리렌더링이 되지 않고 새로고침을 해야만 값이 바뀌지만 state를 이용하면 새로고침을 할 필요가 없어 편리하다. 따라서 웹 페이지가 부드럽게 동작한다. 그러니 자주 바뀌는 중요한 데이터는 state로 선언하는 것이 좋다.

 

 

2. useEffect

 

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

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

  return (
    <div
      onClick={() => {
        setCount(count + 1);
      }}
    >
      hello world
    </div>
  );
}

export default App;

 

 useEffect(() => {동작}, [관찰하고자 하는 값]) 형식으로 선언한다. 위 예시에서 useEffect의 뜻은, count 값이 바뀔 때마다 console.log(count)를 하라는 뜻이다. 즉, useEffect는 특정 값이 변할 때만 특정 코드를 실행하게 해주는 기능이다. useEffect 내부에 있는 코드는 가장 첫 렌더링 때 한 번 실행되고, 그 뒤로는 [관찰하고자 하는 값]이 변할 때만 실행된다.

 

  useEffect(() => {
    console.log(count);
  }, []);

 

 따라서, 이렇게 []안에 아무 값도 작성하지 않으면 첫 렌더링 때만 실행하고 그 뒤로는 실행되지 않는다. 딱 한 번만 실행해야 하는 코드를 작성할 때 유용하다.

 

 

# React Hooks 규칙

 

 React Hooks를 사용할 때는 규칙을 지켜서 사용해야 한다.

 

1. 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수에서 호출하면 안 된다.

2. React 함수 내에서만 Hook을 호출해야 한다. 일반적인 자바스크립트 함수에서 호출하면 안 된다.

 

// 에러 나는 경우

import React, { useState } from "react";

function App() {
  const printHello = () => {
    const [text, setText] = useState("hello");
    setText("hello World");
    console.log(text);
  };

  return <div onClick={printHello}>hello world</div>;
}

export default App;

 

 2번 규칙이 무슨 말인지 잘 안 와닿아서 코드를 작성해봤는데, 아마 저렇게 함수 내에 Hook 선언하지 말라는 뜻인 것 같다. 저렇게 하니까 바로 에러 뜸...

 

import React, { useState } from "react";

function App() {
  const [text, setText] = useState("hello");

  const printHello = () => {
    setText("hello World");
    console.log(text);
  };

  return <div onClick={printHello}>hello world</div>;
}

export default App;

 

 이렇게 함수 밖으로 Hook을 빼주면 아무 문제 없음!

 

---

 

참고 자료

 

https://ko.reactjs.org/docs/hooks-intro.html

https://choijying21.tistory.com/60