TIL 30 - React Hook 개념

crystalee·2021년 8월 14일
0

react

목록 보기
2/3
post-thumbnail

✍️ React Hook이란?

React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다.

예를 들면 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

useState

useState은 클래스형 컴포넌트의 state의 선언과 관리를 짧고 직관적인 코드로 가능하게 해주는 hook이다.

<예시>

  • class형 클릭하면 숫자를 1씩 증가시키는 버튼과 1씩 감소시키는 버튼 로직
import React from "react";

class App extends React.Component {
  state = {
      number: 0
  };
  render() {
    return (
      <div style={{ "textAlign": "center" }}>
        <div style={{ "fontSize": "100px" }}>{this.state.number}</div>
        <button onClick={this.handleClickIncrement}>더하기</button>
        <button onClick={this.handleClickDecrement}>빼기</button>
      </div>
    );
  }
  handleClickIncrement = () => {
    this.setState(state => ({
      number: state.number + 1
    }));
  };
  handleClickDecrement = () => {
    this.setState(state => ({
      number: state.number - 1
    }));
  };
}

export default App;
  • 함수형 컴포넌트 with hooks useState을 사용해서 구현 숫자를 1씩 증가시키는 버튼과 1씩 감소시키는 버튼 로직
import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: "100px" }}>{number}</div>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;
  • useState 를 사용 할 땐 코드의 상단에서 import 구문을 통하여 불러오고, 다음과 같이 사용한다.
const [value, setValue] = useState(0);

함수의 파라미터에는 상태의 기본값을 넣어준다. 현재 0 을 넣어줬는데, 결국 카운터의 기본값을 0 으로 설정하겠다는 의미이다. 이 함수가 호출되고 나면 배열을 반환하고, 그 배열의 첫번째 원소는 상태 값, 두번째 원소는 상태를 설정하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링 된다.

클래스형 컴포넌트에서 setState을 사용하여 state을 변경할 때에는 shallow copy로 인해 항상 새로운 객체를 생성해서 전달해줘야하는 불편함이 있었는데, useState을 사용하여 얻은 함수(setNumber)에서는 원하는 값을 인자로 전달하기만하면 됩니다. state의 선언과 변경과정이 매우 간결해졌다.

✌️ Hook 사용 규칙

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다.

  • 최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
  • React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안된다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있다. 바로 직접 작성한 custom Hook 내. 이것에 대해서는 나중에 알아보겠다.)

이 규칙들을 강제하기 위해서 linter plugin을 제공하고 있고 이 규칙들이 제약이 심하고 혼란스럽다고 처음에는 느낄 수 있지만 이것은 Hook이 제대로 동작하기 위해서는 필수적인 조건이다.

profile
코린이 성장일기

0개의 댓글