React (10) 썸네일형 리스트형 리액트 성능최적화 8가지 방법 1. state 선언은 어디서 하는 게 좋을까요? 리액트는 특정 state가 변경되면 그 state가 선언된 컴포넌트와 그 하위 컴포넌트들을 모두 리렌더링 시킵니다. 따라서 state가 선언되는 위치를 잘 설계하는 것은 리렌더링 횟수에 엄청난 영향을 끼칩니다. 기본적으로 state의 선언위치는 이렇습니다. 해당 state를 사용하는 컴포넌트들을 잘 구분해놓은 뒤 그 컴포넌트들 중 가장 최상위 컴포넌트에 선언합니다. 만약 그 state를 사용하는 최상위 컴포넌트보다 더 상위 컴포넌트에 state를 선언하면 state를 사용하지 않는 더 많은 컴포넌트들이 state변경에 의해 불필요한 리렌더링을 겪게 됩니다. 예를 들어 다음과 같은 컴포넌트 구조가 있다고 합시다. Index ㄴGroup ㄴUserList ㄴ.. 불변성 유지하며 데이터수정 리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있다. 함수형 프로그램밍의 특징 중 하나가 순수함수를 사용하는 것인데, 여기서 순수함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수이다. 동시에 순수함수는 외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수를 뜻한다. 여기서 외부의 값을 변경하지 않는다는 부분이 불변성과 깊은 연관을 가진다. 불변성 이해하기 원시타입 let string = 'data1' string = 'data2' 위의 코드는 string변수에 'data1'값에서 'data2'값으로 변경시켰는데, 이것은 위에서 말한 불변성을 어긴것처럼 보이지만, 실상은 그렇지 않다. let string = 'data1' // 1... context api Context React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 안에서 데이터를 다루기 위해 사용됩니다. 이 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트, 즉, 위에서 아래, 한쪽으로 데이터가 흐르게 됩니다. 만약 다른 컴포넌트에서 한쪽으로 흐르고 있는 데이터를 사용하고 싶은 경우 또는 다른 컴포넌트에서 사용하고 있는 데이터를 현재의 데이터 흐름에 넣고 싶은 경우가 발생한다면 어떻게 해야할까요? React에서 데이터는 위에서 아래로 흐르게 되므로 사용하고 싶은 데이터와 이 데이터를 사용할 컴포넌트의 공통 부모 컴포넌트에 State를 만들고 사용하고자 하는 데이터를 Props를 전달하면 이 문제를 해결할 수 있습니다. 하지만 이처럼 컴포넌트 .. useMemo,useCallback useMemo useMemo 란? React 공식문서에 적혀있는 useMemo의 기본 구조는 다음과 같다. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 성능 최적화를 위해 도입된 useMemo는 메모이제이션된 값을 반환하며, 특정 값이 변경되었을 때만 입력한 연산을 실행하고, 값이 그대로라면 직전에 연산했던 결과를 그대로 다시 사용하는 방법이다. 또한 useMemo를 통해 전달된 연산(함수)는 렌더링을 하는 중에 실행되기 때문에 렌더링 중에는 하지않는 Side Effect는 useMemo가 아닌 useEffect에서 실행되어야 한다! ⚡Side Effect 란? 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하.. React Router v6 업데이트 React Router v6 정식 릴리즈 React Router v6가 정식으로 릴리즈 되었다. 공식문서 그 동안 사용했던 React Router의 문법이 조금 바뀌었는데 v5문법에 많이 익숙해서 그런지 v6문법과 v5문법이 많이 헷갈린다. ㅎㅎ.. 그럼 어떤점이 바뀌었는지 한번 보자 Switch가 사라지고, Routes 등장 Routes는 기존 Switch 처럼 경로를 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다. Routes로 기존 Switch의 기능을 대체 가능 기존 코드 v6 코드 useHistory가 사라지고, useNavigate 등장 useNavigate로 기존에 useHistory의 기능을 전부 대체 가능 useHistory의 history는 객체였지.. useRef [React] useRef useRef 란? 특정 DOM을 가리킬 때 사용하는 Hook 함수. Ex. 포커스 설정, 특정 엘리먼트의 크기/색상 변경 등.. 리액트를 사용할때 간혹 DOM을 직접 선택해서 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야하던지 다양한 상황이 있습니다. 이럴 땐 리액트에서 ref라는 것을 사용합니다. 함수형 컨포넌트에서 ref를 사용할 때에는 useRef라는 Hooks함수를 사용합니다. useRef 사용하기 3초 뒤에 input창에 포커싱이 되도록 설정해보자. import React, { useRef } from "react"; const App = () => { // 1. Ref객체 만들기 const here = us.. 환경변수 설정,사용법 방법1 config.js export const ELASTIC_URL = '10.20.30.40:9200'; export const ES_INDEX_NAME = 'img_text_data'; export const ES_DOC_TYPE = '_doc' 사용 방법 import * as config from './config'; // .. function someMethod(){ let host = config.ELASTIC_URL;// 이렇게 사용 } 이 방법이 좀 간단합니다. 아래의 방법2는 개발환경/배포환경에 따라 다른 변수가 필요할 때 유용합니다. 방법2 .env.development .env.production .env.development 파일의 내용은 REACT_APP_DB_HOST=192.16.. suspense Suspense를 사용하면 컴포넌트가 렌더링되기 전까지 기다릴 수 있습니다. 예시 : 두 컴포넌트가 데이터를 불러오는 비동기 API 호출을 기다립니다. const resource = fetchProfileData(); function ProfilePage() { return ( ); } function ProfileDetails() { // 비록 아직 불러오기가 완료되지 않았겠지만, 사용자 정보 읽기를 시도합니다 const user = resource.user.read(); return {user.name}; } function ProfileTimeline() { // 비록 아직 불러오기가 완료되지 않았겠지만, 게시글 읽기를 시도합니다 const posts = resource.posts.read(); r.. 이전 1 2 다음
