{풀스택} React 이론 8강 - useState 간단 소개

useState 훅 기본 개념

React를 공부하다 보면 "상태(state)"라는 단어가 자주 나와요. 쉽게 말하면, 컴포넌트가 화면에 보여줄 데이터예요. 예를 들어, 로그인 버튼을 누르면 "환영합니다!"라는 메시지가 뜨는 거, 그 메시지가 상태죠. useState는 이런 상태를 관리해주는 React의 내장 함수예요. 처음 접하시는 분들을 위해 설명드리면, React 16.8 버전부터 도입된 '훅(hook)'의 일부로, 클래스 컴포넌트 없이 함수형 컴포넌트에서 상태를 다룰 수 있게 해줘요.

useState의 기본 구조를 보죠. 이 함수를 호출하면 배열이 리턴되는데, 첫 번째 요소는 현재 상태 값이고, 두 번째는 그 상태를 업데이트하는 함수예요. 자바스크립트 초보자라면 배열 디스트럭처링이 낯설 수 있어요. 쉽게 말하면, [a, b] = [1, 2]처럼 배열을 풀어서 변수에 할당하는 거예요. useState를 쓰면 const [count, setCount] = useState(0);처럼 돼요. 여기서 count는 초기값 0인 상태, setCount는 count를 바꾸는 함수예요.

왜 useState가 중요한가요? React는 상태가 바뀔 때마다 컴포넌트를 다시 렌더링하거든요. 클래스 컴포넌트의 this.state나 setState보다 훨씬 간단해요. 비교해보면, 클래스 방식은 보일러플레이트 코드가 많아서 초보자가 실수하기 쉽지만, useState는 한 줄로 끝나요. 실제 수치로 보면, 간단한 카운터 앱에서 클래스 방식은 10줄 이상 필요하지만, useState는 5줄 만에 구현돼요.

배경 지식으로, useState는 함수형 컴포넌트 안에서만 써야 해요. 클래스 컴포넌트에서는 안 되고, 커스텀 훅으로 확장할 수 있어요. 예를 들어, useCounter라는 커스텀 훅을 만들어 여러 곳에서 재사용할 수 있죠. 이걸 모르면 코드가 중복되기 쉽지만, 이해하면 효율적이에요. 초보 팁: VS Code에서 React 확장팩을 설치하면 useState 자동완성이 돼서 편해요. 이 개념만 잡으면 React의 70%는 이해한 거나 다름없어요.

더 깊게 들어가보죠. useState의 초기값은 첫 렌더링 때만 계산돼요. 만약 초기값이 복잡한 계산이라면 useMemo 같은 걸 써야 하지만, 초보 단계에선 상수나 간단 객체로 충분해요. 예시로, 사용자 이름 상태를 관리할 때 const [name, setName] = useState(''); 이렇게 하면 빈 문자열로 시작해요. 입력 필드에서 onChange로 setName(e.target.value) 하면 실시간 업데이트돼요.

useState와 비슷한 useReducer는 복잡한 상태 로직에 쓰이는데, useState는 단순 업데이트에 최적화됐어요. 비교 분석: useState는 1:1 매핑(상태 하나당 setter 하나), useReducer는 액션 객체로 여러 상태를 한 번에 관리해요. 초보자라면 useState부터 익히는 게 좋아요. 왜냐하면 80%의 경우가 단순 상태라서요. 이 기본 개념을 알면, 다음 예시로 넘어가기 쉽겠네요. React 문서를 보면서 직접 타이핑해보세요. 코드가 눈에 그려지면 자바스크립트 실력이 업그레이드되는 기분이 들 거예요.

useState 실제 사용 예시

이제 useState를 실제 코드로 써보는 거예요. 영상에서처럼 간단한 카운터 앱을 만들어 볼게요. 처음 접하시는 분들을 위해 단계별로 설명드릴게요. 먼저, React 프로젝트를 create-react-app으로 만들어요. 터미널에서 npx create-react-app my-app 입력하고, cd my-app 해서 npm start 해요. App.js를 열고 지우고 새로 시작하세요.

