본문 바로가기

React

(14)

[ React 18+ ] RSC(React Server Componen) 파헤치기. RSC는 React Server Components의 약자로, React18 버전부터 등장한 개념이다.서버에서 컴포넌트를 렌더링 하고 클라이언트에서 이를 효율적으로 활용할 수 있게 해주는 기능으로, 서버와 클라이언트의 역할을 분리하여 사용자 경험 향상을 위해 등장한 기능이다. RSC는 React의 자체적인 기능이기 때문에 꼭 Next.js를 사용하지 않고도 구현할 수 있지만, RSC는 서버-클라이언트의 상호작용이 필요하기 때문에 Node.js기반의 서버 환경이 필요하다. 그래서 Next.js를 사용하지 않는다면 Express.js 같은 라이브러리를 사용하여 HTTP 서버를 만들고, 서버-클라이언트 스트리밍, Webpack 번들링(서버 / 클라이언트), 데이터 통신, 성능 최적화(캐싱) 등의 추가적인 설..

React 18 변경점 정리 오늘은 React19 release version이 나오기 전에 React 18의 큰 변경점에 대해 살펴보려고 한다.현재 기준 React 가장 최신 버전은 18.3.1 이다.(2024년 4월 26일) 그리고 React18은 2022년 3월 29일에 정식 릴리즈 되었다. 1. 동시 렌더링(Concurrent Rendering) 동시 렌더링(Concurrent Rendering)은 사용자 인터페이스(UI)를 더 유연하고 효율적으로 렌더링할 수 있게 해주는 기능으로, 전통적인 렌더링 방식에서는 컴포넌트 트리가 변경될 때, 변경 사항이 한 번에 렌더링되면서 오랜 시간이 소요되며 UI가 멈추는 것처럼 보이는 문제가 발생하였다. 동시 렌더링(Concurrent Rendering)은 이러한 문제를 해결하..

React의 상태관리 라이브러리, Zustand에 대한 간략 정리글. 독일어로 "상태"를 의미하는 Zustand는 React 애플리케이션에서 단순화된 Flux 패턴을 사용하는 작고 빠른 상태 관리 라이브러리이다.hook을 기반으로 사용하는 간편한 API를 제공하며, 최소한의 보일러플레이트 코드로 사용이 가능하며, 개발자가 상태 관리를 직관적이고 쉽게 처리할 수 있도록 도와준다. 주요 기능 및 특징 1. 심플한 API: Zustand의 API는 매우 간단하다. 보통 1~2개의 hook만 사용하여 상태를 정의하고, 이를 컴포넌트에서 사용할 수 있다. 주로 `create` 함수와 `useStore` 훅을 사용한다.2. 초경량: Zustand는 경량 라이브러리로, 크기가 작고 빠르다. React Context API 기반으로 작동하는 다른 상태 관리 라이브러리와 비..

[ React ] Suspense란 무엇일까? React의 Suspense는 React 18에서 정식으로 지원된 비동기 처리를 지원하는 React의 내장 컴포넌트로, 비동기 처리가 진행되는 동안, 사용자에게 로딩에 대한 상태를 보여주는 기능을 제공한다. Suspense는 Suspense의 경계를 설정하고, 경계 내에서 비동기적으로 로드되는 컴포넌트나 데이터에 대한 로딩 상태를 관리한다. 이런 로딩 상태는 fallback프로퍼티를 통해 사용자에게 표시된다. Suspense의 자식 컴포넌트(children)가 실제 비동기 처리 이후에 렌더링 되는 컴포넌트이다. 위와 같이 {children}로 사용되며, React Suspense는 주로 React 애플리케이션의 비동기 데이터 로딩을 위해 사용되는 React.lazy와 함께 사용된다.(React.lazy..

[ React ] 상태 관리 툴 비교 분석 Recoil vs Zustand 회사에서 새로운 React 프로젝트를 세팅중인데, 전역 상태관리 툴 중에서 팀원들이 빠르게 배우고 활용할 수 있도록 쉽게 React 프로젝트의 상태 관리가 가능한 툴 2가지를 비교해 보게 되었다. Recoil (v0.7.7 기준) 전체 카운터 코드 counter sample code Recoil은 아래처럼 쓰인다. (테스트 코드 일부) import "./App.css"; import { countState } from "./state/countState"; import { useRecoilValue, useSetRecoilState, useResetRecoilState } from "recoil"; function App() { const count = useRecoilValue(countState); ..

[ GitHub Action ] GitHub Action을 이용하여 프로젝트 CI/CD 세팅하기. GitHub Action GitHub Action은 빌드와 테스트, 개발 파이프라인을 자동화할 수 있는 CI/CD(지속적인 통합/지속적인 배포) 플랫폼으로, Git 저장소에서 발생하는 이벤트에 대한 자동화된 작업을 수행할 수 있는 기능이다. 이러한 작업은 Git 저장소의 상태 변경, 새 브랜치 생성, 코드 푸시, 이슈 등록, Pull Request 등을 대상으로 할 수 있으며 모든 레포지토리의 PR 또는 상용 배포를 위한 merged PR 빌드와 테스트 워크플로우를 생성할 수 있다. Git Action을 사용하면 저장소에서 이벤트가 발생하면 지정된 작업이 실행되어 소프트웨어 개발 및 배포 프로세스를 자동화할 수 있다. 예를 들어 코드 푸시 이벤트가 발생하면, 자동으로 코드 테스트, 빌드 및 배포를 수행할..

[ React ] React Props 알아보기. React를 처음 시작하는 사람들 또는 React의 경험이 많지 않은 사람들에게 비슷해보여서 어렵게 느껴질 수 있는 React Props와 React State에 대해 차이점에 대한 포스팅을 하려고 했지만 React의 Props를 먼저 이해해야 state에 대해 이해하기 더욱 쉬울 것 같아, props에 대해 먼저 알아보려 한다. props와 state는 React의 클래스 컴포넌트와 함수 컴포넌트에서 모두 사용된다. Props React에서 props란 "properties"의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하기 위한 방법으로, 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 데이터는 props라는 객체 형태로 전달되며, 자식 컴포넌트는 이 props 객체를 통해 데이터에 접근할..

[ webpack ] React(리액트)와 webpack(웹팩) React.js를 사용하거나, 다른 라이브러리 혹은 프레임워크를 사용하다보면 항상 webpack과 같은 모듈 번들러 툴을 사용하게 된다. 웹팩 공식 사이트에서 소개하는 컨셉은 현대 자바스크립트 응용 프로그램을 위한 정적 모듈 번들러라고 말한다. 모듈 번들러는 여러 다른 파일들(JavaScript, LESS, CSS, JSX, ESNext 등)을 받아서 하나의 파일로 묶어준다. 이렇게 여러 다른 파일들을 받아 하나의 파일로 묶어주어 생기는 이점은 크게 모듈성과 네트워크 성능이 있는데, 모듈성은 소스 코드를 작업하기 쉽게 여러 부분이나 모듈로 나눠서 다룰수 있게 해주어 팀 작업등의 협업에 유리하다. 또 네트워크 성능의 측면에서는 의존 관계가 있는 여러 파일을 묶은 번들을 브라우저가 1번만 읽기 때문에 네트워..

이전 1 2 다음

티스토리툴바