⚛️ React/개념

React : 불변성 유지하기 (concat, slice)

배열을 직접적으로 수정하는 메소드 pop, push, shift, unshift, splice 등등.. 얘들은 불변성 유지 때문에 리액트에서 거의 쓰면 안된다. 만약 쓰려면 immer 라이브러리를 이용하면 된다. 새로운 배열을 만드는 메소드 concat, slice, map, filter, reduce, 얘들은 써도 된다. map(): 배열의 모든 요소를 순회하면서 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성한다. filter(): 주어진 조건을 만족하는 배열 요소만으로 새로운 배열을 생성한다. reduce(): 배열의 각 요소를 순회하면서 주어진 함수를 적용하여 하나의 결과값을 얻는다. concat(): 기존 배열과 다른 배열(또는 값)을 합쳐서 새로운 배열을 생성한다. slice(): ..

React : module css (전체 적용되는/컴포넌트별 css)

전체 적용되는 CSS App.js 상단에 아래처럼 css를 import하면 head에 로 박히게 된다. import "./App.css"; 컴포넌트별 css 컴포넌트 상단에 아래처럼 css를 import하면 컴포넌트별로 적용이 된다. (그래서 동일한 이름으로 들어가도 중복되지 않아 편리하다.) 파일명은 해당컴포넌트.module.css로 짓는 게 일반적이다. import styles from "./Hello.module.css"; 출처 : 코딩앙마

React : 18버전 이후 기능들 (automatic batching, useTransition, isPending, useDeferredValue)

18버전 이후로 리액트에서 성능을 향상시킬 수 있는 기능들이 생겼다. automatic batching batching 기능은 state변경함수들이 여러개 연달아 있는 경우 마지막에서만 한번 재렌더링이 일어나는 기능이다. 17버전까지 ajax나 setTimeout 등 늦게 동작하는 코드들 내부에서는 batching이 일어나지 않아 매번 재렌더링되었다. 18버전 이후 위의 경우에도 모두 batching이 일어난다. useTransition 아래 코드처럼 데이터가 10000개 들어있는 array자료가 있고.. 그 개수만큼 div가 있고.. input에 타이핑 할 때마다 div들에 데이터가 업데이트된다면 지연시간이 왕창 발생할 것이다. 전 import {useState} from 'react' let a = ..

React : memo로 재렌더링 막기 (memo, useMemo)

memo 부모컴포넌트가 재렌더링되면 자식컴포넌트도 항상 함께 재렌더링된다. 이 때 자식컴포넌트가 무겁다면 특정 버튼을 클릭할 때마다 모두 재렌더링 되어 로딩시간이 걸리는 등 문제가 생길 것이므로, memo로 자식컴포넌트가 특정 상황에서만 재렌더링되도록 작성해주면 좋다. 쓰기 전 주의사항 memo로 감싼 자식컴포넌트는 기존 props와 현재 props를 검사해 props가 변할 때만 재렌더링한다. 그러므로 props가 매우 길고 복잡하다면 오히려 memo를 쓰는 것이 손해일 수 있다. 전 function 컴포넌트(){}는 물론 당연히 이렇게도 표현이 가능하다. let Child = function(){ return 자식컴포넌트 } 후 memo를 import 해온 후 memo()로 function(){}을 ..

React : lazy로 로딩속도 향상시키기 (lazy, Suspense)

lazy 리액트로 만드는 Single Page Application는 html,js가 한 파일만 생성되기 때문에 무거워져 속도가 느리게 된다. 그럴 땐 파일을 쪼개면 되는데, lazy를 쓰면 된다. 전 import Detail from './Routes/Detail.js' import Cart from './Routes/Cart.js' 위 코드에서 Detail과 Cart js는 첫 페이지에서 불러올 필요가 없기 때문에 아래같은 문법으로 import하면 된다. 후 import { createContext, lazy, Suspense, useEffect, useState} from 'react'; // 여기서 lazy, Suspense const Detail = lazy( () => import('./Rou..

React : 개발자도구 크롬 확장프로그램 (React/Redux Developer Tools)

크롬 확장프로그램 스토어 https://chrome.google.com/webstore/ Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com React Developer Tools 기존 개발자 도구에서 react 구조를 찍어보며 state, props 등을 확인할 수 있다. Profiler 탭에서는 성능확인도 할 수 있다. (녹화 버튼 → 페이지 조작 → 녹화 중지버튼) 오래 걸리는 경우는 대게 서버에서 ajax 요청결과가 늦게 도착해서 그렇다. Redux Developer Tools Redux store에 있던 state를 전부 확인 가능하며, dispatch 날릴 때마다 어떻게 바뀌었는지 로그를 남겨준다. 출처 : 코딩..