React
1.[React] useState, useReducer, 게으른 초기화
컴포넌트의 상태(컴포넌트가 가질 수 있는 상태) ex) 시계라는 컴포넌트가 있다면, state로 time을 가질 수 있다.컴포넌트의 상태를 간편하게 업데이트 해줄 수 있게 도구를 제공ex) state: time = 5시 ⇒ state: time = 6시state 생성과
2.[React] useMemo, useCallback, 메모이제이션
이번 시간에는 컴포넌트 최적화를 위해 사용되는 대표적인 Hook에 대한 소개가 있겠습니다. 이 중에서 useMemo와 useCallback을 중점으로 다루어 보는 시간을 가지도록 하겠습니다.useMemo에서 Momo는 Memoization을 의미하며, 동일한 값을 re
3.[React] custom Hook 파헤치기
리액트의 기본 제공 훅(Hook)을 사용자가 자신의 요구에 맞게 만든 사용자 정의 훅을 의미합니다. 즉, 반복되는 로직을 리액트 내장 훅 들을 사용하여 구현한 '내가 만든(커스텀한) 훅'이다. 보통 Input과 Fetch를 관리할 때 주로 사용된다.코드 재사용성 향상:
4.[초기세팅]prettier, eslint, styleLint에 대해서
ESLint는 EcmaScript(javascript) 와 Lint를 합친 것으로 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.즉, 자바스크립트 코드에서 발견될 수 있는 패턴이나 코드 스타일 문제를 식별하기 위해 사용되는 정적 코드 분석 도구이다
5.[React] React19에 관하여
✔️들어가며 > 이번 시간에는 React19 즉, React 18 이후의 다음 버전으로 예상되는 React의 주요 업데이트의 예상되는 주요 특징 및 변화에 대해서 알아보는 시간을 가져보겠습니다. 현재 React 19에 대한 구체적인 정보는 공개되지 않았으므로, 일반적인
6.[React] 이벤트 처리
참고링크이벤트 핸들러는 해당 컴포넌트가 가진 어떤 자식 컴포넌트의 이벤트를 수신할 수 있다. 이를 이벤트가 트리를 따라 “bubble” 되거나 “전파된다”고 표현합니다. 이때 이벤트는 발생한 지점에서 시작하여 트리를 따라 위로 전달됩니다.위 코드의 <div>는 두
7.[React]React.FC 사용 지양해야하는 이유
리액트 관련 아티클을 읽거나 강의를 보다면 React.FC를 사용하는 것을 자주 목격할 수 있다.(특히, 오래된 아티클이나 강의)React.FC가 무엇인지 알아보고, 지양해야하는 이유에 대해서 알아보자React.FC (React Functional Component)는
8.[React]Props를 state에 미러링하면 안되는 이유
위의 코드에서 color state 변수는 messageColor prop로 초기화됩니다. 문제는 부모 컴포넌트가 나중에 다른 값의 messageColor를 전달한다면 (예를 들어, 'blue' 대신 'red'), color state 변수 가 업데이트되지 않는다다!
9.[React] 코드 스플리팅(code spliting) - 성능 최적화
이번시간에는 진행하고 있는 프로젝트에서 컴포넌트 코드 스플리팅(code spliting) 을 통해 로딩 속도 개선에 대한 이야기를 간단하게 나누어보고자 한다.React는 SPA(Single-Page-Application)인데, 사용하지 않는 모든 컴포넌트까지 한 번에
10.[React]snap state, Context, Virtual Dom, Reconciliation
https://ko.react.dev/learn/state-as-a-snapshotState 변수는 읽고 쓸 수 있는 일반 자바스크립트 변수처럼 보일 수 있습니다. 하지만 state는 스냅샷처럼 동작합니다. state 변수를 설정하여도 이미 가지고 있는 sta
11.[React]렌더링 프로세스, 리액트 작동원리, Fiber
리액트에서 렌더링(rendering)이란, 컴포넌트의 내용을 화면에 표시하거나 업데이트하는 과정을 의미한다.초기 렌더링: 구성 요소가 화면에 처음 나타날 때 발생리렌더링: 이미 화면에 있는 구성 요소의 두 번째 및 연속 렌더링리액트에서는 크게 아래의 3단계를 거쳐 렌더
12.[React]useMemo, useCallback, Automatic Batching, Windowing
이번 시간에는 렌더링 최적화에 대해 공부한 내용을 작성해보는 시간을 가지도록 하겠습니다.useMemo에서 Momo는 Memoization을 의미하며, 동일한 값을 return하는 함수를 반복적으로 호출해야 된다면 맨 처음 값을 계산 할 때 해당 값을 메모리에 저장해서
13.[React]Compound component, HoC, React Portal
이번시간에는 Compound component, HoC, React Portal에 대해서 알아보는 시간을 가져보도록 하겠습니다.React에서 구성 요소들 간의 유연한 관계를 정의하고, 하나의 상위 컴포넌트와 하위 컴포넌트들이 함께 작동하도록 설계하는 디자인 패턴이다.
14.CSR, SSR, RSC 너 누군데?
이번 시간에는 CSR SSR RSC를 프론트엔드 렌더링 패러다임 변화의 순서를 기준으로 설명해보는 시간을 갖도록 하겠습니다.초창기 웹 렌더링 방식(1990년대~2000년대 초반)은 정적 웹 페이지와 동적 서버 렌더링에 의존 하였다. 화면에 어떠한 변화를 주려고 화면을
15.[React]성능최적화-React.lazy, Suspense, Debounce, Throttle
이번 시간에는 성능최적화 기법으로 활용되는 React.lazy, Debounce, Throttle 에 대해서 알아보는 시간을 갖도록 하겠습니다.React는 SPA(Single-Page-Application)으로, 사용하지 않는 모든 컴포넌트까지 초기에 한 번에 불러오기
16.[React]Concurrent mode, Suspense
이번 시간에는 React의 Concurrent mode와 Suspense에 대해서 알아보는 시간을 갖도록 하겠습니다.동시성(Concurrency)은 여러 작업이 동일한 시간 간격 내에서 서로 번갈아가며 실행되는 특성을 의미한다. 꼭 작업들이 동시에 실행되는 것은 아니며
17.[React]React Testing Library, Jest
React에서 컴포넌트와 기능이 제대로 동작하는지 검증하기 위해 테스트는 필수적인 과정입니다. React Testing Library와 Jest를 사용해 React 컴포넌트를 테스트하는 방법을 소개하겠습니다.사용자 관점에서 React 컴포넌트를 테스트하기 위한 도구이다
18.[React]공식문서 - UI표현하기(순수 컴포넌트, 사이드 이펙트, 트리로서 UI)
리액트는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트는 더 큰 UI 구조의 일부로 결합된다. 이 아티클에서는 순수 컴포넌트(Pure Component)와 리액트 애플리케이션의 트리 구조로서의 UI를 이해하는 데 초점을 맞춰 보겠습니다.순수 컴포넌트는 주어진 prop
19.useEffect, useLayoutEffect 실행 시점 딥다이브 하면서 발견한 React의 DFS
리액트의 대표적인 hooke 중 하나인 useEffect. 하지만, 최근 면접에서 실행시점을 모호하게 알고 있어 질문에 명쾌하게 대답하지 못하였다. 이번 시간에는 useEffect 실행 시점을 딥다이브한 내용을 다루어 보겠습니다. 본론으로 들어가기에 앞서,알아두어야하