<LG CNS 5기> 7일차 TIL : React 핵심 상태 관리와 가상 DOM 및 Hooks 매커니즘

학습일자 : 2026.05.27

 

🧩 1. 리액트 핵심 개념 및 코드 예시

 

1) Elements (엘리먼트)

• 정의: 리액트 앱의 가장 작은 빌딩 블록으로, "화면에 표시될 내용을 기술(Description)하는 순수한 자바스크립트 객체"

// 💡 이것이 바로 리액트 엘리먼트
// 브라우저에 직접 그려지는 실제 HTML 태그가 아니라, 화면을 어떻게 그릴지 정의한 JS 객체
const element = <h1 className="greeting">안녕하세요, 리액트!</h1>;

export default function App() {
  return element; // 가상 DOM을 거쳐 실제 DOM으로 변환되어 화면에 렌더링됨
}

 

2) Event Handling (이벤트 처리)

• 카멜 케이스(CamelCase)를 사용. (예: onclick ➡️ onClick, onchange ➡️ onChange)
• JSX 내부에서 이벤트 핸들러를 전달할 때는 문자열이 아닌 함수 자체(레퍼런스)를 전달. (onClick={handler})

const EventExample = () => {
    // 💡 이벤트가 발생했을 때 실행될 핸들러 함수 자체를 정의
    const handleAlert = () => {
        alert('버튼이 클릭되었습니다!');
    };

    return (
        <div>
            {/* ❌ HTML 방식: onClick="handleAlert()" (문자열 전달) */}
            {/* ⭕ React 방식: onClick={handleAlert} (카멜케이스 + 함수 레퍼런스 전달) */}
            <button onClick={handleAlert}>클릭하세요</button>
        </div>
    );
};

---

🏗️ 2. Hooks 핵심 기능 및 개별 실습 코드 분석

 

1) useState 실습 코드 (EventPage.jsx)

• 개념: 컴포넌트에 상태 변수를 주입하여 동적인 데이터 변경 및 화면 갱신(리렌더링)을 유발하는 가장 대표적인 Hook
• 불변성 법칙: id와 password 같은 상태값은 직접 수정할 수 없으며, 반드시 setId, setPassword라는 상태 변경 함수를 통해서만 수정해야 함

import Button from 'react-bootstrap/Button';
import { useState } from 'react';

const EventPage = () => {
    const data = { id: 'jslim', password: 'jslim' };

    // 💡 useState를 사용하여 컴포넌트 내부에 상태 변수 주입
    const [id, setId] = useState(data.id);
    const [password, setPassword] = useState(data.password);

    const handler = (id, passwd) => {
        console.log(`debug >>>> ${id} , ${passwd}`);
    };

    return (
        <div>
            <div>
                <label>아이디</label>
                {/* 인풋 값이 바뀔 때마다 상태 변경 함수(setId)를 통해 state 업데이트 */}
                <input type="text" value={id} onChange={(e) => setId(e.target.value)} />
            </div>
            <div>
                <label>패스워드</label>
                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </div>
            <Button onClick={() => handler(id, password)}>로그인</Button>
        </div>
    );
};

export default EventPage;

 

2) useEffect 실습 코드 (LifecyclePage.jsx)

• 개념: 컴포넌트가 화면에 나타날 때(Mount), 사라질 때(Unmount), 혹은 특정 데이터가 업데이트될 때 Side Effect(데이터 페칭, 타이머, 수동 DOM 조작 등)를 처리하는 Hook

import { useState, useEffect } from 'react';

const LifecyclePage = () => {
    const [count, setCount] = useState(0);

    // 💡 useEffect를 활용한 라이플사이클 및 Side Effect 처리
    useEffect(() => {
        // 1. Mount 시점 및 의존성 배열([count]) 내 데이터가 업데이트될 때마다 실행됨
        console.log(`[Effect] 화면이 그려지거나 count가 변했습니다. 현재 값: ${count}`);

        // 2. Unmount 시점 혹은 다음 Effect가 실행되기 직전에 실행되는 정리(Clean-up) 함수
        return () => {
            console.log(`[Clean-up] 다음 변경 전 혹은 컴포넌트가 사라지기 전 청소 작업 수행`);
        };
    }, [count]); // 💡 의존성 배열: 여기에 작성된 변수가 바뀔 때만 useEffect 내부 코드가 실행됨

    return (
        <div>
            <p>실시간 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>증가</button>
        </div>
    );
};

export default LifecyclePage;

---

 

 

 

🧩 json-server 

 

1. 개념 

• 가짜 백엔드 API 서버: 실제 백엔드가 없는 개발 초기에, db.json 이라는 텍스트 파일 하나만 가지고 진짜 데이터베이스가 있는 것처럼 조회(GET), 생성(POST), 수정, 삭제 테스트를 할 수 있게 해주는 라이브러리

---

2. 설치 방법 (터미널 입력)

npm install -g json-server

(※ Mac에서 권한 에러 발생 시 앞에 sudo 를 붙여 실행)

---

3. 사용 방법 

• 1단계 (데이터 준비): 프로젝트 최상위에 db.json 파일을 만들고 아래 형식으로 저

{
  "books": [
    { "id": 1, "title": "리액트 장인", "price": "10,000원" }
  ]
}

• 2단계 (서버 실행): 리액트 포트(3000)와 겹치지 않게 4000번 포트로 가짜 서버를 켬

json-server --watch db.json --port 4000

• 3단계 (리액트 연결): 컴포넌트 내부에서 제공되는 주소로 데이터를 주고받는다

fetch('<http://localhost:4000/books>')

import Button from 'react-bootstrap/Button' ;
import 'bootstrap/dist/css/bootstrap.min.css' ;

import api from '../../api/axios';

const HttpPage = () => {
    // // script
    const dataHandler = async () => {
        console.log(`debug >>>> axios 이용한 데이터 통신`);
        // // axios 객체를 이용한 데이터 통신 get, post, put, delete
        await api.get('blogs')
            .then((res) => {
                console.log('성공 주입 데이터:', res.data);
            })
            .catch((err) => {
                console.error('통신 에러 발생:', err);
            }) ;
    }

    // // template UI
    return (
        <div>
            <Button
                variant='danger'
                onClick={dataHandler}>json-server</Button>
        </div>
    );
};

export default HttpPage ;

 

 

📝 오늘의 회고 

화면에 보일 요소를 객체로 기술하는 Elements의 개념과 가상 DOM 구조를 이해하고, 함수형 컴포넌트에서 상태와 생명주기를 유기적으로 관리하기 위한 Hooks(useState, useEffect) 메커니즘을 이해했다. 특히 일반 변수 스코프와 달리 상태(State)는 불변성 원칙에 따라 직접 수정이 불가능하며, 반드시 상태 변경 함수를 거쳐야만 리액트 엔진이 리렌더링을 트리거한다는 핵심 제어 규칙을 체득했다. 이를 바탕으로 사용자의 입력 이벤트(onChange)와 제어 흐름(onClick)을 상태 공간에 실시간으로 동기화하는 단방향/양방향 데이터 핸들링 컴포넌트를 구현함으로써 화면의 데이터 흐름을 안전하고 예측 가능하게 제어하는 역량을 확립했다.