useState, useEffect 이해, Counter 만들기 - React, Node.js 프로젝트

React의 상태 관리 useState와 useEffect 

useState와 사이드 이펙트 처리를 위한 useEffect는 React에서 상태 변화를 관리하고

컴포넌트가 렌더링될 때 특정 동작을 처리하는 중요한 역할을 한다

=> 간단한 Counter를 구현해보자 

 

1. useState

1-1. 개념

useState : 상태 관리 기초를 위해 사용되는 훅.
컴포넌트 내에서 상태 값을 설정하고, 해당 값을 변경할 수 있도록 해준다. 
상태가 변경될 때마다 컴포넌트가 다시 렌더링됨.

 

1-2. 사용법

> Counter.js 생성

 

이전에 state, props를 이용해 Couter.js를 만들어보았었다  

https://tiny-immj.tistory.com/84

React 컴포넌트 재사용하기, props와 state - React, Node.js 프로젝트

 

결과물은 같지만 코드는 달라짐

Counter.js

import React, { useState } from 'react';

function Counter(initialCount1) {
  // count라는 상태 값과 이를 업데이트하는 setCount 함수
  const [count, setCount] = useState(0);

  return (
    <div className="counter">
      <h2>Count: {count}</h2>
      <button className="btn btn-primary" onClick={() => setCount(count + 1)}>Increment</button>
      <button className="btn btn-danger" onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

> useState(0) : 초기 상태 값을 0으로 설정해준다

> count는 상태값, setCount는 상태값을 변경해주는 함수

> setCount 버튼을 클릭할 때마다 count 값이 1증가하거나 1 감소하고 

컴포넌트는 다시 렌더링된다 

 

2. useEffect

2-1. 개념

useEffect : 사이드 이펙트 처리. 
컴포넌트가 렌더링되거나 업데이트될 때 특정 작업(사이드 이펙트)을 수행할 수 있도록 해준다. 
ex) 데이터 fetching, DOM 조작, 구독 설정, 타이머 설정 등 포함

 

2-2. 사용법

> CounterWithEffect.js 생성

CounterWithEffect.js

import React, { useState, useEffect } from 'react';

function CounterWithEffect(initialCount2) {
  const [count, setCount] = useState(0);

  // 컴포넌트가 렌더링되거나 count 상태가 변경될 때 실행
  useEffect(() => {
    console.log(`Current count: ${count}`);
  }, [count]); // count가 변경될 때마다 useEffect 실행

  return (
    <div className="counter">
      <h2>Count: {count}</h2>
      <button className="btn btn-primary" onClick={() => setCount(count + 1)}>Incre +1</button>
      <button className="btn btn-danger" onClick={() => setCount(count - 1)}>Decre -1</button>
    </div>
  );
}

export default CounterWithEffect;

> useEffect(() => { ... }, [count]) : count 값이 변경될 때마다 실행된다

처음 컴포넌트가 렌더링될 때도 실행됨 

> 의존성 배열 [count] : count가 변경될 때만 효과가 실행된다 

> useEffect에서 함수를 한번만 실행시키려고 할 때는 의존성 배열을 빈 배열 (ex. [] )로 둔다 (처음 렌더링 될 때만 실행)

 

 

3. App.js에서 코드 실행하기 

3-1. App.js 코드 

App.js

import React from 'react';
import Counter from './Counter';
import CounterWithEffect from './CounterWithEffect';

function App() {

    return (
    <div className="container">
        <div>
            <h1 className="text-center mt-4">React 상태 관리 예제</h1>
            <Counter initialCount1={0} />    
        </div>
        <div>
            <h1 className="text-center mt-4">React 상태 관리 예제2</h1>
            <CounterWithEffect initialCount2={0} />   
        </div>
    </div>
  );
}
export default App;

 

useState, useEffect를 이렇게 써봤는데 최적의 사용방법인지는 모르겠다 

공부해보고 좀 더 수정해봐야지

 

3-2. 실행 결과

npm run start

react app 실행

버튼 누르기

4. 정리

userState : 컴포넌트 내 상태를 관리할 때 사용, 상태가 변경될 때마다 컴포넌트를 다시 렌더링함

userEffect : 컴포넌트가 렌더링되거나 업데이트될 때 특정 작업을 처리할 수 있도록 함, 상태가 변경될 때 동작하도록 제한할 수 있음