yh-jeon Full stack

페이지 라우팅이란?경로에 따라 알맞은 페이지를 렌더링 하는 과정ex) /new -> new 페이지를 렌더링 사용자가 블로그와 같은 특정 페이지를 접속하기 위해 브라우저를 통하여 웹서버에게 /blog와 같은 주소로 요청을 보내게 되었을 때, 웹 서버가 요청에 따라서 브라우저에게 블로그 페이지를 반환해주고 브라우저는 이렇게 반환된 블로그 페이지를 사용자가 볼 수 있도록 렌더링하는 이러한 모든 과정을 바로 페이지 라우팅이라고 표현합니다. => "페이지 라우팅"페이지 라우팅의 원리 전통적인 웹 서비스들은 웹서버가 사용자들에게 제공해줘야 되는 모든 페이지들에 해당하는 HTML 파일을 전부 가지고 있습니다. 따라서, 브라우저에게 /blog 처럼 특정 주소를 갖는 어떤 페이지를 요청하게 되면 서버는 해당 요청에 맞는..

Mount (탄생) :컴포넌트가 탄생하는 순간을 말하며 즉, 화면에 처음 렌더링 되는 순간입니다.ex) "A 컴포넌트가 Mount 되었다." => A 컴포넌트가 화면에 처음으로 렌더링 되었다.Update (변화) : 컴포넌트가 다시 렌더링 되는 순간을 말하며 즉, 마운트 이후에 리렌더링 되는 그 순간을 의미ex) "A 컴포넌트가 업데이트 되었다." => "A 컴포넌트가 리렌더링 되었다."Unmount (죽음) :컴포넌트가 화면에서 사라지는 순간을 말하며 즉, 렌더링에서 제외되는(사라지는) 순간을 의미ex) "A 컴포넌트가 언마운트 되었다." => A 컴포넌트가 화면에서 사라졌다.  useEffect 리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React Hook사이드 이펙트란 ? "부작용"으로, 리..

useReducer- 컴포넌트 내부에 새로운 State를 생성하는 React Hook, 모든 useState는 useReducer로 대체 가능😎useState와의 차이점! : 상태 관리 코드를 컴포넌트 외부로 분리할 수 있음// Exam.jsximport { useReducer } from "react";reducer : 변환기 -> 상태를 실제로 변화시키는 변환기 역할function reducer(state, action) { console.log(state, action); return 값으로 상태를 변화하기에 따로 상태 변화 훅이 필요 없음! reducer문은 if문 보다 switch문으로 작성하는 것이 일반적 switch (action.type) { case "Increa..

[리액트의 특징]컴포넌트를 기반으로 UI를 표현한다.화면 업데이트 구현이 쉽다.화면 업데이트가 빠르게 처리된다.[컴포넌트를 기반으로 UI를 표현한다.]컴포넌트 - 화면을 구성하는 요소, UI를 구성하는 요소 각각의 JAVASCRIPT 파일로 모듈화하여 레고 블록처럼 만들 수 있음 ⇒ 중복 코드를 재사용 가능!페이지의 모든 요소를 컴포넌트화하여 생성 → 이후 불러와서 사용[화면 업데이트 구현이 용이]업데이트란? 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것렌더링? UI 요소를 화면에 그려내는 것을 말함 선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법 ex) 식당에 가서 주문하는 것처럼 “토마토 파스타 하나 주세요” 처럼 말하고 토마토 파스타 만드는..

함수전개 연산자(Spread 연산자, ...)const a = [1,2,3]const b = [4,5,6]console.log(...a) 1,2,3 -> 대괄호가 없어짐!console.log(1,2,3) 1,2,3 -> 아래의 결과와 위의 결과가 동일함! 😎데이터 병합 메서드const c = a.concat(b) console.log(c); 1,2,3,4,5,6 이 병합되어 출력const d = [...a,...b] -> 1,2,3,4,5,6 으로 바뀌게 됨😎console.log(d) [1,2,3],[4,5,6] -> [1,2,3,4,5,6] 으로 배열이 출력됨{전개 연산자}const a = {x: 1, y: 2}const b = {y: 3, z: 4}const c = Object.assign({..

변수(변하는 수)와 상수(변하지 않는 수)let (변수) - 값을 변할 수 있음let age = 27; age는 변수 선언, 27은 변수의 값을 초기화 age = 30; //변수는 언제든 선언하여 값을 재할당할 수 있기에, 초기화 하지 않고 선언하여도 상관없습니다. let age; // undefined로 값이 초기화된 상태 age = 30; let age = 25; // 중복된 이름으로 사용 불가능! [오류]const (상수) - 초기화하고 값을 변화 시킬 수 없음const birth; // 상수는 초기화 없이 작성할 수 없음 [오류] 💡 [변수 명명 규칙(= 네이밍 규칙) ] $ , _ 제외한 기호는 사용 불가능 (위치 상관없음) ex) let $_name (가능) 변수의 이름은 숫자로 시작할 수 없..

데이터 통신리액트에서 데이터 통신을 할 때는 axios 라이브러리나 fetch API를 사용하여 처리합니다. 여러가지 편의 기능은 axios 라이브러리가 더 뛰어나지만, 별도의 라이브러리를 설치해서 사용해야 한다는 단점이 있습니다. 따라서 일반적인 fetch API를 사용하여 데이터 통신을 하는 방법을 살펴봅니다.사용법기본리액트에서 데이터 통신은 보통 컴포넌트 내부에서 useEffect() 훅을 사용하여 처리하는 경우가 대부분입니다.import { useEffect, useState } from "react";import MovieItem from "./MovieItem";const DataFetch = () => { const [url, setUrl] = useState(""); const [dat..

useContext정의리액트의 useContext는 리액트 훅 중 하나로, 컨텍스트(Context)를 쉽게 사용하게 해주는 훅입니다. useContext를 사용하면 컨텍스트 API를 통해 전역적으로 상태를 관리하거나, 컴포넌트 트리에서 prop drilling을 피할 수 있습니다.zustand전역 상태 관리의 대표적인 라이브러리import { create } from "zustand";type CountStore = { count: number; increment: () => void; decrement: () => void; reset: () => void;};export const useCountStore = create((set) => ({ count: 0, increment: () =>..

useCallbackuseCallback 훅은 함수형 컴포넌트에서 함수를 메모이제이션 하는 데 사용됩니다. 여기서 메모이제이션이란, 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 사용함으로써 동일한 계산의 반복 수행을 제거하여 성능 향상을 도모하는 기술을 말합니다.문법const cachedFn = useCallback(fn, dependencies)예제ex1)import React, { useState } from "react";const functionSet = new Set();const App = () => { const [count, setCount] = useState(0); const [count2, setCount2] = useState(0); ..

useId리액트 18에서 추가 된 중복되지 않은 고유한 값을 생성할 때 사용하는 훅입니다.문법const uuid = useId();사용법import { useId } from "react";const App = () => { const uuid = useId(); return ( );};export default App;useTransition리액트 18에서 추가된 훅으로 동시성 모드(Concurrent Mode)에서 제공하는 훅입니다. 동시성 모드란, 리액트가 작업들을 무조건 순차적으로 처리하는 것이 아니라 각 작업에 우선 순위를 지정하여 동시 다발적으로 처리하는 개념을 말합니다.문법const [pending, startTransit..