본문 바로가기

코딩이야기𖦹/React
11

📌 React의 useEffect와 생명주기 비교 정리 React를 학습하면서 가장 혼란스러운 개념 중 하나는 바로useEffect와 클래스형 컴포넌트의 생명주기 함수들이다.useEffect의 다양한 사용 패턴을 알아보고,클래스형 컴포넌트의 생명주기 함수와 어떻게 대응되는지 정리해보고자 한다.🧩 사전지식: React 컴포넌트는 언제 렌더링되는가?React는 상태(state)가 바뀔 때마다 다시 렌더링된다. 다시 말해, setState나 useState의 set함수가 호출되면 해당 컴포넌트는 다시 실행된다.즉, 다음과 같은 흐름을 가진다:컴포넌트가 처음 화면에 나타날 때 → 마운트(Mount)상태가 바뀌어 다시 렌더링될 때 → 업데이트(Update)컴포넌트가 사라질 때 → 언마운트(Unmount)이러한 흐름은 함수형 컴포넌트든, 클래스형 컴포넌트든 동일하다... 2025. 4. 10.
📌 React Router를 활용한 동물 정보 웹 페이지 만들기를 통한 개념 정리 이번 프로젝트는 React Router를 사용하여 동물 정보를 보여주는 웹 페이지를 구현해보는 실습이었다.메인 페이지에서 동물 목록을 보여주고, 클릭하면 상세 정보로 이동하며,검색 기능까지 구현하면서 라우팅에 필요한 여러 개념을 자연스럽게 익힐 수 있었다.아래는 내가 만든 코드 예시를 중심으로, 각 개념을 하나씩 정리해본 것이다.1️⃣ BrowserRouter – 라우팅의 시작React에서 여러 페이지로 이동하려면 BrowserRouter로 애플리케이션을 감싸야 한다.나는 main.jsx 파일에서 이처럼 설정했다.import { createRoot } from 'react-dom/client';import { BrowserRouter } from 'react-router-dom';import App fr.. 2025. 4. 10.
📌 SPA랑 MPA, CSR이랑 SSR 개념 한 번에 정리 해봄 React로 프론트엔드 개발을 공부하면서 자꾸 듣게 되는 용어들이 있다.바로 SPA, MPA, CSR, SSR.처음엔 “뭔 차이야…?” 싶었는데, 알고 보면 웹 구조와 렌더링 방식에 대한 개념 차이였다.이해해두면 프레임워크를 고를 때나 프로젝트 구조를 설계할 때 정말 유용할 것 같아서개념 + 차이점 + 장단점을 한 번 정리해보았다!1️⃣ SPA vs MPA✅ SPA (Single Page Application)SPA는 말 그대로 "단일 페이지 애플리케이션"이다.하나의 HTML 안에서 필요한 화면만 부분적으로 바꾸는 방식으로 동작한다.처음에 한 번만 HTML과 JavaScript 번들을 로드하고,이후에는 페이지 이동이나 인터랙션이 발생하더라도 전체 페이지를 다시 요청하지 않는다.대신, JavaScript가.. 2025. 4. 7.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바