리액트 컴포넌트 성능 최적화

리액트에서 제공하는 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

[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

[TS] - 함수 오버로딩(Overloading)

먼저 들어가기에 앞서, 보통 아래와 같이 매개변수나 리턴타입을 Union타입을 이용하여 상황에 맞게 함수를 사용하였을 겁니다.function coordinate(x: number | string, y: number | string): string | number { if (typeof x === "string" && typeof y === "string") { return x + y; } else { return Number(x) + Number(y); }}console.log(coordinate(1, 2)); // 3console.log(coordinate("1", "2")); // 12console.log(coordinate(1, "2")); // 3 (의도되지 ..

• format_list_bulleted Web
• · 2024. 10. 6.
• textsms

반응형 디자인을 위한 개발자 TIP

1. 모바일 퍼스트  - 먼저 모바일을 위한 디자인을 하고 더 큰 화면에 맞게 확장 2. 유연한 그리드  - 레이아웃에 고정 단위 대신 백분율 사용 3. 미디어 쿼리 모바일(소형)브레이크 포인트 (최대 320px)iPhone5 시대의 스마트폰모바일(중형)브레이크 포인트 (321px ~ 480px)대부분의 스마트폰ex) iPhone 15 Pro(393x852), iPhone 15 Pro Max(430x932), Samsung Galaxy S9+(360x740)모바일(대형)/태블릿브레이크 포인트 (481px ~ 768px)큰 스마트폰 및 소형 태블릿ex) iPad Mini(768x1024)태블릿브레이크 포인트 (769px ~ 1024px)표준 태블릿ex) iPad Pro(1024 x 1366)데스트톱브레이크..

• format_list_bulleted Web
• · 2024. 8. 16.
• textsms

SOP, CORS 개념

SOP, CORS에 대해서 알아보기에 앞서 간단하게 이 출처(Origin) 라는 것이 정확히 뭘 의미하는지부터 한번 짚고 넘어가도록 해야 합니다. # Origin https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Origin Origin - HTTP | MDN Origin request 헤더는 fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. POST requests에 포함되는 것처럼, CORS requests 와 함께 전송합니다. Referer 헤더와 비슷하지만, ori developer.mozilla.org fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. 즉, Protocol + ..

• format_list_bulleted Web
• · 2023. 3. 2.
• textsms

[React] Redux(리덕스) Concept

Redux란? 등장 배경 리덕스가 무엇인지 알아보기 전에 리덕스가 왜 필요할까? 고민해볼필요가 있습니다. 리액트에선 일반적으로 State를 관리 할 때는 props를 통해 부모에서 자식 컴포넌트의 방향(단방향 데이터)으로 데이터 흐름이 일어난다. 💡 State - 상태란 의미는 단순히 정상, 비정상인 상태를 뜻하기 보다는 데이터 의미에 가깝다. 즉, 리액트 컴포넌트의 변경 가능한 데이터(DATA)를 뜻한다. 1. 양방향 흐름 지양 부모와 자식 컴포넌트 모두가 데이터를 직접 변경이 가능하다 간단한 화면에선 단순하게 부모와 자식의 데이터간에 데이터를 직접 호출해서 동기화함으로 좋아 보일수 있다. 하지만 복잡한 프로젝트에 컴포넌트들의 잦은 변경이 존재한다면 데이터 흐름을 예상하기 어렵다는 큰 단점이 존재한다...

• format_list_bulleted Web
• · 2022. 12. 31.
• textsms