React State

State란

• 컴포넌트의 상태 데이터를 저장하는 공간
• 컴포넌트에서 값이 바뀔 때마다 자동으로 **리렌더링(다시 실행)**하게 만듦
• React의 데이터 흐름, 화면 업데이트의 핵심

예제로 보는 State 특징

const [name. setName] = useState('data'); // name, setName 은 개발자가 지정 가능

 

• state는 array를 리턴함

index	value	설명
0	현재 상태 name	현재의 value를 읽는 데이터
1	바뀐 name	setName  - 현재의 상태를 변경하는 함수

 

Props와의 차이

구분	Props	State
역할	부모 → 자식 데이터 전달	컴포넌트 내부의 데이터
변경	자식에서 수정 불가	컴포넌트 내부에서 변경 가능
목적	컴포넌트 재사용, 전달	컴포넌트의 동적 변화 관리

 

 

 

 

---

State를 써야 하는 이유

• 일반 변수는 값이 바뀌어도 React가 변화를 감지하지 못함
• 오직 state를 setState로 변경해야 React가 다시 렌더링
• UI = 항상 State 기반

---

State 선언 및 사용법

import { useState } from 'react';

function App() {
  const [mode, setMode] = useState('WELCOME'); // 초기값 설정
  const [id, setId] = useState(null);

  return (
    <Header onChangeMode={() => setMode('WELCOME')} />
    <Nav onChangeMode={(_id) => {
      setMode('READ');
      setId(_id);
    }} />
  );
}

 

• useState : 상태 값 선언
• setMode : 상태 변경 함수
• setState 실행 시 React가 리렌더링 실행

---

예제1: State 없이 작동하지 않는 이유

let mode = 'WELCOME';

<Header onChangeMode={() => {
  mode = 'WELCOME';
}} />
<Nav onChangeMode={() => {
  mode = 'READ';
}} />

• 일반 변수 변경: React가 감지 못해 화면이 갱신 안됨

• 반드시 useState 사용 필요

 

---

예제2: State로 동적 UI

jsx

const [mode, setMode] = useState('WELCOME');
const [id, setId] = useState(null);

<Nav onChangeMode={(_id) => {
  setMode('READ');
  setId(_id);
}} />

• mode, id를 state로 관리
• mode = 화면 구분, id = 선택된 항목
• props와 함께 동작하여 자식 → 부모 → 상태 변경 → 리렌더링

---

React의 데이터, 렌더링, 뷰 연결

구분	React	javascript
데이터	state, props	변수
렌더링	데이터 변경 시 자동	개발자가 수동 호출
뷰(View)	JSX → 가상 DOM → 실제 DOM	직접 DOM 수정
연결	자동	수동

 

React: 데이터(state)만 바꾸면 화면은 알아서 갱신됨

 

 

---

리로드 vs 리렌더링

구분	리로드 (Reload)	리렌더링 (Re-rendering)
발생 조건	브라우저 새로고침	state, props 변경
범위	전체 페이지	변경된 컴포넌트
속도	느림	빠름
상태 유지	X (초기화)	O (state 유지)

 

---

브라우저 그려지는 원리와 React의 Virtual DOM

1. 실제 DOM 조작 → 느림
2. React는 가상 DOM에서 변화 계산 → 실제 DOM에 최소한의 변화만 반영
3. 데이터 → 가상 DOM → 실제 DOM
4. 성능 최적화, 예측 가능한 코드 구조

---

결론

• React에서는 화면의 모든 변화는 state → setState → 리렌더링의 흐름으로만 변경
• 일반 JS처럼 직접 DOM 조작이 아닌, 데이터 변경 = UI 자동 갱신이 원칙
• 이를 통해 예측 가능하고 효율적인 화면 구성이 가능

 

참고

• https://gomgasali.notion.site/03-216c4bc37f978034b10bc630f94d9509?source=copy_link

03. 브라우저가 그려지는 원리와 가상 돔 | Notion

 

참조

- 이고잉 [생활코딩! React 리액트 프로그래밍 ] 책

- [더조은컴퓨터]리액트 주말반