render

나는 강의를 들으며 강의 내용을 내가 진행한 프로젝트에 적용해보기로 하였다. 해당 프로젝트는 Next를 활용해서 구현하였고, 적용을 위해 추가적인 세팅이 필요했다. jest.config.ts import type { Config } from "jest";import nextJest from "next/jest";const createJestConfig = nextJest({ dir: "./", // jest가 동작되는 기본 경로 설정});const config: Config = { preset: "ts-jest", // jest 설정에 기반이 되는 preset 등록 coverageProvider: "v8", // coverage 코드 추적을 위해 사용되는 provider 설정 testEnviron..

프론트엔드 작업을 하다보면 기능 구현만을 신경쓰다 보면 제일 중요하다고 볼 수 있는 성능에 큰 신경을 쓰지 못하는 경우가 꽤 있다. 성능에 큰 영향을 미치는 요소 중 하나가 불필요한 렌더링이다. 불필요한 렌더링을 최소화하는 것은 프론트엔드 개발자가 극복해야하는 문제 중 하나이다. 리액트의 렌더링 과정 우선 렌더링 최적화를 이루기 위해 렌더링이 이루어지는 과정을 알아볼 필요가 있다. 렌더링이란 리액트가 컴포넌트에게 현재의 props와 state를 기반으로 UI가 어떻게 생겼으면 좋겠는지 설명하도록 요청하는 프로세스라고 나와있다. 리액트 작업에서는 주로 함수형 컴포넌트를 사용하여 작업을 하게 된다. export default function Component(){ ... return 컴포넌트 코드 } 위는 ..