mirabo01 님의 블로그

1. 클라이언트 상태 vs 서버 상태리액트에서 상태는 크게 두 가지로 나뉩니다.구분 설명 예시클라이언트 상태(Client State)컴포넌트 내부에서만 사용하는 값모달 열림 여부, 입력 값서버 상태(Server State)서버로부터 가져온 데이터게시글 목록, 사용자 정보useState나 useReducer는 클라이언트 상태 관리에는 적합하지만,서버 상태 관리에는 한계가 있습니다.왜냐하면 서버 데이터는 비동기적이며, 여러 소스에서 동시에 바뀔 수 있기 때문입니다.이를 효율적으로 관리하기 위해 등장한 라이브러리가 바로 React Query입니다.2. React Query란?React Query는 서버 데이터 관리에 특화된 라이브러리입니다.비동기 데이터 fetching, 캐싱, 리페칭(refetch), 동기화..

1. 왜 상태 관리가 필요한가?리액트에서 작은 컴포넌트를 만들 때는 useState 하나면 충분합니다.하지만 앱이 커지면 여러 컴포넌트가 같은 데이터를 공유해야 하는 상황이 생깁니다.예를 들어,로그인 정보다크모드 여부장바구니 목록사용자 프로필이런 값들은 페이지 곳곳에서 사용되므로,단순히 props로 전달하기에는 너무 복잡해집니다.이럴 때 전역 상태 관리(Global State Management) 도구가 필요합니다.2. 상태 관리의 발전 과정리액트의 상태 관리는 크게 3단계로 발전해왔습니다.단계 사용 방식 예시1단계useState, useContext간단한 앱2단계Redux복잡한 앱, 예측 가능한 상태3단계Recoil, Zustand 등간결하고 효율적인 대안각 도구는 사용하는 목적과 철학이 다릅니다.이제..

1. 라우팅이란 무엇인가?웹 애플리케이션에서 “라우팅(Routing)”이란 URL에 따라 다른 화면을 보여주는 기술을 말합니다.전통적인 웹에서는 사용자가 페이지를 클릭할 때마다 서버가 HTML 파일을 새로 보내주지만,리액트는 SPA(Single Page Application) 방식이므로 한 개의 페이지에서 URL만 바꿔가며 화면을 교체합니다.이 과정을 도와주는 라이브러리가 바로 React Router입니다.2. React Router 설치리액트 라우터는 현재 react-router-dom 패키지로 제공됩니다.npm install react-router-dom설치 후, 프로젝트 내에서 다음과 같이 불러올 수 있습니다.import { BrowserRouter, Routes, Route } from 'reac..

1. 리액트의 렌더링 원리 간단 복습리액트는 상태(state) 혹은 props가 변경되면 해당 컴포넌트와 자식 컴포넌트를 다시 렌더링합니다.이건 기본적으로 좋은 구조지만, 불필요한 렌더링이 많아지면 성능 저하로 이어집니다.예를 들어, 아래 코드를 살펴봅시다.function Parent() { const [count, setCount] = useState(0); return ( 클릭 횟수: {count} setCount(count + 1)}>+ );}function Child() { console.log('Child 렌더링됨'); return 자식 컴포넌트;}버튼을 클릭할 때마다 Parent의 상태가 바뀌기 때문에,Child도 불필요하게 계속 렌더링됩니..