기본 예시 코드예요: import React, { useState } from 'react'; function App() { const [count, setCount] = useState(0); return (

구체적 예시로, 입력 폼을 추가해 보죠. const [text, setText] = useState(''); setText(e.target.value)} /> 이렇게 하면 입력할 때마다 text 상태가 바뀌어요. 왜 value={text}를 쓰나요? React가 제어된 컴포넌트로 만들기 위해요. 안 쓰면 입력이 안 돼요. 실전 팁: setText 안에서 e.target.value를 바로 넣으면, 이전 값(count처럼)이 필요 없을 때 편해요.

비교해보니, useState 없이 그냥 변수 쓰면 재렌더링이 안 돼요. 예를 들어 let count = 0; 하면 버튼 누르고도 0으로 고정돼요. useState는 React가 상태 변화를 감지해 화면을 업데이트하거든요. 수치로, 100번 클릭 테스트에서 useState는 매번 정확히 증가하지만, 일반 변수는 0 그대로예요. 이 차이가 React의 매력이에요.

대안으로 객체 상태를 써보죠. const [user, setUser] = useState({ name: '', age: 0 }); 업데이트할 때 setUser({ ...user, name: '홍길동' }); 스프레드 연산자로 이전 상태를 보존해요. 직접 배열 상태라면 const [items, setItems] = useState([]); setItems([...items, '새 아이템']); 이렇게 추가해요. 초보자 실수: setItems(items.push('새')) 하면 안 돼요. push는 원본 배열을 mutate 하거든요. React는 immutable하게 업데이트해야 해요.

실행 팁: CodeSandbox나 StackBlitz 같은 온라인 에디터로 바로 테스트하세요. 로컬 설치 없이 1분 만에 써볼 수 있어요. 이 예시를 따라 치다 보면, useState가 왜 '간단 소개'로 불리는지 알게 돼요. 더 복잡한 예로 TODO 리스트를 해보는 건 다음 단계예요. 코드 복사해서 붙여넣기 말고, 직접 타이핑하세요. 손이 익숙해지면 버그 찾기도 쉬워질 거예요.

useState 공부 팁과 실전 조언

useState를 공부할 때 소스 코드만 봐도 추측할 수 있는 능력을 키우는 게 핵심이에요. 영상처럼, useState가 [상태, setter] 배열을 리턴한다는 걸 알면 코드가 눈에 들어와요. 초보 팁: React DevTools 확장팩 설치하세요. 브라우저에서 상태 변화를 실시간으로 볼 수 있어요. 예를 들어, count가 5로 바뀔 때 왜 재렌더링됐는지 확인할 수 있죠.

주의사항: useState는 컴포넌트 최상위에서만 호출하세요. 조건문이나 루프 안에서는 에러 나요. 왜? React가 훅 호출 순서를 기대하거든요. 실수 예: if (condition) { const [state, setState] = useState(0); } 하면 "훅 규칙 위반" 에러예요. 해결: 조건부 초기값으로 useState(condition ? 0 : ''); 하세요. 이 규칙 지키면 90%의 버그가 사라져요.

실전 조언: 커스텀 훅으로 확장하세요. 예를 들어, useLocalStorage 훅 만들어 상태를 브라우저 저장소에 저장하면, 페이지 새로고침해도 데이터 유지돼요. 코드: function useLocalStorage(key, initial) { const [value, setValue] = useState(() => localStorage.getItem(key) || initial); // ... } 이걸 쓰면 로그인 상태가 영구적이에요. 대안: Redux나 Context API는 useState 여러 개일 때 쓰지만, 초보에선 과해요. useState로 충분해요.

공부 방법: 소스 보면서 패턴 익히기예요. GitHub의 React 예제 리포 봐보세요. 처음엔 이해 안 돼도, "아, [state, setState] 패턴이네" 하며 추측하세요. 자바스크립트 실력이 오르면 풀스택으로 나아가요. 팁: 매일 10분 코딩 챌린지, LeetCode React 문제 풀기. 친구나 커뮤니티에 설명해보세요. 설명할 때 이해가 깊어져요.

주의: 성능 최적화로 useCallback과 함께 쓰면 setter 함수가 재생성 안 돼요. 하지만 초보 단계에선 무시해도 돼요. 이 팁들 따르면 useState가 React의 문이 돼요. 꾸준히 해보세요!