React | Hooks 살펴보기 => useState

sik2·2021년 8월 7일

React hooks useState

React

목록 보기

2/4

지난포스팅 에서 클래스형 컴포넌트 기반의 라이프 사이클에 대해 알아보았습니다.

이번 시간에는 함수형 컴포넌트와 Hooks(useState, useEffect)에 대해 살펴봅니다.

함수형 컴포넌트

함수형 컴포넌트 형식은 아래와 같습니다.


import React from "react"

const funcComponent = () => {
  return <div>이건 함수형 컴포넌트</div>
}

export funcComponent;

함수형 컴포넌트는 직관적이고 사용하기 쉽습니다. 하지만 가장 큰 단점은 상태를 관리할 수 없다는 점이었습니다.
하지만 v16.8 버전 이후 hooks 가 등장하였고 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다.
때문에 리엑트도 공식적으로 함수형컴포넌트 + hooks 조합을 권장하고 있습니다.

Hooks

Hooks가 제공하는 함수들을 살펴 봅니다.

useState

클래스형 컴포넌트와 비교

먼저 useState 입니다.
백문이 불여일견 먼저 코드를 보겠습니다.
해당 코드는 버튼을 클릭할 때 마다 count가 1씩 증가하는 예제입니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

이를 똑같이 구현한 클래스형 컴포넌트를 보겠습니다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

코드의 수와 직관성에서 확연한 차이를 보입니다. 눈으로 잘 안보인다면 직접 구현하는걸 추천합니다. 얼마나 편안한지 체험할 수 있습니다 😍

useState 예제

이제 코드를 하나하나 살펴 보겠습니다.
설명은 👈 표시를 참고하시면 됩니다.

(root)/src/Count.js

import React, { useState } from 'react'; 👈

const Count = () => {
  const [count, setCount] = useState(0); 👈 👈

  return (
    <div>
      <p>You clicked {count} times</p> 👈 👈 👈 👈
      <button onClick={() => setCount(count + 1)}> 👈 👈 👈
        Click me
      </button>
    </div>
  );
}

export default Count;

먼저 useState를 사용하기 위해선 👈 와 같이 리액트 패키지에서 useState 함수를 불러와야 합니다.
useState(param)를 사용할 때는 파라미터(param)에 상태의 기본 값을 넣어주어서 호출해 줍니다.
👈 👈 에서 useState(0) 은 상태의 기본 값을 0으로 주겠다는 의미입니다.
이후 2개의 배열이 반환되는데요. 첫번째는 현재 상태 값이며, 두번째는 setter 함수 입니다. [count, setCount] 에서는 count가 현재 상태 값, setCount가 setter 함수입니다.
👈 👈 👈 를 보시면 onClick 이벤트 발생시 함수가 실행되며 setCount(setter 함수)가 count(현재 상태)에 +1을 합니다.
이러한 원리로 👈 👈 👈 👈 에서 {count}의 상태가 클릭마다 증가하게 됩니다.

(root)/src/App.js

  import React from "react";
  import Count from "./Count";

  const App = () => {
    return (
      <div className="App">
        <Count />
      </div>
    );
  };

  export default App;

Count 컴포넌트를 App에서 렌더링합니다.

적용화면

정리

리엑트 컴포넌트에는 props와 state가 있습니다. 컴포넌트의 인터렉션한 변화를 위해선 state 값을 변화시켜주어야 합니다.
클래스형 컴포넌트는 props와 state를 모두 사용할 수 있지만 사용하는 많은 사람들이 복잡성을 호소 했습니다.
함수형 컴포넌트가 직관적이고 사용하기 수월했지만 state의 상태를 관리할 수 없다는 큰 한계가 있었습니다.
하지만 v16.8버전 부터는 hooks가 도입되어 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다.
useState 함수는 그중 가장 기본적인 기능을 탑재한 상태 관리 함수이며, 호출 당시 파리미터에 상태 기본값을 넣어줍니다. 그리고 배열을 반환하며 첫번째 원소는 현재 상태 값, 두번째 원소는 setter 함수를 반환합니다.

+) hooks 네이밍을 살펴보자면 '끌어 당겨오다' 정도로 해석하면 될 것입니다. 기존의 함수형에서 상태를 관리할 수 없었지만 hooks라는 패키지의 '매직'으로 사용할 수 있게 되었습니다. 이 '매직'이 일종의 상태 관리 기능을 끌어당겨 와준다 이런 의미로 느낌을 가져가시면 됩니다.

++) 소프트웨어 공학에서 지칭하는 hook이 어원에 더 적합해 보입니다. 그런 hook들의 모임이 hooks인 것이죠.

소프트웨어 공학의 hook

후킹(영어: hooking)은 소프트웨어 공학 용어로, 운영 체제나 응용 소프트웨어 등의 각종 컴퓨터 프로그램에서 소프트웨어 구성 요소 간에 발생하는 함수 호출, 메시지, 이벤트 등을 중간에서 바꾸거나 가로채는 명령, 방법, 기술이나 행위를 말한다. 이때 이러한 간섭된 함수 호출, 이벤트 또는 메시지를 처리하는 코드를 훅(영어: hook)이라고 한다.

리엑트 공식홈페이지 설명