리액트의 핵심: State 이해하기
안녕하세요, 리액트 학습 여정의 세 번째 글에 오신 것을 환영합니다! 오늘은 리액트의 가장 중요한 개념 중 하나인 'state'에 대해 알아보겠습니다.
State란 무엇인가?
State는 리액트 컴포넌트 내에서 관리되는 데이터입니다. 이 데이터는 시간이 지남에 따라 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링됩니다. 쉽게 말해, state는 컴포넌트의 "기억"이라고 할 수 있습니다.
State가 필요한 이유
리액트는 UI를 효율적으로 업데이트하기 위해 만들어졌습니다. 기존의 JavaScript에서는 데이터가 변경될 때마다 수동으로 DOM을 업데이트해야 했지만, 리액트에서는 state가 변경되면 자동으로 관련된 부분만 다시 렌더링합니다.
State 사용하기
state를 사용하는 방법을 간단한 카운터 예제를 통해 알아보겠습니다.
jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>
증가
</button>
</div>
);
}
이 예제에서 주목해야 할 점들:
useState훅을 사용하여 state를 선언합니다.useState(0)는 초기값이 0인 state를 생성합니다.count는 현재 state 값이고,setCount는 이 값을 업데이트하는 함수입니다.- 버튼을 클릭하면
setCount를 호출하여count를 증가시킵니다.
State 사용 시 주의사항
- 직접 수정 금지: state를 직접 수정하지 마세요. 항상
setState함수를 사용하세요.
// 잘못된 방법
count = count + 1;
// 올바른 방법
setCount(count + 1);
- 비동기적 업데이트: setState는 비동기적으로 작동합니다. 즉, 호출 직후 즉시 state가 업데이트되지 않을 수 있습니다.
jsx
setCount(prevCount => prevCount + 1);
- 객체 state 업데이트: 객체 형태의 state를 업데이트할 때는 전체 객체를 새로 만들어야 합니다.
-
jsxCopy
const [user, setUser] = useState({ name: '홍길동', age: 30 });
setUser({ ...user, age: 31 }); // 나이만 업데이트
State vs 일반 변수
state와 일반 변수의 주요 차이점:
- 렌더링 트리거: state가 변경되면 컴포넌트가 다시 렌더링되지만, 일반 변수는 그렇지 않습니다.
- 값 보존: 컴포넌트가 다시 렌더링되어도 state 값은 보존되지만, 일반 변수는 초기화됩니다.
- 비동기 업데이트: state 업데이트는 비동기적으로 일어나지만, 일반 변수는 즉시 변경됩니다.
마치며
state는 리액트 애플리케이션의 동적인 데이터를 관리하는 핵심 메커니즘입니다. 올바르게 사용하면 효율적이고 반응적인 UI를 만들 수 있습니다. 다음 글에서는 이러한 개념들을 활용한 실제 미니 프로젝트를 만들어보겠습니다. 리액트의 세계에서 여러분의 여정이 즐거우시기를 바랍니다!
댓글 쓰기