[React] Hooks의 기본 useState란?

안녕하세요, 성조입니다.

React에 기본기인 useState에 대해 정리하는 시간을 가져보려 합니다. 🧐

 

 

 

useState 결론​

- useState는 함수형 또는 클래스형 컴포넌트의 상태를 관리하고, 변경할 수 있도록 도와주는 하나의 React Hook이다.

​

usestate는 리액트에서 상태(state)를 관리하기 위해 가장 많이 사용하는 기능 중 하나입니다. 이번 포스팅에서는 useState의 기본 개념부터 사용 방법, 그리고 실전 예제까지 자세히 알아보겠습니다. 🧐

 

1. useState란 무엇인가?

useState는 리액트에서 제공하는 훅(hook) 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다.

기존의 클래스형 컴포넌트에서 this.state와 this.setState를 사용해 상태를 관리했던 것과 달리, 함수형 컴포넌트에서는 useState를 통해 상태를 선언하고 업데이트할 수 있습니다.

​

useState는 초기 입력될 상태 값을 인자로 받아서 상태 값과 해당 상태를 업데이트하는 함수를 쌍으로 반환하게 되는 것입니다. 🙂

​

​

2. useState 기본 사용법

useState를 사용하려면 리액트 패키지에서 useState 훅을 가져와야 합니다. 🤔

기본적인 사용법은 다음과 같습니다.

import React, { useState } from 'react';

function ExampleComponent() {
  // count라는 상태 변수와 count를 업데이트하는 setCount 함수를 선언합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

터미널에 npm start를 통해 (yarn도 좋습니다.) 활용해서 로컬에서 테스트할 수 있는 화면이 나오며, 버튼 클릭하면 값이 하나씩 증가하게 됩니다.

'카운트 증가'를 클릭하기 이전

'카운트 증가'를 클릭한 후

 

코드를 구현할 때 '함수형 코드'와 '컴포넌트형 코드' 방법이 존재합니다.

1) 함수형 코드

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const incrementCounter = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default Counter;

 

2) 컴포넌트형 코드

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCounter = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCounter}>Increment</button>
      </div>
    );
  }
}

export default Counter;

 

 

 

3. useState의 구조 분해 할당

useState는 배열을 반환하며, 첫 번째 요소는 현재 상태값을 나타내고, 두 번째 요소는 상태를 업데이트하는 함수입니다. 이를 구조 분해 할당(destructuring assignment)을 통해 쉽게 사용할 수 있습니다.

const [state, setState] = useState(initialState);

예시 코드를 보면 state는 값을 초기화 하고, 변경된 값을 setState에 저장한다는 것을 의미합니다.

​

​

4. useState로 다양한 타입의 상태 관리하기

useState를 사용하면 숫자, 문자열, 배열, 객체 등 다양한 타입의 상태를 관리할 수 있습니다.

​

문자열 예시

const [name, setName] = useState('홍길동');

문자열이 저장됩니다.

 

배열 상태 관리 예시

const [items, setItems] = useState([]);

items는 배열로 초기화되며, setItems를 활용하여 값을 저장하게 됩니다.

 

객체 상태 관리 예시

const [user, setUser] = useState({ name: '', age: 0 });

 

 

5. 상태 업데이트 함수의 사용법

useState의 상태 업데이트 함수는 항상 현재 상태를 새 상태로 바꾸는 역할을 합니다.

이 함수는 새로운 상태값을 인자로 받거나, 이전 상태를 기반으로 새로운 상태를 계산하는 함수를 받을 수 있습니다.

 

1) 상태값으로 업데이트하기

const [count, setCount] = useState(0);

function increaseCount() {
  setCount(5); // 현재 상태를 무시하고 새로운 값 5로 상태를 업데이트
}

이 코드는 setCount(5)를 호출하면 count 값이 바로 5로 변경됩니다. 즉, 기존 상태가 무엇이었든지 상관없이 항상 새로운 값 5로 대체됩니다.

 

2) 함수로 업데이트하기

const [count, setCount] = useState(0);

function increaseCount() {
  setCount(prevCount => prevCount + 1); // 이전 상태를 기반으로 상태를 업데이트
}

상태 업데이트 함수는 이전 상태를 인자로 받아 새로운 상태를 계산하는 함수를 받을 수도 있습니다. 이 방법은 현재 상태를 기반으로 새로운 상태를 계산할 때 유용합니다. 특히 비동기적 업데이트가 발생할 수 있는 상황에서 유용합니다.

 

차이점

- 직접 값을 전달하는 경우: 상태가 무조건 인자로 전달된 값으로 설정됩니다. (ex: setCount(5))

- 함수를 전달하는 경우: 이전 상태에 기반해 새로운 상태를 계산할 수 있으며, 리액트가 상태 업데이트를 비동기적으로 처리할 때에도 올바르게 작동합니다. (ex: setCount(prevCount => prevCount + 1))

 

 

 

주의할 점

​1. useState와 상태 관리 라이브러리를 잘 사용하면 전역적으로 좋은 상태를 유지하면서 서비스에 잘 녹여낼 수 있습니다.

그러나, 상태를 업데이트할 때 반환되는 함수를 호출하는 것을 잊어버려서 무한 콜에 걸리거나, 잘못 된 콜백 지옥에 빠지게 되면 서버를 눕힐 수 있는(?) 무서운 친구가 될 수도 있기 때문에 적절한 코드베이스 규칙을 유지하면서 사용하는 것이 좋습니다.

 

2. 상태 불변성 유지 문제

배열이나 객체 같은 복잡한 데이터 구조를 상태로 관리할 때는 불변성을 유지해야 합니다.

예를 들어, 배열에 새로운 항목을 추가할 때는 기존 배열을 직접 변경하지 않고, 새로운 배열을 만들어 설정해야 합니다.

 

 

---

 

잘못 전달된 지식이나, 부족한 부분이 있다면 언제든지 댓글로 알려주시면 감사드립니다.

다음 포스트에서 뵙겠습니다.