일반적으로 전역 상태 관리를 위해서는 Redux와 같은 전역 상태 관리 라이브러리를 사용한다. 이때 Context API를 왜 사용하지 말라는 부분을 정리된 글을 많이 봤다. 하지만 이것을 직접 테스트하지 않았기 때문에 이번에 비교를 해보려고 한다. ( 머리로만 이해하는 것과 눈과 손을 함께 사용하는 것 중 후자가 더 좋을 테니 ㅎㅎ ) 작업 Redux 사용하는 패키지는 react-redux, @reduxjs/toolkit 간단한 테스트를 하기 때문에 기본적인 패키지만 사용했다. // /reducer/counter.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { value: 0, }; const counterSlice =..

앞서 useState와 useRef에 대해서 정리를 했었다. [React] useRef 그리고 useState 일반적으로 우리가 상태값을 관리할 때는 useState를 사용한다. 거기에서 state 값이 변경되면 리렌더링이 발생하면서 화면이 새롭게 그려진다. 그런데, 상태값이 변경되더라도 굳이 리렌더링이 필 bum-developer.tistory.com 해당 부분에 대한 보충 내용이지만 좀 더 개념적인 부분이라 따로 작성했다. 제어 컴포넌트 React에 의해서 값이 제어되는 컴포넌트를 말한다. 우리가 자주 사용하는 useState를 사용해서 DOM 요소의 값을 관리하면 제어 컴포넌트이다. const App = () => [ const [value, setValue] = useState(""); const..

최근 성능 최적화에 대해서 공부하던 중 " useMemo와 useRef의 차이가 뭘까? " 에 대해서 궁금증이 생겼다. 둘을 비교하려면 우선 각각 뭔지에 대해서 짧게 알아보자! useMemo 란? React는 DOM에 변화가 있을 때마다 렌더링을 하는데, 현재 컴포넌트가 리렌더링 되더라도 값의 변화가 없는 경우에 똑같이 리렌더링을 한다면 쓸대없이 자원을 낭비하게 된다. 그래서 변화가 생겼을 때, 현재 함수에 유의미한 변화를 발생시키는 경우에만 연산을 다시 수행하게 해주는 것이 useMemo이다. 즉, 컴포넌트 내부에서 발생하는 연산을 최적화시켜주는 Hook이다. const result = useMemo(countingCallback, [deps]); deps 배열에 들어있는 상태가 변경될 때만 연산을 다..

시나리오 React Memo를 사용할 때 같이 이야기가 나오는 친구가 바로 useCallback이다 그래서 useCallback을 사용할 때와 사용하지 않은 함수를 비교한다. 머리론, useCallback이 의미없이 사용되면 일반 함수보다 시간이 더 오래 걸릴 거라는 생각이 들었다. 작업 import React, { useState } from "react"; import { useCallback } from "react"; import styled from "styled-components"; const ChildComponentOne = ({ photos }) => { console.log("ChildComponentOne Render"); const handleClick1 = useCallback(..

React 성능을 측정할 수 있는 Profiler라는 도구가 있다. 사용하기 위해선 크롬에서는 React Developer Tools라는 익스텐션을 설치해야 한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 336ac8ceb on 7/13/2022. chrome.google.com 설치하고 React 프로젝트를 실행해서 개발자 도구를 들어가면 다음과 같이 Profiler가 있다. Pro..

React에서 UI의 성능을 증가시키기 위해서 React.memo를 제공한다. React.memo는 렌더링의 결과를 메모이징해서 새로운 렌더링이 감지될 때, props가 같다면 메모이징한 결과를 재사용한다. const compoenent = React.memo(({title, content}) => { return ( {title} {content} ) }) 다음과 같은 컴포넌트가 있다면, React.memo는 title과 content가 변경되지 않는다면 메모이징된 결과를 다시 사용한다. const ParentsComponent = () => { return anyfuntion()}/> } 부모 컴포넌트에서 자식 컴포넌트에게 상태값만 넘겨주는 것이 아닌, 아무개 함수를 넘겨주는 경우도 있을 것이다. 이..

일반적으로 우리가 상태값을 관리할 때는 useState를 사용한다. 거기에서 state 값이 변경되면 리렌더링이 발생하면서 화면이 새롭게 그려진다. 그런데, 상태값이 변경되더라도 굳이 리렌더링이 필요없는 경우에도 useState를 사용하면 상태가 변경되므로 리렌더링이 발생한다. const Component = () => { const [state, setState] = useState(""); return ( setState(e.currentTaget.value)}/> ) } input에 값을 입력하면 입력할 때마다 리렌더링이 발생한다. 하지만 입력된 값이 변경될 때마다 굳이 화면을 리렌더링해야할 상황인가? 생각해보면 아니다. 만약에 입력한 값이 어디서 동시에 보여져야 한다면 리렌더링이 발생해서 입력한 ..

React를 사용할 때 State로 Map을 사용하는 경우가 있다. 이때 어떤 방식으로 추가, 삭제, 등을 할 것인가? const [state, setState] = React.useState(new Map()); // 추가 const add = (key, value) => { setState((prev) => new Map([...prev, [key, value]])); }; // 없는 경우에만 추가 const upsert = (key, value) => { setState((prev) => new Map(prev).set(key, value)); } // 삭제 const delete = (key) => { setState((prev) => { const newState = new Map(prev); ..