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 프로젝트
React component의 구조와 재사용, props와 state 1. React component React는 컴포넌트 기반 아키텍처. 컴포넌트는 UI의 독립적인 재사용이 가능한 조각으로 이를 조합해 복잡한 UI를 구성할 수 있다 1-1. Butto
tiny-immj.tistory.com
결과물은 같지만 코드는 달라짐
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 생성
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 코드
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
4. 정리
userState : 컴포넌트 내 상태를 관리할 때 사용, 상태가 변경될 때마다 컴포넌트를 다시 렌더링함
userEffect : 컴포넌트가 렌더링되거나 업데이트될 때 특정 작업을 처리할 수 있도록 함, 상태가 변경될 때 동작하도록 제한할 수 있음
'프로젝트 기록 > React, Node.js를 이용한 게시판 만들기' 카테고리의 다른 글
React Context API로 전역 상태 관리 구현 (0) | 2024.10.30 |
---|---|
React Router로 SPA(Single Page Application) 구현하기, SPA를 사용하는 이유 (1) | 2024.10.30 |
React 컴포넌트 재사용하기, props와 state - React, Node.js 프로젝트 (0) | 2024.10.23 |
Axios, CORS 설정을 적용한 React, Node.js 프로젝트 (1) | 2024.10.19 |
2. React, Node.js를 이용한 게시판 만들기 - MySQL 연결 및 CRUD 작성 (1) | 2024.10.18 |