[DevCourse] 생성형 AI 활용 백엔드 데브코스 13일차

지난 12일 차 수업은 건강 문제로 수업에 참여하지 못했지만,

다행히 오늘 수업 시작 전 지난 시간 개념을 다시 복습하는 시간이 있어 큰 무리 없이 따라갈 수 있었다.

React의 Hook 개념과 Router 구조를 배우고, Todo 리스트와 SPA를 직접 구현하는 실습을 하면서

조금씩 React의 실전 활용 방식이 감 잡히기 시작했다.

---

📌 오늘 배운 주요 내용 정리

1. React의 다양한 Hook 활용법

• useState와 useEffect는 이제 익숙해졌고,
• 오늘은 여기에 더해 useReducer, useMemo, useCallback, useRef 같은
• 실전에서의 상태 관리와 최적화를 위한 고급 Hook을 배웠다.

특히 useReducer는 상태가 여러 개이거나 복잡한 폼 로직에 유용하다는 걸,

직접 예제를 따라 하며 체감할 수 있었다.

 

2. React Router를 이용한 SPA 구성 실습

• react-router-dom을 이용해서 Route 컴포넌트를 만들고,
• Home, About 페이지를 연결해 보며
• 한 페이지에서 화면을 전환하는 SPA 구조를 구현했다.

JSX로 라우팅을 설정하는 방식이 처음엔 어색했지만,

렌더링 없이 화면이 전환되는 부드러운 흐름을 직접 구현해 보니 왜 이렇게 쓰는지 확실히 이해됐다.

---

🧪 예제 실습 – Todo 페이지와 SPA 페이지 만들기

처음에는 어려웠지만, 예제를 따라 하며 Hook 패턴과 상태 흐름을 익히는 과정이 유익했다.

• useState로 입력값을 관리하고
• useRef로 고유 ID를 저장하고
• useReducer로 todo 항목을 추가/삭제하며
• useCallback과 useMemo로 성능 최적화까지 적용해 봤다.

 

처음엔 코드가 복잡해 보였지만,

하나하나 따라가며 구현해 보니 점점 구조가 눈에 들어오기 시작했다.

---

🧡 느낀 점

오늘은 Hook을 활용해 상태를 관리하고, 컴포넌트를 조합하고, Router로 화면을 나누는 실습을 해보며

단순히 개념을 배우는 것을 넘어서, “내가 뭔가를 직접 만들고 있다”는 실감을 할 수 있었다.

 

특히 Todo 앱을 직접 만들고 동작하는 걸 확인했을 때,

React가 단순한 UI 라이브러리를 넘어서 완성도 높은 웹앱의 뼈대를 구성하는 도구라는 것을 깨달았다.

 

처음엔 낯설고 조금 어려웠지만, 코드를 따라 치고, 패턴을 익히고, 실제로 동작하는 걸 보면서 점점 흥미가 생기고 있다.

이제 React를 활용한 개발이 조금씩 익숙해지고 있는 것 같아 앞으로가 더 기대된다 :)