07. State(useState)
1. State란?
State는 컴포넌트가 스스로 관리하는 데이터입니다.
사용자의 동작에 따라 값이 변경되면 React는 화면을 자동으로 다시 렌더링(Rendering)합니다.
예를 들어
좋아요 버튼
메뉴 열기/닫기
예약 입력폼
로그인 여부
다크모드
이러한 값들은 모두 State로 관리합니다.
2. useState란?
React에서는 State를 만들기 위해 useState Hook을 사용합니다.
import { useState } from "react";
기본 사용법
const [count, setCount] = useState(0);
여기서
count : 현재 값(State)
setCount : 값을 변경하는 함수
0 : 초기값
3. State가 필요한 이유
일반 JavaScript에서는 변수를 변경해도 화면은 자동으로 바뀌지 않습니다.
let count = 0;
count++;
값은 바뀌지만 화면은 그대로입니다.
React에서는
setCount(count + 1);
을 실행하면 State가 변경되고 화면이 자동으로 다시 그려집니다.
4. 카운터 예제
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<h2>{count}</h2>
<button
onClick={() => setCount(count + 1)}
>
증가
</button>
</>
);
}
실행 결과
0
↓
1
↓
2
↓
3
버튼을 누를 때마다 화면이 자동으로 변경됩니다.
5. 문자열 State
const [title, setTitle] = useState("동부산CC");
변경
setTitle("EAST COURSE");
화면
동부산CC
↓
EAST COURSE
6. Boolean State
메뉴 열기/닫기에 많이 사용합니다.
const [open, setOpen] = useState(false);
버튼 클릭
setOpen(!open);
결과
false
↓
true
↓
false
이처럼 상태를 토글(Toggle)할 수 있습니다.
7. 객체 State
예약폼에서 자주 사용하는 방식입니다.
const [form, setForm] = useState({
name: "",
phone: "",
});
이름 변경
setForm({
...form,
name: "홍길동",
});
...form은 기존 객체를 복사하고 필요한 값만 변경하는 스프레드 문법입니다.
8. 배열 State
목록을 관리할 때 사용합니다.
const [courses, setCourses] = useState([
"EAST",
"WEST",
]);
추가
setCourses([
...courses,
"VALLEY",
]);
결과
EAST
WEST
VALLEY
9. 동부산CC 예제
좋아요 버튼
const [liked, setLiked] = useState(false);
클릭
<button
onClick={() => setLiked(!liked)}
>
{liked ? "♥" : "♡"}
</button>
결과
♡
↓
♥
10. 예약폼 예제
const [name, setName] = useState("");
입력창
<input
value={name}
onChange={(e) =>
setName(e.target.value)
}
/>
사용자가 입력할 때마다 State가 변경됩니다.
11. 모달 열기
const [modal, setModal] = useState(false);
열기
setModal(true);
닫기
setModal(false);
조건부 렌더링
{
modal && <CourseModal />
}
12. State 변경 시 주의사항
잘못된 방법
count++;
또는
liked = true;
이렇게 하면 React는 변경을 감지하지 못합니다.
반드시
setCount(count + 1);
또는
setLiked(true);
처럼 setState 함수를 사용해야 합니다.
13. State와 Props 비교
Props State
부모가 전달 컴포넌트가 직접 관리
읽기 전용 변경 가능
출력용 데이터 변경되는 데이터
수정 불가 setState로 변경
예를 들어
코스 이름 → Props
좋아요 → State
예약 입력값 → State
로그인 여부 → State
14. React 데이터 흐름
State 생성
↓
사용자 클릭
↓
setState()
↓
State 변경
↓
React 렌더링
↓
화면 자동 변경
React는 State가 변경될 때 필요한 부분만 다시 렌더링하여 화면을 업데이트합니다.
정리
State는 React 컴포넌트 내부에서 관리하는 데이터이며, useState를 사용하여 생성합니다.
State는 사용자의 동작에 따라 변경될 수 있으며, 값을 변경할 때는 반드시 setState 함수를 사용해야 합니다.
State가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 화면을 자동으로 업데이트합니다.
동부산CC 프로젝트에서는 좋아요 버튼, 예약 입력폼, 모달 열기/닫기, 모바일 메뉴 등 사용자의 상호작용이 필요한 대부분의 기능을 State로 관리할 수 있습니다.
1. State란?
State는 컴포넌트가 스스로 관리하는 데이터입니다.
사용자의 동작에 따라 값이 변경되면 React는 화면을 자동으로 다시 렌더링(Rendering)합니다.
예를 들어
좋아요 버튼
메뉴 열기/닫기
예약 입력폼
로그인 여부
다크모드
이러한 값들은 모두 State로 관리합니다.
2. useState란?
React에서는 State를 만들기 위해 useState Hook을 사용합니다.
import { useState } from "react";
기본 사용법
const [count, setCount] = useState(0);
여기서
count : 현재 값(State)
setCount : 값을 변경하는 함수
0 : 초기값
3. State가 필요한 이유
일반 JavaScript에서는 변수를 변경해도 화면은 자동으로 바뀌지 않습니다.
let count = 0;
count++;
값은 바뀌지만 화면은 그대로입니다.
React에서는
setCount(count + 1);
을 실행하면 State가 변경되고 화면이 자동으로 다시 그려집니다.
4. 카운터 예제
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<h2>{count}</h2>
<button
onClick={() => setCount(count + 1)}
>
증가
</button>
</>
);
}
실행 결과
0
↓
1
↓
2
↓
3
버튼을 누를 때마다 화면이 자동으로 변경됩니다.
5. 문자열 State
const [title, setTitle] = useState("동부산CC");
변경
setTitle("EAST COURSE");
화면
동부산CC
↓
EAST COURSE
6. Boolean State
메뉴 열기/닫기에 많이 사용합니다.
const [open, setOpen] = useState(false);
버튼 클릭
setOpen(!open);
결과
false
↓
true
↓
false
이처럼 상태를 토글(Toggle)할 수 있습니다.
7. 객체 State
예약폼에서 자주 사용하는 방식입니다.
const [form, setForm] = useState({
name: "",
phone: "",
});
이름 변경
setForm({
...form,
name: "홍길동",
});
...form은 기존 객체를 복사하고 필요한 값만 변경하는 스프레드 문법입니다.
8. 배열 State
목록을 관리할 때 사용합니다.
const [courses, setCourses] = useState([
"EAST",
"WEST",
]);
추가
setCourses([
...courses,
"VALLEY",
]);
결과
EAST
WEST
VALLEY
9. 동부산CC 예제
좋아요 버튼
const [liked, setLiked] = useState(false);
클릭
<button
onClick={() => setLiked(!liked)}
>
{liked ? "♥" : "♡"}
</button>
결과
♡
↓
♥
10. 예약폼 예제
const [name, setName] = useState("");
입력창
<input
value={name}
onChange={(e) =>
setName(e.target.value)
}
/>
사용자가 입력할 때마다 State가 변경됩니다.
11. 모달 열기
const [modal, setModal] = useState(false);
열기
setModal(true);
닫기
setModal(false);
조건부 렌더링
{
modal && <CourseModal />
}
12. State 변경 시 주의사항
잘못된 방법
count++;
또는
liked = true;
이렇게 하면 React는 변경을 감지하지 못합니다.
반드시
setCount(count + 1);
또는
setLiked(true);
처럼 setState 함수를 사용해야 합니다.
13. State와 Props 비교
Props State
부모가 전달 컴포넌트가 직접 관리
읽기 전용 변경 가능
출력용 데이터 변경되는 데이터
수정 불가 setState로 변경
예를 들어
코스 이름 → Props
좋아요 → State
예약 입력값 → State
로그인 여부 → State
14. React 데이터 흐름
State 생성
↓
사용자 클릭
↓
setState()
↓
State 변경
↓
React 렌더링
↓
화면 자동 변경
React는 State가 변경될 때 필요한 부분만 다시 렌더링하여 화면을 업데이트합니다.
정리
State는 React 컴포넌트 내부에서 관리하는 데이터이며, useState를 사용하여 생성합니다.
State는 사용자의 동작에 따라 변경될 수 있으며, 값을 변경할 때는 반드시 setState 함수를 사용해야 합니다.
State가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 화면을 자동으로 업데이트합니다.
동부산CC 프로젝트에서는 좋아요 버튼, 예약 입력폼, 모달 열기/닫기, 모바일 메뉴 등 사용자의 상호작용이 필요한 대부분의 기능을 State로 관리할 수 있습니다.
#07. State(useState)