Dev/React18 React 개요 및 주요기능 _ 개념 정리 React 학습 정리: Hooks의 등장 배경과 종류1. Hooks의 등장 배경컴포넌트의 두 가지 형태: 리액트 컴포넌트는 본래 **클래스형(Class)**과 **함수형(Function)**으로 나뉨.클래스형 컴포넌트의 특징:클래스 내부에서 컴포넌트의 **상태(State)**와 라이프사이클(Lifecycle) 관련 함수들을 정의하여 사용함.하지만 코드가 매우 길고 로직이 복잡해지는 단점이 존재함.함수형 컴포넌트의 도입:클래스형의 복잡함을 해결하기 위해 단순 함수 하나만 작성하는 방식을 선호하게 됨.그러나 초기 함수형 컴포넌트는 상태 관리와 라이프사이클 관리가 불가능하다는 치명적인 한계가 있었음.Hooks의 도입:개발 시 필수적인 상태 및 라이프사이클 관리를 함수형에서도 구현하기 위해 Hooks라는 개념을.. 2026. 4. 13. [React] Redux Test Count실습 📦 Redux & Redux Toolkit 완벽 정리1. Redux의 본질 (왜 쓰는가?)Redux는 자바스크립트 앱을 위한 **'중앙 집중식 상태 관리 라이브러리'**. 컴포넌트끼리 복잡하게 데이터를 주고받을 필요 없이, 하나의 거대한 창고(Store)에서 모든 상태를 관리2. 핵심 용어 정리 (4가지 핵심 개념)이 흐름을 이해하는 것이 가장 중요합니다:Store (스토어): 상태가 저장되는 단 하나의 중앙 저장소.Action (액션): 상태를 어떻게 변경할지 적어놓은 주문서 (무엇을 할지 type, 어떤 데이터를 보낼지 payload).Reducer (리듀서): 주문서(Action)를 보고 실제로 상태를 갈아끼우는 순수 함수.Dispatch (디스패치): 주문서(Action)를 스토어에 전달하는 함.. 2026. 4. 10. [React Axios] Axios 호출 방법 2가지 | 기본호출, 인스턴스 Axios, 더 효율적으로 사용하는 방법: 기본 호출 vs 인스턴스1. 기본 Axios 호출 (axios.get)주석 처리된 코드에서 볼 수 있는 가장 기본적인 방식입니다.특징: 라이브러리에서 제공하는 기본 기능을 직접 사용합니다.장점: 별도의 설정 파일이 필요 없어 소규모 테스트나 단발성 요청에 간편합니다.단점:중복 발생: 모든 요청마다 전체 URL(https://...)을 반복해서 작성해야 합니다.유지보수 취약: 서버 주소가 변경될 경우, 프로젝트 내의 모든 호출 코드를 일일이 수정해야 합니다.설정 번거로움: 공통 헤더(인증 토큰 등)를 매번 설정해야 하므로 코드가 길어집니다.기본호출은 이전 페이지 참고2026.04.09 - [분류 전체보기] - [React axios] .then / async-aw.. 2026. 4. 9. [React Axios] .then / async-await 함수 비교 실습 1. .then() vs async/await (비동기 처리 방식)가장 핵심적인 차이입니다.주석 처리된 코드 (.then()): Promise 객체의 메서드를 체이닝(Chaining)하는 방식입니다. 비동기 작업이 끝나면 then 안의 콜백 함수를 실행하라고 예약하는 방식이죠. 단계가 많아질수록 코드가 오른쪽으로 밀리는 '콜백 지옥'과 비슷한 현상이 생길 수 있습니다.주석 안 된 코드 (async/await): 비동기 코드를 마치 **동기 코드(순서대로 실행되는 코드)**처럼 보이게 작성하는 최신 문법입니다. await를 붙이면 해당 작업이 끝날 때까지 기다렸다가 다음 줄을 실행하므로 흐름을 파악하기가 훨씬 쉽습니다.2. 에러 처리 방식 (catch vs try-catch)비동기 통신은 네트워크 문제 등.. 2026. 4. 9. [React] fetch + async + await 실습 비동기 통신 Axios fetch + async + await 1) Fetch 함수 – IE에서 지원이잘 안됨. : 원격 API를 간편하게 호출 할 수 있도록 브라우져에서 제공하는 fetch()함수 - window.fetch(url, option); 2) 외부 lib 사용(Promise기반의 Http 비동기 통신라이브러리) : 원격 API를 호출 하는 라이브러리 - jQuerylib - Axios lib비동기 통신 fetch +async + awaithttps://jsonplaceholder.typicode.com/users 백엔드가 없어서 일단 통신은 해당 url로 해준다. 2026. 4. 9. [React] 비동기 통신 Ajax 이해하기 | Axios 비교 Ajax: 비동기 웹 통신 기술의 핵심 이해하기 1. Ajax(Asynchronous JavaScript And XML)란?정의: 웹 페이지 전체를 새로고침하지 않고, 서버와 데이터를 비동기적으로 교환하여 페이지 일부만 갱신하는 기술적 개념.특징: 독립된 프로밍 언어가 아니라, 브라우저 내장 기능을 활용하는 방식임.장점: * 사용자 경험(UX) 향상: 화면 끊김 없는 자연스러운 인터랙션 제공.자원 효율성: 필요한 데이터만 주고받아 네트워크 부하 감소.대표 사례: 실시간 검색어, 무한 스크롤, 댓글 등록, 주식 시세 업데이트 등.2. 비동기 통신(Asynchronous)의 이해개념: 요청을 보낸 후 응답을 기다리는 동안 프로그램이 멈추지 않고, 다른 작업을 동시에 수행하는 방식.처리 방식: 응답이 도착하면.. 2026. 4. 9. [React] TodoList 실습으로 핵심 문법 - 데이터 전달과 CRUD 🚀 React 투두 리스트(Todo List) 구조 파헤치기: Props와 컴포넌트 계층리액트로 프로젝트를 만들 때 가장 중요한 것은 **"데이터를 어디에 두고, 어떻게 전달할 것인가?"**이다. 오늘은 간단한 투두 리스트 구조를 통해 리액트의 핵심 동작 원리를 정리1. 전체적인 컴포넌트 계층 구조이미지에서 볼 수 있듯이, 서비스는 최상위 부모인 App.jsx를 중심으로 4개의 주요 컴포넌트로 나뉩니다.Header: 앱의 제목이나 날짜를 표시 (정적 정보)Editor: 새로운 할 일을 입력하고 등록 (onCreate)List: 할 일 목록을 필터링하고 나열 (todos 데이터 사용)TodoItem: 개별 할 일의 수정(onUpdate) 및 삭제(onDelete) 담당2. 실습이 알아둬야할 개념과 문법 .. 2026. 4. 8. [React] Hooks 실습 예제 , useEffect , useMemo import React from 'react'import { useState } from 'react';function Ex03_Memo() { const[list, setList] = useState([1,2,3,4,5]); const[str, setStr] = useState("안녕"); const getSumResult = ()=>{ let sum=0; list.forEach((i)=>{ sum += i; }); return sum; } return ( Ex03_Memo { list.map((no,i)=>{no}) .. 2026. 4. 6. [React] ustState 예제 - 구조분해할당, Map 📌 React State 사용하기 – Form 입력 처리 (Ex03_Form02)회원 정보를 입력받는 폼을 만들고, 입력된 값을 profile이라는 하나의 객체(state)로 관리하는 방법을 정리해보자.1️⃣ 기본 개념이름, 나이, 이메일을 입력받는 input 태그 작성입력 시 inputUpdate 함수 호출입력된 값의 name과 value를 콘솔에 출력 const inputUpdate = (e) => { const { name, value } = e.target; console.log(name, value);}; 👉 객체 비구조화 할당 const { name, value } = e.target; e.target에 있는 name, value를 간편하게 추출코드 가독성이 좋아짐2️⃣ State를 사용하.. 2026. 4. 6. [React] 리액트 개요, 환경설정 | Nodejs 설치 | VS코드 확장플러그인 추천 index는 자동으로 열린다. 자바스크립트를 통해서 root id를 찾아서 화면을 그리는게 다 만들어진다. dom싱글페이지 어플리케이션 , 파일들이 다 다운로드 되어지고 vitrual dom이 생성된다. axios 외부의 api를 요청하는 것 , 외부의 api 스프링쪽 연동을 하기위해 데이터를 가지고 와서 javascript로 구현한다. ⚛️ 리액트(React) 핵심 요약1. Virtual DOM (가상 돔) : 효율적인 화면 업데이트실제 브라우저의 DOM을 직접 건드리지 않고, 메모리상에 띄운 자바스크립트 객체 복사본을 이용해 변경 사항을 적용하는 기술입니다.동작 순서:Re-render: 데이터가 바뀌면 전체 UI를 가상 돔에 일단 새로 그립니다.Diffing (비교): 변경 전의 가상 돔과 변경 .. 2026. 4. 2. 자바스크립트 함수선언방식 | 함수선언방식, 함수표현식, 화살표함수, function생성자 함수 , window객체 주요함수 1. 함수 선언 4가지 방법자바스크립트에서 함수를 만드는 방법은 크게 4가지가 있습니다.① 함수 선언문 (Function Declaration)가장 전통적인 방식입니다. **호이스팅(Hoisting)**이 적용되어 코드 상단에서 호출해도 에러가 나지 않습니다.정의: function 키워드 뒤에 함수 이름을 명시합니다.예제:JavaScript sayHello(); // 실행 가능 (호이스팅)function sayHello() { console.log("안녕하세요!");}② 함수 표현식 (Function Expression)함수를 변수에 할당하는 방식입니다. 변수 선언 방식(let, const)에 따라 호이스팅 규칙을 따릅니다.정의: 익명 함수를 변수에 담아 사용합니다.예제:JavaScript cons.. 2026. 3. 30. 자바스크립트 prmot 입력창 값 연산자를 알아보자 Let 사용방법 변수에 대해서 알아보자 -var vs let vs const 2026. 3. 26. 이전 1 2 다음
