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) 식당에 가서 주문하는 것처럼 “토마토 파스타 하나 주세요” 처럼 말하고 토마토 파스타 만드는..

데이터 통신리액트에서 데이터 통신을 할 때는 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..

useState리액트에서 상태 변수를 선언하고 관리하는 데 사용하는 훅입니다.가장 기본이면서도 가장 많이 사용하는 중요한 훅입니다.문법const [state, setState] = useState(initialState);기본 사용법import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me );}😵 꼭 count, set*** 형식의 이름이어야 하나요? 아니에요. 배열의 구조 분해 할당을 떠올려보면 이해하기..

any 타입: 자바스크립트에 존재하는 모든 값을 오류 없이 받을 수 있음. any로 지정한 타입에 임의의 값을 할당하더라도 오류가 발생하지 않습니다.let state: anystate ={value:0}state = 100;state = "hello world!"state.foo.bar = () => console.log("this is any type") 타입이 명시되지 않은 any타입을 변수에 할당하는 것은 지양해햐 할 패턴! type과 interface :객체를 입력할 때는 주로 type과 interface 형태로 지정합니다. 중괄호{}를 사용한 객체 리터럴 방식으로 타입을 매번 일일이 지정하기에 중복되는 요소가 많기에 지정합니다. props  리액트에서 ‘props’는 컴포넌트 간에 데이터를 전달..