리액트 심화 스터디 (15) 썸네일형 리스트형 [Week 8] Jest, React Testing Library TDD(Test Driven Development: 테스트 주도 개발)TDD는 개발자가 새로운 기능이나 함수에 대한 테스트 케이스를 먼저 작성하고, 그 테스트를 통과하기 위한 최소한의 코드를 작성하는 개발 기법이다. 이 방법론은 코드의 기능에 초점을 맞추며, 개발자의 관점에서 테스트 케이스를 작성한다.실패하는 테스트 작성: 구현할 기능에 대한 테스트 케이스를 작성하여 초기 상태에서 테스트가 실패하도록 만든다.테스트를 통과하도록 수정: 작성한 테스트를 통과시키기 위해 필요한 최소한의 코드를 구현한다.리팩토링: 통과한 테스트를 기반으로 코드의 품질을 개선하고 가독성을 높인다.BDD(Behavior Driven Development: 행동 주도 개발)BDD는 TDD에서 파생된 개발 방법론으로, 테스트 케이스 .. 🏄♀️ 리심스 7주차 - Concurrent Mode Concurrent Mode와 Suspense는 데이터 로딩과 UI 렌더링의 효율을 높이고 사용자 경험을 개선하기 위해 리액트 최신 버전에 새롭게 도입된 기능이다.Concurrent Mode동시성(Concurrency)이란?여러 작업을 작은 단위로 나눈 뒤 그 작업들 간의 우선순위를 정하고 작업을 번갈아 수행하는 것.👉 실질적으로는 하나에 한 번의 작업을 처리하는 것이나, 빠른 작업 간의 전환으로 인해 하나의 시스템이 여러 작업을 동시에 처리하는 것처럼 보이게 한다. 리액트에서의 동시성 (Concurent Mode) 자바스크립트는 싱글 스레드 언어로, 하나의 작업이 실행되는 동안 다른 작업은 block된다. 기존 렌더링은 동기적 처리로 이루어졌으며, 리액트가 렌더링 작업을 시작하면 중간에 중단할 수.. [Week 7] Concurrent Mode, Suspense 1. Concurrent Mode동시성이란?동시성(Concurrency)은 작업을 동시에 처리할 수 있는 상태를 의미하며, 이를 위해 작업을 더 작은 독립적인 단위로 나누어 구조화하는 방식을 말한다.리액트에서의 Concurrent Mode자바스크립트는 싱글 스레드 언어로, 순차적으로 작업을 실행한다. 따라서, 작업이 실행되는 동안 스레드는 해당 작업이 끝날 때까지 블록되며 다음 작업은 실행되지 않는다. 하지만 React 16 이전에는 렌더링이 동기적으로 이루어졌으며, 작업이 긴 경우 브라우저의 메인 스레드가 차단(blocking)되어 사용자 입력이나 애니메이션 같은 작업을 처리하지 못했다.React 16에서는 렌더링 엔진을 새롭게 설계한 Fiber 아키텍처가 도입되면서, 렌더링 작업을 더 작은 단위로 나.. [Week 6] React Profiler, React.lazy, Debounce, Throttle 1. React ProfilerReact Profiler는 React Developer Tools의 일부로 제공되며, 애플리케이션 렌더링 성능을 측정하는 데 도움을 준다.성능을 측정하고자 하는 부분을 녹화한 후 중지를 누르면 컴포넌트별 렌더링 여부와 렌더링 시간 등을 볼 수 있다. Profiler 사용법import { Profiler } from 'react';function App() { return ( );}onRender 콜백 함수onRender 콜백 함수는 Profiler가 렌더링이 완료될 때마다 호출되며, 이 함수는 렌더링된 컴포넌트의 성능 데이터를 제공한다.onRender 함수는 다음과 같은 입력값을 받는다.id: 렌더링된 프로파.. 🏄♀️ 리심스 6주차 - 리액트 성능 최적화 성능 최적화 방법 몇 가지를 소개해보겠다.1. React Profiler는 프로그래밍 방식으로 React 트리의 렌더링 성능을 측정할 수 있다. Propsid: 성능을 측정하는 UI 컴포넌트를 식별하기 위한 문자열onRender: 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 onRender 콜백으로, 렌더링된 내용과 소요된 시간에 대한 정보를 받고 있다. onRender 콜백render 함수의 파라미터들의 의미는 각각 다음과 같다.function onRenderCallback( id, // 방금 커밋 한 프로파일 러 트리의 "id"소품 phase, // "mount"(트리가 방금 마운트 된 경우) 또는 "update"(다시 렌더링 된 경우) actual.. 🏄♀️ 리심스 5주차 - 리액트 서버 컴포넌트 리액트가 서버에서만 단독으로 실행되는 리액트 서버 컴포넌트를 공개했다고 하는데, 그게 무엇인지 설명하기에 앞서 이해를 돕기 위해 서버사이드 렌더링이 무엇인지 간략하게 알아보겠다.서버 사이드 렌더링(SSR)이란?기본적인 리액트 애플리케이션은 아래 사진과 같이 클라이언트 사이드 렌더링(CSR)으로 동작한다. 클라이언트 사이드 렌더링을 사용하는 앱의 경우 페이지 진입 시 HTML, 자바스크립트 그리고 모든 데이터가 로드되고 컴포넌트 렌더링이 끝나기 전까지 사용자는 아무런 기능이 없는 빈 화면만 보게되는데, 이는 사용자 경험을 저하시킨다.반면 서버사이드렌더링(SSR)은, 클라이언트 애플리케이션의 자바스크립트 파일을 서버에서 먼저 HTML로 렌더링하기 때문에 빈 화면 대신 데이터가 존재하는 HTML을 제공함으로써.. [Week 5] SSR과 RSC 1. SSR (Server-Side Rendering)SSR은 Server Side Rendering의 약자로, 화면의 렌더링이 클라이언트 단이 아닌 서버에서 이루어지는 아키텍처를 말한다.하지만, 일반적으로 지금의 SSR은 첫 HTML 렌더링은 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리하는 하이브리드 형태의 SSR을 가리킨다. CSR (Client-Side Rendering)과 SSR의 비교 기존에는 CSR (Client-Side Rendering) 방식이 보편적이었다. CSR이란 Client Side Rendering의 약자로, 사용자의 화면에 JavaScript 번들이 모두 다운로드된 후 첫 렌더링이 실행되고, 인증 및 데이터 요청과 같은 과정이 뒤따르는 방식이다. 하지만, 이 .. 🏄♀️ 리심스 4주차 - 컴포넌트 패턴 iuoo1. Compound Pattern합성 컴포넌트 패턴은 하나의 완결된 UI 컴포넌트를 위해서 작게 세분화된(캡슐화된) 하위 컴포넌트가 존재하고, 그 하위 컴포넌트들을 조합하여 사용하는 디자인 패턴이다. 하위 컴포넌트들과, 하위 컴포넌트들 활용하는 메인 컴포넌트에서는 상태와 로직을 공유한다.부모에서 props 로 자식에게 속성들을 전달하는 것이 일반적인데, 부모와 자식 사이의 간격이 너무 멀어질 경우, props를 계속해서 하위 컴포넌트로 넘겨줘야 하는 불편함이 발생한다.(props drilling) -> 이를 개선하기 위해 나온 패턴으로, 컨텍스트를 이용하여 props로 자식에게 넘기지 않고도 하위에서 필요한 데이터들을 전달한다. 부모 컴포넌트는 컨텍스트와 상태를 제공하는 반면 자식 컴포넌트는 이.. 이전 1 2 다음
