React/모던 리액트 Deep Dive

과거 리액트 애플리케이션을 만들 때 CRA가 각광을 받았지만 요즘은 서버 사이트 렌더링을 지원하는 Next.js와 같은 프레임워크가 큰 인기를 끌고 있다. 서버 사이트 렌더링이란싱글 페이지 애플리케이션(SPA)SPA란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 JS에 의존하는 방식을 의미한다. 최초에 첫 페이지에서 데이터를 모두 불러온 후 페이지 전환을 위한 모든 작업이 JS와 브라우저의 history.pushState와 history.replaceState로 이뤄진다. 이러한 작동 방식은 최초에 로딩해야 할 JS 리소스가 커지는 단점이 있지만 첫 로딩 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX를 제공한다는 장점이 있다. 전통적인 방식의 애플리케이션 vs..

중복 코드를 피해야 한다는 것은 중요한 말이다. 반복되는 코드의 존재만으로도 비효율이며 유지보수도 어려워진다. React에서 재사용할 수 있는 로직을 관리할 수 있는 방법은 두 가지가 있다.사용자 정의 훅(Custom Hook)고차 컴포넌트(High Order Component)사용자 정의 훅(Custom Hook)서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것이 사용자 정의 훅이다. 이는 Hook을 기반으로 필요한 훅을 만드는 기법이며, 오직 React에서만 사용할 수 있는 방식이다. React 훅이 use로 시작하는 네이밍 규칙이 있는 것처럼 사용자 정의 훅 또한 use로 시작하는 이름을 갖는 것이 규칙이다. 아래는 HTTP 요청을 하는 fetch를 기반으로 한 사용자 정..

useContextuseContext에 대해 이해하기 위해서는 React의 Context에 대해 알아야 한다. Context란?React 애플리케이션은 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있다. 따라서 부모가 가진 데이터를 자식에게 전달하려 한다면 props를 통해 데이터를 전달해야 한다. 이때 부모와 자식의 거리가 길어질 수 록 코드가 복잡해진다. 이러한 기법을 prop 내려주기(props drilling)라 한다. 이러한 prop 내려주기는 양쪽에서 모두 불편하다. Context를 이용하면 명시적 props 없이도 하위 컴포넌트 모두에서 원하는 값을 사용할 수 있다.import React, { cr..

useMemouseMemo는 비용이 큰 연산에 대한 결과를 저장(메모이제이션)해 두고, 저장된 값을 반환하는 Hook이다. useMemo는 React에서 최적화를 떠올릴 때 가장 먼저 언급되는 Hook이다.import { useMemo } from 'react'const memoizedVAlue = useMemo(() => expensiveComputation(a,b),[a,b]) 첫 번째 인수로는 어떤 값을 반환하는 생성 함수를, 두 번째 인수로는 해당 함수가 의존하는 값의 배열을 전달한다. useMemo는 렌더링 발생 시 의존성 배열의 값이 변경되지 않았으면 함수를 재실행하지 않고 기억해둔 값을 반환하고 변경되었다면 함수를 다시 실행한 결과값을 반환하고 그 값을 기억할 것이다. 이러한 메모이제이션은 ..

지금부터 리액트 훅에 대해 알아보자.Hook은 클래스 컴포넌트에서만 가능했던 state, ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들어 준 것이다. 리액트로 웹 서비스르를 만드는 개발자라면 훅이 어떻게 동작하는지 이해할 필요가 있다. useStateuseState는 함수 컴폰너트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import {useState} from 'react'const [state,setState] = useState(initialState) useState의 인수로는 사용할 state의 초깃값을 넘겨주면 된다. 만약 useState를 사용하지 않는다면 어떻게 될까?import React from 'react'const Component = () =>..

리액트의 렌더링부라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정이다. 사용자가 보게되는 결과물을 만드는 작업이기 때문에 중요한 과정이며 렌더링 방식이 성능에 큰 영향을 주게된다. 리액트의 렌더링이란리액트에서의 렌더링은 브라우저 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이는 모든 컴포넌트들이 갖는 props와 state의 값을 기반으로 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정이다.해당 컴포넌트가 props와 state 같은 상태값을 갖고 있지 않다면 반환하는 JSX 값에 기반해 렌더링이 일어나게 된다.  리액트 렌더링 트리거리액트에서 렌더링이 발생하는 시나리오는 다음과 같다.최초 렌더링: 사용자가 처음 애플리케이션에 진입한 경우클래..