1. 상태 끌어올리기란 무엇인가?리액트를 사용하다 보면 여러 컴포넌트가 같은 데이터를 공유해야 하는 상황이 자주 생깁니다.예를 들어,형제 컴포넌트 간에 입력값을 공유하거나상위 컴포넌트에서 하위 여러 컴포넌트로 동일한 데이터를 전달해야 할 때가 그렇습니다.이때 가장 기본적인 접근법이 바로 상태 끌어올리기 (Lifting State Up) 입니다.즉, 공통으로 사용하는 데이터를 상위 컴포넌트의 state로 옮기고,그 데이터를 props로 하위 컴포넌트에 전달하는 방식입니다.2. 왜 상태를 끌어올려야 하는가?리액트의 데이터 흐름은 단방향(one-way) 입니다.즉, 부모 → 자식으로만 데이터가 전달됩니다.하지만 다음과 같은 상황을 생각해봅시다.function TemperatureInput({ label, va..

1. Hooks란 무엇인가?리액트 16.8 버전부터 등장한 **Hooks(훅)**은기존 클래스형 컴포넌트에서만 가능했던 기능(상태 관리, 생명주기 제어 등)을함수형 컴포넌트에서도 사용할 수 있게 해주는 기능입니다.과거에는 리액트에서 상태를 다루려면 반드시 클래스형 컴포넌트를 써야 했습니다.class Counter extends React.Component { state = { count: 0 }; render() { return ( 현재 카운트: {this.state.count} this.setState({ count: this.state.count + 1 })}> +1 ); }}하지만 Hooks가 등장하면서 ..

1. 컴포넌트 구조화의 필요성리액트의 가장 큰 장점 중 하나는 **컴포넌트 기반 구조(Component-Based Architecture)**입니다.즉, 화면을 여러 개의 작은 조각으로 나누어 각각 독립적으로 관리할 수 있다는 뜻입니다.예를 들어, 블로그 게시글 화면을 생각해봅시다.하나의 페이지 안에는 다음과 같은 구성 요소가 있을 수 있습니다.헤더(Header)게시글 내용(PostContent)댓글 목록(CommentList)댓글 입력창(CommentForm)이 모든 것을 하나의 파일에서 관리한다면 코드가 길어지고 복잡해집니다.하지만 리액트에서는 이 각각을 독립된 컴포넌트로 분리할 수 있습니다.function Header() { return 블로그 제목;}function PostContent() { ..

1. Props와 State란 무엇인가?리액트를 배우다 보면 가장 자주 등장하는 단어가 Props와 State입니다.이 둘은 리액트에서 데이터를 관리하고 전달하는 핵심 개념으로,컴포넌트 간의 데이터 흐름을 이해하려면 반드시 알아야 하는 부분입니다.간단히 말하자면 이렇습니다.Props: 부모 컴포넌트가 자식 컴포넌트로 데이터를 “전달”할 때 사용State: 컴포넌트 내부에서 스스로 관리하는 데이터즉, Props는 외부에서 주입되는 데이터,State는 내부에서 변화하는 데이터라고 보면 됩니다.2. Props의 개념과 사용법Props는 "Properties"의 줄임말로,부모 컴포넌트가 자식 컴포넌트에게 값을 넘길 때 사용합니다.예를 들어, 아래와 같은 구조를 생각해봅시다.function Welcome(prop..

1. 리액트란 무엇인가?웹페이지가 정적인 시절에는 HTML과 CSS로만도 충분했습니다.하지만 요즘은 버튼을 누를 때마다 화면이 바뀌고, 데이터를 불러오고,심지어 페이지 전체가 새로고침 없이 움직이죠.이런 동적인 웹 인터페이스를 효율적으로 관리하기 위해 등장한 라이브러리가 바로 React.js입니다.React는 **페이스북(현 Meta)**에서 개발한 UI 라이브러리로,“화면의 상태(state)에 따라 UI를 자동으로 업데이트”해주는 역할을 합니다.기존의 JavaScript에서는 화면을 바꿀 때마다document.getElementById() 같은 코드로 직접 DOM을 수정해야 했습니다.이 방식은 코드가 많아질수록 유지보수가 어려워집니다.React는 이런 문제를 해결하기 위해 Virtual DOM이라는 개..

좋아. 이제 이번 편은 시리즈의 마지막을 장식할 **‘프론트엔드 성능 아키텍처 총정리’**야.그동안 다뤄온 코드, 렌더링, 시각적 튜닝, 네트워크, 모니터링을하나의 완성된 시스템 관점에서 엮어보자.이건 단순히 “어떻게 빠르게 만들까?”가 아니라,“빠른 상태를 지속적으로 유지할 수 있는 구조는 어떻게 설계할까?” 에 초점을 둔다.1. 성능은 ‘기술’이 아니라 ‘구조’다대부분의 프로젝트가 초기에 빠르다가운영 몇 달 지나면 점점 무거워지는 이유는 명확하다.성능을 “한 번 튜닝하는 일회성 작업” 으로 보기 때문이다.하지만 진짜 중요한 건,성능이 유지되도록 구조를 설계하는 것.이건 “잘 만든 코드”가 아니라 “잘 만들어진 시스템”에서 온다.2. 전체 구조를 4단계로 나누어 설계하라① 렌더링 계층→ React / ..