yh-jeon Full stack

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’는 컴포넌트 간에 데이터를 전달..

Google Fonts 사이트에 들어가서 지정할 폰트를 고른 후에 Get embeded code를 입력하여 장바구니에 들어가고 나서장바구니에서 사용할 폰트를 적용시켜줍니다. 1. nanum pen script 와 black hans sans 글꼴을 지정해 줍니다. 이때 장바구니에서 web을 들어가서 코드를 복사하여 각각 붙여줍니다.css의 경우 css 파일을 디렉터리 내부에 지정하여 작성해 줍니다.  font.css@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap");.nanum-pen-script-regular { font-family: "Nanum Pen Scr..