실무 첫걸음, 생성형 AI로 배우는 UX/UI & 프론트엔드

5강. 프론트엔드에서 서버와 연결하기: axios로 API 요청하고 응답 처리하기핵심 주제이번 강의에서는 프론트엔드(React 또는 Vue)에서 서버와 실제로 통신하는 방법을 다룹니다. axios를 사용해 API 요청을 보내고, 서버에서 보낸 응답을 받아 화면에 반영하는 흐름을 실습 위주로 설명합니다. 1단계. axios 설치 및 기본 설정npm install axiosReact 기준// client/src/services/axiosInstance.jsimport axios from 'axios';const axiosInstance = axios.create({ baseURL: 'http://localhost:5000/api', headers: { 'Content-Type': 'applicati..

로그인 상태를 구조적으로 관리하는 실전형 전역 상태 설계용어 설명전역 상태 (Global State)애플리케이션의 여러 컴포넌트에서 동시에 접근하고 제어해야 하는 공통 상태입니다. 로그인 여부, 사용자 정보 등이 대표적입니다.Context API전역 상태를 컴포넌트 트리 전체에 공급하는 React의 내장 기능입니다. Provider로 상태를 감싸고, 하위 컴포넌트에서 useContext로 접근합니다.useReducer상태 변경 로직을 컴포넌트 바깥으로 분리해 구조적으로 관리할 수 있게 하는 Hook입니다. 액션 중심의 상태 처리 방식에 적합합니다.기본 개념이전 강의에서 각각 배운 Context API와 useReducer를 결합하면,컴포넌트 전체에서 공유 가능한 전역 상태를 구조적으로 관리할 수 있습니다..

규모가 커질수록 필요한 외부 상태관리 도구들, 어떤 걸 선택해야 할까?용어 설명전역 상태관리(Global State Management)여러 컴포넌트에서 공유하고 접근해야 하는 상태를 전역 공간에서 관리하는 방식입니다.Redux전통적인 상태관리 라이브러리로, 액션 → 리듀서 → 상태의 흐름을 명확하게 관리합니다. 큰 프로젝트에서 선호됩니다.RecoilFacebook이 만든 리액트 친화적 전역 상태관리 라이브러리입니다. Hook 기반이며 상태 단위를 atom으로 관리합니다.Zustand가벼우면서도 간결한 API를 가진 상태관리 도구입니다. 보일러플레이트 없이 빠르게 사용할 수 있습니다.기본 개념리액트 기본 기능인 useState, useReducer, Context API만으로도 대부분의 상태관리는 가능합..

여러 컴포넌트에서 공유되는 상태를 효율적으로 관리하는 방법용어 설명Context APIReact에서 컴포넌트 트리 전체에 전역 상태를 제공하기 위한 기능입니다. Provider로 값을 감싸고, 자식 컴포넌트에서 useContext로 해당 값을 참조할 수 있습니다.ProviderContext 값을 하위 컴포넌트에 전달하는 컴포넌트입니다. 트리 구조 어디에서든 접근 가능하게 만듭니다.useContextContext에서 저장된 값을 꺼내어 사용하는 Hook입니다. 중첩된 props 없이 상태를 직접 받아올 수 있습니다.기본 개념기본적으로 React에서는 상태는 상위 → 하위 컴포넌트로만 전달됩니다.하지만 많은 컴포넌트가 같은 상태를 필요로 할 경우, props로 일일이 전달하는 것은 복잡하고 비효율적입니다.이..

복잡한 상태 로직을 함수 기반으로 명확하게 다루는 고급 패턴용어 설명useReducer상태값과 상태를 변경하는 로직(reducer)을 분리해 관리할 수 있는 리액트 훅입니다. 복잡한 상태나 여러 액션이 필요한 상황에서 유용합니다.reducer 함수현재 상태(state)와 액션(action)을 받아 새로운 상태를 반환하는 순수 함수입니다. 상태 변경의 규칙과 흐름을 명확하게 정의할 수 있습니다.dispatch 함수상태를 변경하기 위해 reducer에게 액션을 전달하는 함수입니다. setState와 달리, 무엇을 어떻게 바꿀지를 명시한 액션 객체를 전달합니다.action 객체reducer 함수에 전달되는 명령 정보입니다. 주로 type 속성과 추가 데이터를 포함합니다.기본 개념useReducer는 다음과 같..

