[React] 프로젝트 Production 빌드하기 정리

React로 개발한 프로젝트를 최종 사용자에게 배포하려면 개발 모드가 아닌 "Production 모드"로 빌드하는 과정이 필요하다. 이 글에서는 mini-blog 프로젝트를 기준으로 production 빌드를 실행하고 로컬 서버에서 확인한 전체 과정을 정리한다.1. Production 빌드란?React 개발 환경에서는 기본적으로 개발 서버(npm start)를 통해 프로젝트를 실행한다. 그러나 실제 배포 환경에서는 다음과 같은 이유로 production 빌드가 필요하다:코드를 압축하고 최적화하여 파일 크기를 줄인다불필요한 개발 도구와 로그를 제거한다브라우저에서 더 빠르게 로딩되도록 번들링한다HTML, CSS, JS 등 정적 파일 형태로 결과물을 만들어낸다2. 빌드 명령어 실행아래 명령어를 프로젝트 루트에..

2025.05.28

[React] 컴포넌트 설계 - Composition vs Inheritance & Context API

이번에는 리액트 컴포넌트 설계 철학 중 하나인 합성(Composition) 과 상속(Inheritance) 에 대한 개념과 함께, Context API 를 통한 전역 상태 관리 방법까지 정리해보았다. Composition vs Inheritance리액트는 상속보다 합성을 권장한다. 다시 말해, 하나의 컴포넌트를 확장하기 위해 상속하는 방식보다는 여러 개의 컴포넌트를 조합해서 더 복잡한 UI를 구성하는 방식을 지향한다.Composition (합성)합성은 컴포넌트를 props.children 또는 특정 props를 통해 다른 컴포넌트 내부에 포함시키는 방식이다.function Card(props) { return {props.children};}function Welcome() { return ( ..

2025.05.21

[React] 폼(Form)과 상태 공유 개념 정리

이번 글에서는 리액트에서 사용자 입력을 처리하는 핵심 기능인 폼(Form) 과 컴포넌트 간 상태를 공유하는 방식인 상태 끌어올리기(Lifting State Up), 공유 상태(Shared State) 개념까지 정리해보았다. 실제 프로젝트에서는 사용자 입력과 컴포넌트 간 데이터 흐름이 필수적이기 때문에 꼭 익혀야 할 개념들이다.Form과 Controlled Component리액트에서의 폼 처리는 일반 HTML 방식과 다르게, 입력값을 상태(state) 로 관리하는 것이 특징이다. 이 방식을 Controlled Component라고 한다.function NameForm() { const [name, setName] = useState(""); const handleChange = (e) => { s..

2025.05.14

[React] 리스트 렌더링과 Key의 역할

이번 글에서는 리액트에서 여러 개의 데이터를 반복적으로 렌더링할 때 사용하는 리스트와 key 개념에 대해 정리해보았다. 실제 UI에서는 목록 형태로 데이터를 표현하는 일이 많기 때문에 리스트 렌더링을 잘 이해하고 있어야 한다.List와 KeyReact에서 리스트(List) 는 배열 형태의 데이터를 이용해 여러 컴포넌트를 반복적으로 렌더링하는 방식이다. 이때 중요한 것이 바로 key 속성이다.const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => {number});이렇게 작성하면 listItems에는 태그 5개가 담긴 배열이 된다. 이 배열을 JSX 안에서 그대로 렌더링하면 된다.return {listItems};여러 개의 Co..

2025.05.07

[React] 이벤트 처리와 조건부 렌더링

이번에는 리액트에서 사용자 인터랙션을 다루는 핵심 기능인 이벤트 처리(Handling Events) 와 UI를 상황에 따라 다르게 표현하는 조건부 렌더링(Conditional Rendering) 에 대해 정리했다. 실제로 버튼 클릭, 입력값 변경 등 사용자와 상호작용할 때 매우 자주 사용하는 개념들이다.Handling Events - 이벤트 처리Event의 정의 및 다루기이벤트(Event)는 사용자로부터 발생하는 상호작용을 의미한다. 예를 들어 버튼 클릭, 키보드 입력, 마우스 이동 등이 모두 이벤트에 해당된다.리액트에서는 DOM 이벤트를 처리할 때 HTML과 약간 다른 방식으로 이벤트 핸들러를 설정한다.camelCase를 사용한다 (예: onClick, onChange)문자열이 아닌 함수를 핸들러로 전..

2025.04.30

[React] Hooks 개념 정리

리액트에서 함수형 컴포넌트를 본격적으로 사용할 수 있게 만든 것이 바로 Hooks이다. Hooks는 리액트 16.8부터 도입되었고, 지금은 함수형 컴포넌트의 기본 문법처럼 자리 잡았다.Hooks의 개념과 useState, useEffectHooks란?Hooks는 함수형 컴포넌트에서도 상태 관리와 생명주기 관련 로직을 사용할 수 있게 해주는 기능이다. 원래는 클래스형 컴포넌트에서만 가능했던 기능을 함수형에서도 사용할 수 있게 해준다.useState컴포넌트 내부에서 상태를 선언하고, 그 값을 변경할 수 있도록 해주는 Hook이다.import { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return..

2025.04.23

[React] State와 Lifecycle 개념 정리

리액트의 컴포넌트 구조를 이해했다면, 이제 그 안에서 어떻게 동적인 데이터를 다루는지를 알아야 한다. 그 중심에 있는 개념이 바로 state(상태) 와 lifecycle(생명주기) 이다. 이번 글에서는 이 두 가지에 대해 정리해본다.State와 Lifecycle의 정의State란?state는 컴포넌트 내부에서 관리되는 데이터로, UI에 영향을 주는 값이다. props는 외부에서 전달되는 값이라면, state는 컴포넌트 자체가 소유하고 변경할 수 있는 값이다. state가 변경되면 컴포넌트는 자동으로 다시 렌더링된다.리액트에서는 useState라는 훅을 통해 state를 사용할 수 있다.import { useState } from 'react';function Counter() { const [count..

2025.04.16

[React] Components와 Props 개념 정리

이번에는 리액트의 핵심 개념 중 하나인 컴포넌트(Components) 와 프롭스(Props) 에 대해서 정리해보았다. 실제 리액트 프로젝트에서 UI를 구성할 때 가장 많이 사용하는 구조이기 때문에, 이 부분을 정확하게 이해하는 것이 중요하다.Components와 Props의 정의Component(컴포넌트) 는 리액트에서 UI를 구성하는 최소 단위이며, 재사용 가능한 자바스크립트 함수이다. 간단히 말하면, 특정 기능이나 UI를 담당하는 코드 블록이라고 생각하면 된다.function Welcome(props) { return Hello, {props.name};}위 예시처럼 함수형 컴포넌트를 선언하고, 특정 데이터를 넘겨받아 UI를 출력할 수 있다.Props(프롭스) 는 컴포넌트 간 데이터를 전달할 때 사..

2025.04.09

[React] JSX와 Elements 개념 정리

이번에 리액트를 활용한 프로젝트를 진행하기로 하면서, 프론트엔드의 기본 개념들도 어느 정도는 이해하고 있어야겠다고 느꼈다. 특히 JSX와 Elements는 리액트에서 가장 기초적인 부분이라서 먼저 정리해보았다.JSX란 무엇인가?JSX는 JavaScript XML의 약자로, 자바스크립트 코드 안에서 HTML 태그를 작성할 수 있게 해주는 문법이다. 겉으로 보기에는 HTML처럼 보이지만 실제로는 자바스크립트 문법 안에서 동작한다. 리액트에서는 이 JSX 문법을 사용해서 컴포넌트를 구성하게 된다.예를 들면:const element = Hello, world!;위 코드는 HTML처럼 보이지만, 브라우저가 바로 이해할 수 있는 건 아니고, Babel이라는 트랜스파일러가 이 코드를 다음과 같이 바꿔준다:const ..

2025.04.02

[React와 Typescript] 종속성, JSX, MUI 문제들 해결

React 프로젝트에서 겪을 수 있는 주요 문제와 해결 방법React와 TypeScript, 그리고 MUI(Material-UI)와 관련된 문제들을 해결하며 많은 것을 배웠습니다. 문제 1: 종속성 충돌(Dependency Conflicts)상황React 프로젝트를 세팅하거나 새로운 라이브러리를 설치할 때 npm install 또는 yarn install 명령어 실행 시, ERESOLVE 에러가 발생했습니다.에러 메시지 예시:npm ERR ERESOLVE could not resolve npm ERR Conflicting peer dependency: typescript@4.9.5 이 문제는 프로젝트에 설치된 react-scripts, typescript, 또는 기타 라이브러리 간의 버전 호환성 문제에서..

2025.01.21