리액트 컴포넌트 성능 최적화
리액트에서 제공하는 API 중 useMemo, useCallback, memo는 리액트에서 발생하는 렌더링을 최소화 하기 위해 최적화 기법으로 사용됩니다.이 세 가지가 모두 최적화 기법이라는것은 알지만 대부분은 정확히 언제 사용하는지에 대해서는 알아 보도록 하겠습니다. 먼저 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생합니다.전달 받은 props가 변경될 때자신의 state가 변경될 때부모 컴포넌트가 리렌더링될 때 1. React.memo전달 받은 props의 변경이 아닌 다른 상황(2, 3번)으로 인해 리렌더링이 되는 부분을 방지하는 함수를 말합니다.컴포넌트를 만들고 React.memo()로 감싸주면 끝!const Item = ({ data, onClick }: { data: { id: string..
- format_list_bulleted Web
- · 2025. 1. 11.
- textsms 0
개발자들의 버전 표기 방법 (SemVer)
유의적 버전(Sementic Versioning, SemVer)을 통해 버전 표기방법을 많이 사용합니다. 버저닝 규칙은 다음과 같습니다.💡 Major.Minor.Patch-LabelMajor, Minor, Patch는 각각 숫자를 통해 나뉘게 됩니다.ex) 1.11.2, 1.8.0-beta Major가장 큰 변화를 뜻하고, 보통 이전 버전과 호환이 불가능하거나 거대한 변화가 있을때 하나 증가시킵니다.Minor와 Patch는 다시 0으로 초기화 시켜줍니다.ex) 2.8.7 → 3.0.0Minor기능이 추가되었을때 숫자를 증가시킵니다.기능이 추가되었다고해서 이전 버전의 하위 호환성을 깨트리지 않습니다.Patch버그 수정, 텍스트 변경등의 자잘한 수정을 할때 증가 시킵니다.Label선택사항으로 alpha..
- format_list_bulleted 컴퓨터 기초 및 개념
- · 2025. 1. 7.
- textsms 0
[Next.js] - Pages Router 기반 SSG
SSG(Static Site Generation, 정적 사이트 생성)SSR의 단점을 해결하기 위한 사전 렌더링 방식빌드 시 API등으로 부터 데이터를 얻어, 페이지를 미리 사전 렌더링 해두는 방식 SSG 빌드시 흐름빌드 시 getStaticProps()라는 함수가 호출되며, 그 함수 안에서 API 호출 등을 수행하고, 페이지를 그리는데 필요한 props를 반환합니다. 그 뒤 이 props를 페이지 컴포넌트에 전달해서 화면을 그립니다.화면을 그린 결과는 정적 파일의 형태로 빌드 결과로 저장합니다. 빌드 결과는 .next 폴더 → server 폴더에서 확인 가능합니다. 기본 골격SSG가 필요한 Page에 아래와 같은 getStaticProps() 함수를 추가해 준다.// 기본 골격export const g..
- format_list_bulleted 카테고리 없음
- · 2024. 10. 15.
- textsms 0
[Next.js] - Pages Router 기반 SSR
SSR(Server Side Rendering, 서버 사이드 렌더링) SSR은 가장 기본적인 사전 렌더링 방식페이지 접근(요청)이 발생할 때마다 서버에서 getServerSideProps()를 호출하고 결과값을 클라이언트에 전달즉, 요청이 들어올때마다 화면이 보이기 전에 사전 렌더링하는 방식 기본 골격SSR이 필요한 Page에 아래와 같은 getServerSideProps() 함수를 추가해 준다// 기본 골격export const getServerSideProps = async () => { return { props: { } }} 예제// ========================================// SSR(Server Side Rendering) 예제// =========..
- format_list_bulleted Web
- · 2024. 10. 15.
- textsms 1