[React] useState

React 상태 관리

• 컴포넌트의 생명주기 동안 데이터를 저장, 수정, 전달하는 방법
• 컴포넌트의 렌더링 및 사용자 인터랙션에 직접적인 영향
• 목적 : 애플리케이션의 일관성 유지, 예측 가능하게끔

1. 로컬 상태 관리 useState
   • 컴포넌트 내부에서 상태 추가할 때 사용
   • 현재 상태 값, 이 값을 업데이트하는 함수 제공
     
     
2. 복잡한 상태 로직 관리 useReducer
   • 복잡한 상태 로직을 컴포넌트 외부에 분리 가능
   • 상태 업데이트 로직이 복잡하거나 다수의 하위 값이 포함된 상태를 다룰 때 유용
     
     
     
3. 컨텍스트 API를 통한 상태 공유 useContext
   • 트리의 다양한 수준에서 상태 공유 가능
   • 주로 글로벌 상태관리, 테마, 로컬라이제이션 등의 설정 적용에 사용
     
     
4. 외부 상태 관리 라이브러리
   • Redux : 가장 널리 사용되는 라이브러리
   • MobX : 상태 관찰 가능, 상태 변화 자동 추적 → 관련 컴포넌트 업데이트
   • Zustand : 새롭고 간결한 API 제공, React 외부에서도 상태관리 가능
     
     

클래스형 컴포넌트 vs. 함수형 컴포넌트

1. Class-based components

   • 상태, 생명주기 메소드 사용
   • 컴포넌트 마운트될 때, 업데이트될 때 등 생명주기 관련한 작업 처리

   class ClassComponent extends Component {
     constructor(props) {
       super(props);
       this.state = {
         count: 0,
       };
     }
   
     incrementCount = () => {
       this.setState({ count: this.state.count + 1 });
     };
   
     render() {
       return (
         <div>
           <h1>클래스 컴포넌트 예시</h1>
           <p>카운트: {this.state.count}</p>
           <button onClick={this.incrementCount}>증가</button>
         </div>
       );
     }
   }

2. Functional components

   • 간결, 가독성 용이
   • React Hooks을 사용한 상태, 생명주기 관리

   import React, { useState } from 'react';
   
   function FunctionalComponent() {
     const [count, setCount] = useState(0);
   
     const incrementCount = () => {
       setCount(count + 1);
     };
   
     return (
       <div>
         <h1>함수 컴포넌트 예시</h1>
         <p>카운트: {count}</p>
         <button onClick={incrementCount}>증가</button>
       </div>
     );
   }
   
   export default FunctionalComponent;

• 예시에서 볼 수 있듯이 함수형 컴포넌트는 state를 ‘useState’ 훅을 통해 관리
• 클래스형 컴포넌트보다 더 간결
  
  

useState 사용법

• import import React, { useState } from 'react';
  
• 선언 const [state, setState] = useState(initialState);
  • state : 현재 상태값 변수, initialState로 초기화
  • setState : 상태값을 업데이트해주는 Setter 함수
  • initialState : 상태의 초기 값, 처음 렌더링될 때만 사용
  • 컴포넌트 최상위 레벨에서만 호출 가능 → 반복문이나 조건문 내에서 호출 X
    

useState 특징

• 상태 업데이트 병합 X

  • 이전 상태 덮어쓰지 않는다.

  • 매번 새로운 상태 설정

    const [state, setState] = useState({ count: 0, title: 'Hello' });
    setState({ count: 1 });   // title은 사라진다.

    // 이전 상태 통째로 복사 후 변경하고자 하는 부분만 업데이트하는 방식
    setState(prevState => ({ ...prevState, count: 1 }));
    // { count: 1, title: 'Hello' }가 된다.

• 비동기적 상태 업데이트

  • setState 함수 호출 시 즉시 업데이트 X

  • 성능 최적화를 위해 여러 상태 업데이트를 한 번에 처리

    const [age, setAge] = useState(20);
    function handleClick() {
    	setAge(age + 1);
    	console.log(age);   // 아직 20
    }

    function handleClick() {
    	setAge(a => a + 1);   // setAge(20 => 21)
    	setAge(a => a + 1);   // setAge(21 => 22)
    	setAge(a => a + 1);   // setAge(22 => 23)
    }

    → 대기중인 state 가져와서 다음 state 계산