시나리오 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(..

두가지 데이터를 비교할 때 깊은 비교와 얕은 비교 방식이 있다. 얕은 비교 기본 데이터 타입의 경우에는 값이 같은지만 비교를 하고, 객체의 경우 참조를 비교한다. const object1 = { x: 1997, y: 02 }; const object2 = { x: 1997, y: 02 }; console.log(object1 === object2) // false 내부 결과값이 같더라도 참조값이 다르기 때문에 false가 리턴된다. 그러므로 만약 Props로 객체 state를 전달할 경우 참조값이 다르기 때문에 리렌더링이 발생한다. 깊은 비교 객체의 경우에 참조만 비교했던 얕은 비교와는 다르게 값으로 비교를 한다. const object1 = { x: 1997, y: 02 }; const object2 ..

Props Drilling은 부모 컴포넌트에서 직접 사용하는 자식 컴포넌트로 Props를 전달할 때 전달용으로만 거쳐가는 컴포넌트가 발생하는 것을 말한다. const ParentComponent = () => { return }; const FirstChildComponent = ({title}) => { return }; const SecondChildComponent = ({title}) => { return }; const ThirdChildComponent = ({title}) => { return {title} }; Props가 실제 사용되는 ThirdChildComponent까지 가기 위해서 First > Second 를 거쳐간다. 이게 예시처럼 Depth가 적은 경우에는 크게 문제가 되지 않..

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); ..

React를 사용하다보면 높은 확률로 ( 거의 무조건 ) Hooks를 마주하게 될 것이다. 당연하게 본인도 React를 사용하면서 Hooks를 아주 애용하면서 잘 사용하고 있다. 이런 Hooks의 핵심? 장점?이 바로 Custom Hook를 만들어서 사용할 수 있다는 것이다. 이미 사용하고 있는 useState, useEffect ... 등은 Rules of Hooks ( 훅의 규칙 ㅋ )만 지켜주면 문제없이 사용할 수 있습니다. 그렇다면 Custom Hook도 마찬가지로 해당 규칙만 지키면 될까요? 또 어떤 경우에 Custom Hook을 만들면 좋을까요? useInput function useInput () { const [state, setState] = useState(""); const onCha..