goshek 님의 블로그

import React from 'react'import { create } from 'zustand';/*    ! Zustand 상태 관리 프로그램(외부 라이브러리)    : React Hooks를 기반    >> 최소한의 API를 사용하영 상태를 쉽게 생성하고 접근    ? Zustand의 장점    1) 간결성    : 최소한의 코드로 상태 관리    2) 유연성    : 여러 상태 조각을 하나의 저장소에서 결합    ? Zustand 사용 방법    1) 설치    npm i zustand    2) 사용법    상태를 단일 저장소인 store에 저장    +) 해당 저장소를 가져와서 (import) 컴포넌트에 자동으로 업데이트 전달    # 1. Zustand 예제(폴더/ 파일 단위 분리X) ..

import React, { useEffect, useState } from 'react'import axios from 'axios';//! Axios// : JS에서 HTTP 요청을 실행하기 위한 라이브러리// >> Promise 기반의 HTTP 클라이언트, 브라우저와 node.js 모두 사용 가능//? HTTP 통신// : HTTP(HyperText Transfer Protocol)// >> 웹에서 데이터를 교환하는 주요 프로토콜// >> 클라이언트(브라우저)와 서버 간의 통신을 위해 사용//    , 요청(Request)과 응답(Response)의 형태로 데이터가 교환//& HTTP 요청 방법// >> HTTP 프로토콜은 다양한 요청 메서드를 지원//# 1) GET// : 데이터를 조회할 때 사용..

import React from 'react'import {useCounter} from './useCounter';/*    ! Custom Hook    : 리액트의 기본 Hook을 사용하여 작성되는 재사용 가능한 로직의 모음    >> useState, useEffect, useRef등    ! Custom Hook 생성 방법    >> use로 시작하는 함수 정의     : 해당 함수 내부에서 다른 Hook을 호출    >> 결과와 기능을 반환*/export default function Custom01() {    const {count, increment, decrement, reset}= useCounter(0)  return (    div>        {count}        butt..

import React, { useReducer, useState } from 'react'/*    ! React 컴포넌트의 상태 관리    useState vs useReducer    1) useState    const [state, setState]= useState(초기값);    - 리액트에서 가장 기본적인 상태관리 Hook    2) useReducer    const [state, dispatch]= useReducer(reducer, initialValue);    - 복잡한 상태 로직을 관리하는데 useState보다 적합    - 상태 업데이트 로직을 외부에서 선언 가능(재사용성 용이)    ? useReducer의 기본 구조    - reducer 함수    : useReducer에..

import React, { useMemo, useState } from "react";// 컴포넌트 자체를 메모화 하는 경우// : React.memo()// >> 함수형 컴포넌트에서 props의 값이 동일한 경우// >> 이전의 렌더링 결과를 재사용하여 불필요한 리렌더링을 방지//# 자식 컴포넌트const ChildComponent = React.memo(({ count }: { count: number }) => {  console.log("자식 컴포넌트 렌더링");  return div>Count: {count}div>;});//# 부모 컴포넌트export default function UseMemo02() {  const [count, setCount] = useStatenumber>(0);  ..

import React, { useMemo, useState } from "react";//! useMemo// use + Memoization(메모리화)// : 성능 최적화를 위한 Hook// >> 컴포넌트가 렌더링될 때 "특정 연산"의 결과를 메모리에 저장하여//    , 동일한 값에 대해서는 해당 연산을 다시 수행하지 않도록 하는 훅export default function UseMemo01() {  const [count, setCount] = useStatenumber>(0);  const [inputValue, setInputValue] = useStatestring>("");  // 복잡한 계산 함수 (시간이 오래 걸리는 작업)  const expensiveCalc = (num: number..

import React, { useEffect, useState } from "react";export default function UseEffect01() {  const [count, setCount] = useStatenumber>(0);  const [name, setName]= useStatestring>('Gwon');  /*    ! useEffect 기본 구조    : 1개 ~ 2개의 인자가 필요    ? 첫 번째 인자    : 콜백함수    >> 부수 효과를 수행하는 함수    ? 두 번째 인자(의존성 배열, deps)    : 해당 배열의 값이 변경될 때마다 효과가 다시 실행됨    >> 빈 배열: 컴포넌트가 마운트 될 때 한 번만 실행     +) 의존성 배열에 값이 있더라도 마운트..

import React, { useRef, useState } from "react";/*    ! 배열 렌더링 (추가, 조회, 수정, 삭제 CRUD)    >> 해당 광정에서 배열 내부의 각 요소를 구분지을 id값이 필요    ? 동적 배열 렌더링    : 자바스크립트 내장 함수(map, filter) 사용    ? 장바구니 구현    장바구니의 타입 정의*/interface Iitem {  id: number;  name: string;  amount: number;}//기존 장비구니 목록const initialItems: Iitem[] = [  { id: 1, name: "사과", amount: 2 },  { id: 2, name: "바나나", amount: 3 },  { id: 3, name: "..

import React, { useRef, useState } from 'react'/*    ! useRef를 사용한 DOM요소 참조    : 컴포넌트가 재렌더링되더라도 동일한 참조값을 유지    >> 특정 DOM 요소에 접근하고 조작*/export default function UseRef02() {    const [count, setCount]= useStatenumber>(0);    const inputRef= useRefHTMLInputElement>(null);    const prevCountRef= useRefnumber>(0);    const handleButtonFocus=()=>{        // current는 참조하는 DOM요소를 나타냄        if(inputRef.c..

import React, { useRef, useState } from 'react'/*    ! useRef    : use + reference(참조)    >> 변경 가능한 참조 객체를 생성할 수 있는 기능(hook)    ? 사용 목적    - DOM 요소에 직접적으로 접근하고 조작    - 컴포넌트가 재렌더링될 때도 값이 유지되는 변수 관리    - 이전 상태를 기억(렌더링 사이에 지속되는 값을 유지)    ? 기본 문법    const refContainer= useRef(initialValue);    - initialValue: 참조 객체의 초기값    - refContainer.current: 저장된 현재 값에 접근    +) useRef는 객체를 반환    : 해당 객체에는 curren..