[React] 리엑트 Hook : useState

Hook

• 기존 Class 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.
• Hooks는 리액트 v16.8에 새로 도입된 기능이다. 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부른다.

Hook을 사용할 때 규칙

1. 최상위 레벨에서만 Hook을 호출해야 한다.

• 반복문, 조건문 또는 중첩된 함수에서는 Hook의 호출을 권장하지 않는다. 항상 함수의 최상위에서 Hook을 호출하여야 하는데 이는 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되기 때문이다.
• 예시)

 function Form() {
     const [user, setUser] = useState('Hun');
        useEffect(function persistForm() {
         localStorage.setItem('formData', user);
     });
       const [subuser, setSubuser] = useState('Happy');

       useEffect(function updateTitle() {
            document.title = user + '' + subuser;
     });
 }

 

1) 'Hun'이라는 state 변수 선언
2) 폼 데이터 저장을 위한 Effect 추가
3) 'Happy'라는 subuser state 변수를 선언
4) 제목을 업데이트하는 useEffect 추가-만약 조건문을 사용하고 싶다면 Hook 내부에서 실행시킬 수 있다.

 

   useEffect(function persistForm() {
  if (name !== '') {
    localStorage.setItem('formData', name);
  }
});
  }

2.  오직 React 함수 내에서 Hook을 호출하여야 한다.

• Hook을 일반적인 JavaScript함수에서 호출하면 안 된다.

useState

- 함수형 컴포넌트에서도 상태 관리를 할 수 있도록 변수의 변화를 감지하여 재 렌더링 하게 해주는 Hook의 종류이다.

- 최초로 렌더링을 하는 동안, 반환된 state는  첫 번째 전달된 인자의 값과 같다.

- setState는 state를 갱신할 때 사용한다. 새 state 값을 받아 리 랜더링을 진행한다.

 

예시)

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

1)  import React, { useState } from "react";

- useState를 사용 가능하도록  불러와준다.

 

2) const [number, setNumner] = useState(0)

- usState 함수 number의 초기값은 0이며  number 값이 변경될 때마다 변경된 값을 setNumber으로 전달받아 새로운 state으로 갱신된다.

 

3) const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

 

- 각각 number의 state값을 1씩 증가, 감소시켜주는 함수이다.

 

전개 연산자

공식문서에서는 다음과 같이 설명된다.

'클래스 컴포넌트의 setState 메서드와는 다르게, useState는 갱신 객체(update objects)를 자동으로 합치지는 않습니다.
함수 업데이터 폼을 객체 전개 연산자와 결합함으로써 이 동작을 복제할 수 있습니다.'

setState((prevState) => {
  // Object.assign would also work
  return { ...prevState, ...updatedValues };
});

 

설명을 이해하지는 못했지만 위의 예시에서는 prevState 같은  배열이나 객체  이름 앞에  마침표 3개(...)를 붙여주어 사용하는 것을 전개 연산자라고 하고 붙여준 배열이나 객체를 간편하게  연결하여 추출할 수 있게 해주는 연산자이다.