[리액트 Hook 사용하기] useState를 이용해서 Functional Component에 state를 관리하자

리액트에서 State를 관리하는 방법은 두 가지가 있다.

1. Class 컴포넌트에서의 State
2. 함수형 컴포넌트에서의 State

리액트 초심자들은 지금까지 이런 이야기를 들었을 것이다.

 

state를 사용하기 위해서는 Class형 컴포넌트를 사용해야 한다

 

맞는 말이다. 하지만 리액트가 발전하면서 리액트는 클래스형 컴포넌트에 대해서 많은 생각을 하게 되었다.

Class형 컴포넌트의 단점

• 재사용이 어렵다.
  리액트의 장점은 재사용성에 있다고 본인은 생각하는데, 클래스형 컴포넌트에서는 컴포넌트 자체를 재사용 할 수는 있지만
  Component class 부분적인 로직 및 API 사용이 state를 이용하는 처리에 재사용에 제약 사항들이 따르게 된다.

• 코드가 복잡해진다.
  Class형 컴포넌트를 사용하기 위해서 constructor, this-Binding과 같은 규칙을 따라야 하는데 이는 불필요한 코드의 부분이 증가하게 된다.

그래서 등장하게 된 React Hooks

React Hooks은 React 16.8부터 공식적으로 지원하게 되었다.

 

이는 리액트를 다시 한 번 js의 핵심 라이브러리로 굳히는 계기가 되었고 오늘은 그에 대해서 설명해보려 한다.

Class(Non Hook) vs Function (Hook)

우리는 리액트 훅이 사용되지 않는 경우와 훅이 사용되는 경우를 동시에 확인해 볼 것이다.

결국 우리는 동일한 기능을 하는 두 가지의 컴포넌트를 만들 예정이다.

InputByClass 컴포넌트

import React, { Component } from 'react';

class InputByClass extends Component {

    /////////////////////////////////////////
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      nicknamel: ""
    }
  }
      ///////////////////////////////////////// Hook이 이 부분을 대처한다.

  onChange = ({ target: { name, value } }) => {
    this.setState({
      [name]: value
    }
    )
  }

  onReset = () => {
    this.setState({ name: "", nickname: "" })
  }

  render() {

    const { name, nickname } = this.state;

    return (
      <div>
        <h3>Class형 컴포넌트</h3>
        <input name="name" onChange={this.onChange} placeholder="name" />
        <input name="nickname" onChange={this.onChange} placeholder="nickname" />
        <button onClick={this.onReset}>Reset</button>
        <div>
          <span>Info: </span>
          {name} ({nickname})
      </div>
      </div>
    );
  }
}
export default InputByClass;

클래스형 컴포넌트를 사용하려면 우리는 일반적으로 constructor를 사용하여 state를 관리한다.

 

하지만 앞서 말 했듯이 생성자를 통해서 관리하는 것은 여러 비효율적인 과정이 있기 때문에 우리는

useState라는 기능을 사용해서 관리를 할 것이다.

InputByFunction 컴포넌트

import React, { useState } from 'react';

const InputByFunction = () => {

//////////////////////////////////////////////////////////// Hook
  const [inputs, setInputs] = useState({
    nickname: "",
    name: ""
  });
//////////////////////////////////////////////////////////// Hook

  const { name, nickname } = inputs;

  const onChange = (e) => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    })
  }

  const onReset = () => {
    setInputs({
      [name]: ""
    })
  }

  return (
    <div>
      <h3>Function 컴포넌트</h3>

      <input name="name" onChange={onChange} placeholder="name" />
      <input name="nickname" onChange={onChange} placeholder="nickname" />
      <button onClick={onReset}>Reset</button>
      <div>
        <span>Info: </span>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputByFunction;

훅을 사용하려면 react에 존재하는 useState를 사용하여 state를 관리한다.

 

그러기 위해서는

 

const [state값 저장 변수, state를 변경할 함수] = useState(초기화)

 

의 형태로 작성을 하여 사용한다.

App 컴포넌트

import React from "react";
import InputSample from "./components/InputByFunction";
import Input from './components/InputByClass';
const App = () => {

  return (
    <div>
      <InputByFunction />
      <InputByClass />
    </div>
  );
}
export default App;

 

마지막으로 App 컴포넌트에서 각각의 컴포넌트를 불러와서 사용하면 원하는 결과를 확인할 수 있다.