Hook series 1 : useState🪝

*React state 관련 작성글 ▶️이전 정리글 참고

1. React Hook🪝

01. React Hook이란?

React는 16.8 버전부터 Hook이란 개념이 새로 추가되었다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수로, React에서 제공하는 내장 Hook(useState, useEffect 등)과 사용자가 직접 정의할 수 있는 Custom Hooks가 있다.

02. Hook의 등장 이전 : 클래스형 컴포넌트의 문제점

• 클래스형 컴포넌트에서 state를 관리하고, 생명주기 메서드를 사용하는 방법이 복잡하다.
• 컴포넌트 간의 상태 로직을 재사용하기 어렵다.
• 복잡한 컴포넌트의 경우 이해하기 어렵다.
• Class 문법(this 바인딩 등) 자체가 어렵다.

03. Hook의 등장 이후 : 함수형 컴포넌트와 Hook의 장점

• 컴포넌트 간의 계층을 바꾸지 않아도 상태 로직을 재사용할 수 있다.
• 컴포넌트를 생명 주기가 아닌 기능을 기반 단위로 나눌 수 있어 이해하기 쉽다.
• Class 문법 없이도 React 기능을 사용할 수 있다.

04. Hook 작성 규칙

• 같은 Hook을 여러번 호출할 수 있다.

function App() {
  // useState 여러번 호출 가능
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  
 ... 이하 생략

• 컴포넌트 최상위에서만 호출할 수 있다. 즉, 반복문, 조건문, 중첩된 함수 내에서 훅을 사용할 수 없다.

function App() {
  // useState 여러번 호출 가능
  if(true){
  
  	// 반복문 안에서 hook 호출 = 작동X
  	const [bar, setBar] = useState(0) 
    
	}
  
 ... 이하 생략

• 컴포넌트의 최상위 레벨이나 직접 만든 Hook에서만 호출할 수 있다.
• 비동기 함수(async, await)는 콜백함수로 사용할 수 없다.

2. useState🔃

00. state란?

useState hook을 사용하기 위해서 우선 state에 대한 개념을 이해해야한다.
컴포넌트는 로직을 처리하기 위해 특정한 값 (입력값, 이벤트) 등을 기억해야하는데, React는 이를 state라고 정의한다. 즉, React 컴포넌트가 가질 수 있는 동적인 상태값이 state이다.

01. useState란?

useState는 컴포넌트에 상태(state) 변수를 추가/관리할 수 있는 Hook이다.

02. useState 사용법

컴포넌트의 최상위 레벨에서 useState를 호출하여 state 변수를 선언한다.

• 매개변수 : state의 초기 설정값
• 반환값 : 현재 state / set 함수
  *set 함수란? : state를 다른 값으로 업데이트하고 리렌더링을 촉발하는 함수

//구조분해 할당을 사용하여 State 변수의 이름을 지정
const [변수명, set함수명] = useState(매개변수=초기값)

//예시
import { useState } from 'react';

function App = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  
 ... 이하 생략

03. 어라, useState가 너무 많은거같은데?

• state마다 useState 생성
  데이터를 변경할 때 마다 set 함수를 각각 한 번씩 불러주는 방법이다.

function UserCard() {
  const [name, setName] = useState("홍길동");
  const [age, setAge] = useState(20);
  const [address, setAddress] = useState("서울")

  return (
    <div>
      <h1>이름: {name}</h1>
      <h2>나이: {age}</h2>
      <h3>학교: {school}</h3>
      <button
        onClick={() => {
          setName("홍길순");
          setAge(22);
          setAddress("부산")
        }}
      >
        사람 변경
      </button>
    </div>
  );
}

• state를 객체로 묶어서 useState 생성
  데이터를 하나의 객체로 묶어서 set 함수를 한번만 실행하는 방법이다.

function UserCard() {
  const [user, setUser] = useState({
    name: "홍길동",
    age: 20,
    address: "서울",
  });

  return (
    <div>
      <h1>이름: {user.name}</h1>
      <h2>나이: {user.age}</h2>
      <h3>학교: {user.address}</h3>
      <button
        onClick={() => {
          setUser({
            ...user,
            name: "홍길순",
            address: "부산",
          });
        }}
      >
        사람 변경
      </button>
    </div>
  );
}

위와 같이, age의 값을 변경하고 싶지 않은 경우에는 기존 user 객체를 spread 시킨 후, 변경을 원하는 값들을 다시 적어주면 된다. 이 과정을 "override"라고 하는데, 변경하지 않을 값은 이전의 상태에서 가져온다.

• 어떤 방법이 더 좋은가?
  더 좋은 방법은 없다! 두가지 방법을 적절히 사용해야한다.
  상황에 따라 하나의 object로 묶을 만한 것이면 묶는 것이 더 좋을 수 있다. 하지만 단순히 개수만 많다는 이유로 관련이 없는 항복들을 하나의 object 로 묶는다면, 코드의 가독성이 오히려 떨어진다.

04. useState의 함수형 업데이트

함수형 업데이트란 set함수의 매개변수로 함수를 넣는 것이다. set함수에 값을 넣어 여러번 실행하면 batch update로 인해 한번만 실행된다. 하지만 함수형 업데이트로 여러번 실행하면 명령을 모아서 순차적으로 한번씩 실행되기 때문에 모두 반영된다. 또한, 변수를 props로 내려주지 않아도 하위 컴포넌트에서 정상적으로 작동한다.

//example
const [count, setCount] = useState(0)

//일반적인 set
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)

console.log(count) // 1 ▶️ 결과적으로 한번만 작동한다.

//함수형 업데이트
setCount((prev현재값) => prev현재값 + 1)
setCount((prev현재값) => prev현재값 + 1)
setCount((prev현재값) => prev현재값 + 1)

console.log(count) // 3 ▶️ 순차적으로 모두 실행

05. useState 사용시 주의사항

• 상태값이 변경되면 리렌더링이 된다.
• setState는 동기 함수이지만, 비동기처럼 동작한다. React의 리렌더링 원리가 비동기적으로 작동하기 때문이다.
• state의 불변성을 지켜야한다. 즉, 상태 변경 시 기존의 상태 객체나 배열을 직접 수정하지 않고, 새로운 객체나 배열을 생성하여 상태를 업데이트 해야한다.

useState React 공식 문서
useState 참고 사이트 1
useState 참고 사이트 2
React Hook 참고 사이트