react 4

useMemo와 useCallback

useMemo와 React.memo 그리고 useCallback에 대해 공부한 것을 정리해보겠습니다! 먼저, Memoization이란! 이미 계산해본 연산 결과를 기억해두었다가 동일한 연산을 해야할 때 다시 연산하지 않고 기억해두었던 데이터를 반환시키는 방법입니다. 마치 시험을 볼 때 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 유사합니다.   ✅ useMemo란? useMemo는 특정 값이나 참조가 변경될 때만 재계산을 수행하고 그렇지 않으면 이전에 계산된 결과를 재사용합니다.복잡한 계산이나 처리가 필요한 경우렌더링 성능 최적화가 필요한 경우 기본적으로 React는 부모 component로 부터 받는 state, props가 변동될 경우 자식 component도 리렌더링됩니다. 하지만..

인턴 2025.03.25

Jotai

Jotai란?React 상태관리 라이브러리 중 하나로 비교적 매우 간단하고 작은 단위로 전역 상태 관리가 가능매우 작은 3kb의 번들 사이즈와 타입스크립트에 지향적Jotai는 React.js, Next.js, React Native에서 사용이 가능  jotai의 기본 사용법기본적으로 Jotai는 React 내의 state, useState와 유사한 모양이기 때문에 쉽게 입문할 수 있습니다. 전역 관리 atom을 생성하고, 생성된 atom을 컴포넌트 내에 불러와 사용한다고 생각하면 됩니다.  1. atom: atom을 생성하고 괄호 안에 초기값을 넣을 수 있습니다.const counter = atom(0);  2. useAtom(read/write): 생성된 atom을 불러와서 useState와 동일하게 ..

인턴 2025.03.25

리액트 심화 주차 필수 개념 정리(1)

필수 개념은 다음과 같다.[1-2] 비동기1 - 비동기, promise[1-5] json-server[1-6 ~ 1-7] axios의 GET, POST, DELETE, PATCH, fetch와의 비교[1-10] tanstack query 기본 사용법 (매우중요)[1-15] zustand 기본 사용법[1-20] 인증인가 개념 실습[1-21] tailwind  [1-2] 비동기, promise동기: 순차적으로 진행, 요청을 보내고 응답을 기다린다.(ex 주문 후, 커피가 나올 때까지 기다려주세요!  다음사람들은 아직 주문 못한 상태로 기다리는중...) 비동기: 비순차적으로 진행, 요청을 보내고 응답을 기다리지 않고 바로 다음 작업을 진행한다.(ex 주문 후, 진동벨이 울리면 커피를 가지러 오세요! 모든 사람..

강의 2024.09.06

드디어 React

React란?Facebook에서 개발한 오픈 소스 프론트엔드 라이브러리이다. 웹 및 모바일 에플리케이션의 사용자 인터페이스를 구축하는데 사용된다.예를 들어, React는 레고블럭과 같다. 작은 블록(컴포넌트)들을 조합하여 복잡한 구조물(애플리케이션)을 만든다.  주로 React는 SPA를 만드는데 사용됨으로 현대 웹개발에서 매우 인기 있는 도구이다. 동적이고 반응적인 사용자 인터페이스를 만드는데 특히 유용해서 많은 기업들이 사용중이다!  주요 특징- 컴포넌트 기반: UI를 재사용 가능한 작은 조각(컴포넌트)으로 나눈다.- 가상 DOM: 실제 DOM 변경을 최소화 하여 성능을 개선한다.- 단방향 데이터 흐름: 데이터의 흐름을 예측 가능하게 만든다. 사용 이유- 효율적인 UI 업데이트: 변경된 부분만 업데이..

강의 2024.08.08