React 5

[React] React의 메모이제이션 - useMemo(), useCallback(), React.memo

React에서는 렌더링 시 발생되는 필요없는 작업들을 줄이기 위해 다양한 최적화 도구를 제공한다. 그 중 React의 메모이제이션을 도와주는 대표적인 도구가 useMemo(), useCallback(), React.memo이다.각각 메모이제이션하는 값이 다른데, 순서대로 이를 정리해보고자 한다. useMemo()우선 useMemo는 비용이 큰 연산에 대한 결과를 저장해 두고, 이 저장된 값을 반환하는 훅이다. 가장 흔하게 사용이 되는데, 첫 번째 인수로는 어떠한 값을 반환하는 생성 함수를, 두 번째 인수로는 해당 함수가 의존하는 값의 배열을 전달한다. useMemo는 렌더링 발생 시 의존성 배열의 값이 변경됐을 때만 함수를 재실행한다. 그리고 함수의 반환값을 저장한다. 이러한 useMemo의 메모이제이션..

React 2025.02.19

[React] JSX 문법과 컴포넌트들 알아보기

React의 JSX 문법이란?JSX는 리액트를 사용하면서 처음 접하게 된다. JSX를 사용하면 JS 문법을 마치 HTTP 태그처럼 사용할 수 있는데, 이는 페이스북(현 메타)에서 소개한 문법이다. JSX는 ECMAScript의 일부가 아니기 때문에, 꼭 트랜스파일링 도구를 사용해 트랜스파일을 거쳐야 자바스크립트로 변환되어 자바스크립트 엔진이 이해할 수 있다. JSX는 기본적으로 JSXElement, JSXAttributes, JSXChildren, JSXStrings라는 4가지 컴포넌트를 기반으로 이루어져있다고 한다.JSXElementJSXElement는 HTML의 element와 비슷한 역할을 하는데,  다음과 같은 세 형태로 사용할 수 있다. 이때 빈 태그는 JSXFragment라고 부른다. 그..

React 2025.02.18

[React] SSR을 위한 리액트 API

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. [react] SSR을 위한 리액트 API리액트는 브라우저 자바스크립트 환경에서 렌더링 할 수 있는 방법을 제공하지만 동시에 리액트 애플리케이션을 서버에서 렌더링할 수 있는 API도 제공한다.API는 서버에서 렌더링하기 위한 다velog.io  리액트 API리액트는 브라우저 자바스크립트 환경에서 렌더링 할 수 있는 방법을 제공하지만 동시에 리액트 애플리케이션을 서버에서 렌더링할 수 있는 API도 제공한다.API는 서버에서 렌더링하기 위한 다양한 메서드를 제공하는데, 이는server.node.js에 있는 함수를 export한 것이다. 대표 함수들renderToString-> 인수로 넘겨받은 리액트 컴포넌트를 HTML 문자열로 반환-> 서..

React 2024.11.01

[React] 상태 관리 라이브러리의 사용 의의와 그 사용법

오늘은 ‘모던 리액트 Deep Dive’를 읽으면서, 그리고 내가 프로젝트를 경험하면서 알게된 내용을 정리해보려한다.상태(state)란?어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 변경될 수 있는 값이다. 따라서 우리는 이러한 상태를 변경시키고 관리하기 위해 다양한 방법을 사용하는데, 가장 대표적인 방법이 react의 useState(), useContext()이다. Flux 패턴웹 애플리케이션이 비대해지면서 관리해야하는 state들이 늘어났고, 이는 매우 복잡했다. 페이스북 팀은 이러한 문제의 원인을 양방향 데이터 바인딩으로 봤다. (HTML(view) ↔ JS(model)) 따라서 이를 해결하기 위한 단방향 바인딩 방법을 제안한 것이 Flux 패턴의 시작이다.Action → Dispatc..

React 2024.07.07

[React] 리액트 서버 컴포넌트(RSC)와 서버 사이드 렌더링(SSR)

2020년 말, 리액트 팀은 ‘제로 번들 사이즈 React 서버 컴포넌트’ 개념을 도입했다. 서버 컴포넌트란?리액트 서버 컴포넌트는 리액트 18 버전에서 추가된 기능이며, 서버 측에서 페이지가 아닌 컴포넌트를 실행하여 미리 렌더링된 마크업을 생성후, 클라이언트에게 전달되어 사용자에게 콘텐츠를 보여주는 방식이다.Next.js 12까지는 페이지 단위의 컴포넌트에서만 백엔드 리소스에 접근이 가능했지만, 13부터는 RSC를 사용하게 되면서 페이지 단위가 아닌 컴포넌트 단위에서 서버에 접근이 가능해졌다!  제로 번들 사이즈란? 프론트엔드를 개발하면서 라이브러리들을 추가하다 보면 번들 사이즈가 늘게 되고, 이는 서비스 성능에 부정적인 영향을 미치게 된다.요즘은 많은 라이브러리들이 트리 셰이킹(아래 설명 참고)을 지..

React 2024.06.30