복합 데이터 구조를 다룰 때 반드시 알아야 할 불변성 원칙과 처리 방식용어 설명객체 상태여러 속성을 가진 데이터 묶음입니다. 예: 사용자 정보(user), 설정 정보 등배열 상태리스트 형태의 데이터입니다. 예: 할 일 목록, 상품 목록 등불변성 (Immutability)상태를 직접 변경하지 않고, 기존 값을 복사하여 새로운 상태로 만드는 원칙입니다. 리액트는 이 불변성을 기반으로 변경 여부를 감지합니다.기본 개념리액트에서 상태가 객체나 배열일 경우, 값만 바꾸는 식으로 처리하면 UI가 갱신되지 않습니다.그 이유는 리액트가 참조값(메모리 주소)을 기준으로 상태 변경 여부를 판단하기 때문입니다.따라서 상태를 변경할 때는 반드시 기존 값을 복사한 후 새로운 값으로 대체해야 합니다.주요 사용 위치회원 정보(us..

여러 컴포넌트가 하나의 상태를 공유할 때 사용하는 핵심 패턴용어 설명상태 끌어올리기 (Lifting State Up)여러 컴포넌트가 동일한 상태를 필요로 할 때, 그 상태를 공통 부모 컴포넌트로 옮겨서 상태를 공유하는 방식입니다.부모 컴포넌트공통 상태를 보유하며, 그 상태와 변경 함수를 자식 컴포넌트에 props로 전달합니다.props부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 매개체입니다. 읽기 전용이며 상태를 직접 변경할 수는 없습니다.기본 개념React에서 여러 컴포넌트가 같은 데이터를 기반으로 동작해야 할 경우가 많습니다.이럴 땐 각각이 상태를 가지는 대신, 공통 부모 컴포넌트가 해당 상태를 가지고, 필요한 자식 컴포넌트에 값을 내려주는 방식이 필요합니다.이러한 구조가 바로 **상태 ..

사용자 입력과 상호작용에 반응하는 UI 구성의 핵심 흐름 이해용어 설명이벤트(Event)브라우저에서 발생하는 사용자 행동입니다. 클릭, 입력, 키보드 입력, 마우스 이동 등이 모두 이벤트입니다.이벤트 핸들러(Event Handler)이벤트 발생 시 실행되는 함수입니다. onClick, onChange 등은 이벤트가 발생했을 때 동작을 정의합니다.상태(State)컴포넌트 내에서 변할 수 있는 값으로, 이벤트를 통해 상태가 변경되면 UI가 자동으로 갱신됩니다.기본 개념리액트에서는 상태값과 이벤트를 연결하여 동적인 UI를 구성합니다.사용자 입력, 클릭 등 이벤트가 발생하면 상태가 변경되고, 그에 따라 UI가 자동으로 업데이트됩니다.즉, 리액트의 흐름은 다음과 같습니다:사용자 행동 → 이벤트 발생 → 상태 변경..

UI와 데이터 흐름의 핵심, 상태(state)의 개념과 역할 완전 이해용어 설명상태 (State)컴포넌트 내부에서 관리되는 변할 수 있는 데이터를 의미합니다. 값이 바뀌면 해당 컴포넌트는 자동으로 다시 렌더링됩니다.렌더링 (Rendering)컴포넌트의 JSX가 실제 브라우저 화면(DOM)으로 출력되는 과정입니다. 상태가 바뀌면 React가 이를 감지하고 자동으로 UI를 갱신합니다.상태 : UI연동 데이터기본 개념리액트는 데이터 중심의 UI 프레임워크입니다.즉, 컴포넌트는 상태(state)에 따라 화면을 구성하고, 사용자의 상호작용으로 상태가 변하면 React는 자동으로 해당 UI를 다시 렌더링합니다.이러한 흐름은 다음과 같이 정리할 수 있습니다.상태가 변경되면 → 리액트가 자동으로 → UI를 갱신이 메커..

다음은 React 상태관리 강의안입니다. 초급~중급 수강생을 대상으로, 상태의 개념부터 주요 관리 방법(useState, useReducer, Context API, 전역 상태관리 라이브러리 등)까지 연역적으로 구성했습니다. 학습 목적은 UI와 데이터 흐름의 연결 원리를 명확히 이해하고, 적절한 상태관리 기법을 적용할 수 있는 역량 확보입니다. 강의 구성 개요회차 주제 주요 키워드1강상태란 무엇인가?상태(state), UI 갱신, 컴포넌트 렌더링2강useState로 상태관리 시작useState, 초기값, setter함수3강상태와 이벤트 연결하기onClick, onChange, 상태변경, 렌더링4강상태 끌어올리기(Lifting State Up)부모-자식 간 상태 공유5강여러 상태 다루기 & 객체/배열 상태..

React에서 상태관리는 데이터의 상태(state)에 따라 UI를 자동으로 갱신(렌더링)하고 관리하는 구조와 행위 전체를 말합니다.즉, 사용자의 입력, 이벤트, 서버 응답 등으로 인해 데이터가 바뀌면 화면도 그에 맞게 바뀌어야 하며, React는 이 과정을 자동화합니다. 이 자동화를 가능하게 해주는 것이 바로 "상태(state)"이고, 이 상태를 효과적으로 관리하는 것이 상태관리입니다.데이터의 상태에 따라 UI를 관리하는 것이 바로 상태관리입니다.상태(state)란?React에서 상태는 화면에 영향을 주는 값입니다.단순히 숫자나 문자열이 있다고 해서 상태인 것이 아니라, 그 값이 useState, useReducer와 같은 리액트의 상태관리 훅을 통해 관리되고 추적 가능한 값이어야 비로소 상태라고 부릅니..

React란?React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. 상태(state)의 변화에 따라 화면을 동적으로 갱신할 수 있어 효율적인 웹 개발이 가능합니다.컴포넌트 (Component)UI를 구성하는 독립적 단위입니다. 하나의 페이지는 여러 개의 컴포넌트로 구성됩니다. 재사용성과 유지보수성을 높입니다.JSX (JavaScript XML)HTML처럼 보이는 JavaScript 문법입니다. React에서 UI를 선언적으로 작성할 수 있게 해줍니다.const title = Hello, React!;상태 (State)컴포넌트 내에서 관리되는 데이터입니다. 상태가 변경되면 해당 컴포넌트가 자동으로 리렌더링됩니다.const [count, setCount] = useState..

State란 무엇인가State는 컴포넌트 내부에서 변할 수 있는 데이터를 의미합니다. 예를 들어, 버튼을 눌렀을 때 숫자가 증가하거나 텍스트가 바뀌는 것처럼 사용자와 상호작용하는 데이터가 State입니다. State가 바뀌면 자동으로 화면이 다시 그려집니다.기본 개념React에서 상태 관리를 위해 useState 훅 사용상태 변경 시 컴포넌트가 다시 렌더링 됨State는 컴포넌트 내부에서 선언, 관리됨주요 사용 위치/상황사용자 입력 처리(폼, 버튼 클릭 등)화면에 동적으로 변하는 데이터를 표시할 때구체적 코드 예시import { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( ..

이벤트 처리란 무엇인가이벤트 처리란 버튼 클릭, 입력값 변경 등 사용자 상호작용에 대한 응답 코드를 작성하는 것을 의미합니다. React에서는 HTML 이벤트 속성과 유사하지만, camelCase 형식으로 작성하고 함수로 처리합니다.상태란 무엇인가상태(State)는 컴포넌트의 데이터 저장소로, 사용자와의 상호작용에 따라 변경될 수 있는 값을 의미합니다. useState 훅을 통해 상태를 선언하고 사용할 수 있습니다.기본 개념이벤트 리스너는 camelCase 형식으로 작성상태 변경 시 React가 자동으로 리렌더링useState는 [값, 설정함수] 쌍을 반환주요 사용 위치/상황버튼 클릭 시 카운터 증가입력 필드의 값 실시간 반영UI 상태 변경 (ex. 모달 열기/닫기)구체적 코드 예시import { use..

1회차: Vite와 React 소개 및 개발 환경 구축Vite란 무엇인가Vite vs CRA 비교Vite + React 프로젝트 생성 실습디렉토리 구조 이해2회차: React의 기본 문법과 JSX 이해JSX 문법 기본JSX에서 JavaScript 표현식 사용법Babel의 역할 간략 소개컴포넌트 기본 구조3회차: 컴포넌트의 구성과 분리함수형 컴포넌트 작성컴포넌트 파일 분리Props 전달과 재사용성실습: 사용자 카드 컴포넌트 만들기4회차: 이벤트 처리와 상태 관리 (useState)이벤트 핸들링 기초useState 훅의 기본 개념실습: 클릭 카운터 만들기컴포넌트 상태의 흐름 이해5회차: 조건부 렌더링과 리스트 렌더링조건부 렌더링 방식: if, 삼항연산자배열 map()을 통한 반복 출력key 속성의 중요성실습..