[React] State 관리는 Hook 으로

사실 Hook 편하다고 좋아하기에는 React 개발 경력이 최근에 시작되었다.
React가 한참 핫하다고 했을 때 개념만 살짝 이해해보겠다고 훑어봤던 공식문서
그 때 잠깐 State(상태, 이하 'state')를 관리하기 위해서는 클래스 컴포넌트를 만들고 복잡하게 핸들러를 작성해야된다는 것까지만 인지 해놓은 상태였다.
그리고 지금와서 다시 본 React는 예전처럼 코드를 작성하고 있지 않았다.
그 동안 많은 변화가 있었던 듯 하다.

Class Component vs Hook

먼저 이전에 쓰였던 Class Component를 이용한 State 이용 방법이다.

import React from 'react';

class BasicComponent extends.React.Component (){
  constructor(props){
    super(props); // props 상속
    this.state = {text : "initial"};
    this.handleChange = this.handleChange.bind(this) 
    // 이벤트 핸들러에 This bind 일일이 해주는 것도 골칫거리
  }
  
  handleChange(e){
	this.setState({text : e.target.value});
    //State를 변경하기 위해서는 구조 분해 할당을 사용해야했다.
  }
  
  render(){
	  return(
      	<input value={state.text} onChange={handleChange}/>
      )
  }
}

위의 장황한 코드가 보이는가? Hook을 사용하면 다음의 코드로 대신 작성할 수 있다.

import {React, useState} from 'react';

function BasicComponent(props){
  const [text, setText] = useState("initial");
  // Hook의 진면모

  const handleChange = (e)=>{
	setText(e.target.value);
    //각각의 state 변수에 setter 기본 생성
  }

  return(
      <input value={text} onChange={handleChange}/>
      {/* 객체 접근자 사용 필요 없이 state 변수 사용 */}
	)
  }
}

정말 깔끔한 코딩을 할 수 있게 되었다. Class Component를 선언해 사용하기 위해서 작성해야했던 불필요한 코드들을 없애고 함수형 Component로 간단히 React를 사용할 수 있게 되었다.

useState를 이용한 상태 변화 관리는 다음의 4가지 요소가 필요하다.

1. text 같은 state 변수
2. setText 같은 state 값을 변경할 setter 함수
3. useState로 state변수와 setter함수 짝 생성
4. "initial" 같은 초기값 할당