useState Hook

Hook이란

리액트 16.8 이후에 도입 되어 함수형 컴포넌트에서도 상태 관리가 가능해졌습니다.
Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.

useState Hook

• useState 메서드
• 반환하는 값 : state 변수, 해당 변수를 갱신할 수 있는 함수(Setter 함수)
• count 변수의 값을 갱신하려면 setCount를 호출
• class의 this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점
• this.state와는 달리 setState Hook의 state는 객체일 필요가 없다

classical React의 문제점

• this binding, 이벤트 핸들러로 혼란을 준다.
• 이해하기 어렵고 복잡한 컴포넌트
• 로직 재활용에 유용한 HOC, render props의 문제점

이를 해결하기 위한 Hook이 등장, 필요한 것만 사용하자는 취지

Tip!! useState 함수로 초기값
초기값 할당 시 연산이 많은 값인 경우 함수를 사용한다. 또한, 초기 상태를 함수로 사용하기 때문에 리렌더링 시에는 다시 실행되지 않는다.

useState 코드

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0); //state 변수 선언

  return (
    <div>
      <p>You clicked {count} times</p>  //<!-- state 가져오기 -->
      <button onClick={() => setCount(count + 1)}> //state 갱신하기
        Click me
      </button>
    </div>
  );

------------
//클래스 컴포넌트에서 onClick을 익명함수로 바로 사용가능
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>
    );
  }
}

함수형 업데이트
기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식

const [count, setCount]=useState(0);
setCount(prev => prev + 1);

useState를 사용하여 여러 input 관리
여러 input을 사용하여 state를 관리해야 될 때 useState를 여러개 사용하여 관리할 수 있지만 다음과 같이 사용하면 한개의 state로 여러개

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
  
 const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

 const onChange = (e) => {
 	const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

 const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

onChange의 setInputs를 보면 spread를 사용하여 불변성을 지켜주었다. 그 이유는 리액트의 규칙 중 하나인 state를 업데이트 할 때 불변성을 지켜주어야되기 때문이다.