# TIL - 2026.08.06

📌 오늘 학습한 주제

• React Router Dom (BrowserRouter, Routes, Route)을 활용한 애플리케이션 전체 라우팅 구조 설계 (ToyApp.jsx)
• React State 변경 함수(setFlag)를 Props로 전달하여 부모 상태를 변경하는 조건부 로그인/로그아웃 버튼 컴포넌트 구현 (LoginButton.jsx, LogoutButton.jsx)
• Styled Components 기반의 재사용 가능한 Custom UI 컴포넌트 연동

---

💡 오늘 배운 것 — 나만의 언어로

① 오늘의 목표

• React Router를 사용해 사용자(User) 및 블로그(Blog) 서비스의 전체 URL 경로 체계를 구축하고, Props로 상태 변경 함수를 전달하여 로그인 상태를 제어하는 버튼 컴포넌트 구조 이해하기

② 학습할 내용

• 라우팅 구조 설계 (ToyApp.jsx): <BrowserRouter> 및 <Routes>를 통해 회원가입(/), 로그인(/users/signIn), 블로그 목록(/blogs/index), 작성(/blogs/write), 상세 조회(/blogs/read/:blogId)로 이어지는 멀티 페이지 라우팅 체계를 구성했다.
• 부모 State 변경 함수 전달 (LoginButton.jsx, LogoutButton.jsx): 상위 컴포넌트의 상태 변경 함수(setFlag)를 props.isLogin으로 수신한 후, 버튼 클릭 핸들러 내부에서 호출하여 로그인 상태를 true 또는 false로 상위 컴포넌트에 반영하는 단방향 데이터 흐름을 다루었다.
• 커스텀 Styled Button 활용: 공통 스타일 버튼 컴포넌트(<Button />)를 재사용하여 코드의 중복을 줄이고 일관된 UI 스타일을 적용했다.

---

💻 오늘 핵심 코드

1. 라우팅 구조 구성 (ToyApp.jsx)

import { BrowserRouter, Route, Routes } from "react-router-dom";

import BlogIndexPage from "./features/blog/page/BlogIndexPage";
import BlogReadPage from "./features/blog/page/BlogReadPage";
import BlogWritePage from "./features/blog/page/BlogWritePage";
import SignInPage from "./features/user/page/SignInPage";
import SignUpPage from "./features/user/page/SignUpPage";

const ToyApp = () => {
    return (
        <BrowserRouter>
            <Routes>
                {/* user 라우트 */}
                <Route path="/" element={<SignUpPage />} />
                <Route path="/users/signIn" element={<SignInPage />} />

                {/* blog 라우트 */}
                <Route path="/blogs/index" element={<BlogIndexPage />} />
                <Route path="/blogs/write" element={<BlogWritePage />} />
                <Route path="/blogs/read/:blogId" element={<BlogReadPage />} />
            </Routes>
        </BrowserRouter>
    );
}

export default ToyApp;

2. 로그인 상태 변경 버튼 컴포넌트 (LoginButton.jsx)

import Button from "../styled/Button";

const LoginButton = (props) => {
    // Props로 전달받은 setFlag 함수를 통해 상태를 true(로그인 상태)로 변경
    const loginHandler = (setFlag) => {
        setFlag(true);
    }

    return (
        <div>
            <Button 
                title={`로그인`}
                onClick={() => loginHandler(props.isLogin)} 
            />
        </div>
    );
}

export default LoginButton;

3. 로그아웃 상태 변경 버튼 컴포넌트 (LogoutButton.jsx)

import Button from "../styled/Button";

const LogoutButton = (props) => {
    // Props로 전달받은 setFlag 함수를 통해 상태를 false(로그아웃 상태)로 변경
    const logoutHandler = (setFlag) => {
        setFlag(false);
    }

    return (
        <div>
            <Button 
                title={`로그아웃`}
                onClick={() => logoutHandler(props.isLogin)} 
            />
        </div>
    );
}

export default LogoutButton;

---

🛠️ 실습 / 결과물 & 참고 자료

③ 실습 / 결과물

• 강의 실습코드: ToyApp.jsx, LoginButton.jsx, LogoutButton.jsx 코드를 연동하여, 라우터별 페이지 전환 경로를 등록하고 로그인/로그아웃 컴포넌트 클릭 시 부모 State 상태가 즉시 반영되는 구조 구현.

④ 참고 자료

• React Router Official Docs: React Router v6 Routes & Route 설정
• React Docs: Passing Functions as Props to Child Components

---

🔍 문제와 해결

• 막힌 부분: 자식 컴포넌트(LoginButton, LogoutButton)에서 부모 컴포넌트의 State 상태를 직접 변경할 수 없어 발생하는 데이터 흐름 문제 점검.
• 해결 방법: 부모 컴포넌트에서 useState의 상태 변경 함수(setFlag) 자체를 Props(props.isLogin)로 전달하고, 자식 컴포넌트의 클릭 이벤트 내에서 해당 함수를 실행하여 부모의 상태를 정상적으로 끌어올려(State Lifting) 변경함.

---

🎯 다음에 할 일

• 로그인 상태(isLogin) 값에 따라 컴포넌트를 조건부 렌더링(isLogin ? <LogoutButton /> : <LoginButton />)하는 삼항 연산자 구조 완성하기
• 블로그 상세 조회 페이지에서 :blogId 경로 파라미터를 수신하여 해당 게시글 데이터를 서버에서 불러오는 비동기 로직 추가하기