프레임워크/React27 [React] useMemo 🔗 출처 🖥️ useMemo의 기능 ⚠️ useMemo는 결과값을 기억해두는 React Hook이기 때문에 빈번하게 사용할 경우 성능에 안좋은 영향을 줄 수 있습니다. 1️⃣ 복잡한 계산을 저장해 놓는 용도 아래 코드를 예시로 들자면 🙅♂️ 렌더링 될 때마다 expensiveCalculate 함수가 재실행되기 때문에 복잡한 작업을 수행해야 하는 경우 불필요한 함수가 매번 재실행되는 것이기 때문에 성능 저하 문제를 초래할 수 있습니다. 즉, 복잡한 작업을 할수록 비싼 값을 내야 한다. import React, { useState } from "react"; const expensiveCalculate = (numbers) => { console.log("calculate sum...."); return .. 2024. 3. 29. [React] useRef 🔗 출처 : 설명도 너무 깔끔하게 잘해주시고, 예제도 같이 따라 해볼 수 있어서 useRef에 대해서 어렵게 느껴진다면 시청해 보기 아주 좋을 것 같습니다! 🙅♂️ React에서 변수를 사용하지 못하는 이유 값의 변화를 UI에 실시간으로 보여줄 수 없다. 화면이 렌더링 되면 변수의 값이 초기화된다. 🥸 특징 : useState의 장점 + 변수의 장점을 합친 React Hook이다 👉 useState의 특징 렌더링 되도 값이 유지된다. 변화를 실시간으로 화면에 보여줘야 하기 때문에 매번 렌더링이 일어난다. (렌더링이 많아지면 성능에 안 좋음) 👉 변수의 특징 렌더링 되면 값이 사라진다. 변화를 실시간으로 화면에 보여주지 않아도 되기 때문에 성능에 좋다. 👉 useRef의 특징 useState와 변수의 장.. 2024. 3. 28. [React] useLayoutEffect 🔗 출처 useLayoutEffect – React The library for web and native user interfaces react-ko.dev 🤓 정의 useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect입니다. useEffect 🟰 첫 렌더링, 의존성 배열에 넣어준 state의 변화를 감지하여 콜백함수가 실행됩니다. 🆚 콜백함수는 비동기적으로 동작하기 때문에 다른 작업에 의해 blocking 하지 않고 필요한 시기에 실행됩니다. 🆚 화면이 업데이트된 후 effect가 실행됩니다. useLayoutEffect 🟰 첫 렌더링, 의존성 배열에 넣어준 state의 변화를 감지하여 콜백함수가 실행됩니다. 🆚 콜백함수는 동기적으로 동작하기 때문에 해당.. 2024. 3. 25. [React] useId 🔗 출처 useId – React The library for web and native user interfaces react.dev 🤓 정의 useId()는 React 18 버전에 출시된 훅으로 접근성 속성에 전달될 수 있는 고유 Id를 생성하기 위한 React Hook입니다. 🥸 문법과 특징 const id = useId() 매개변수를 사용하지 않습니다. 라벨과 관련된 Id 생성 : label 요소와 그와 연결된 입력 요소(input, select, textarea)에 대한 id와 htmlFor 속성을 사용할 때 사용합니다. 여러 관련 요소에 대한 Id 생성 : 여러 관련 요소에 Id를 제공해야 하는 경우 호출하여 공유 접두사를 생성할 수 있습니다. import { useId } from "reac.. 2024. 3. 24. [React] 제어 컴포넌트 vs 비제어 컴포넌트 react-hook-form 라이브러리에 대한 강의를 듣다가 비제어 컴포넌트(uncontrolled component)에 대해서 알게 되었고, 그렇다면 제어 컴포넌트와 비제어 컴포넌트의 각각의 특징과 차이점은 뭘까?라는 궁금증으로 생각이 가지를 뻗어가면서 읽어본 블로그인데, 공식문서를 우선적으로 읽어본 후에 이해가 안가는 부분이 있을 경우 아래 블로그를 참고하면 제어 컴포넌트와 비제어 컴포넌트에 대한 이해도가 높아질 것이라고 생각된다. 기존에 사용하고 있던 방식이 제어 컴포넌트였다는 것도 다시 한번 알게 되었고, 그렇다면 비제어 컴포넌트는 어떤 상황에서 사용할 수 있을까?를 생각해봤을 때 단순한 로그인 기능 (조건부 버튼 비활성화 기능 없는 거)이나 검색 기능(실시간 조회 X), 유효성 검사가 들어가지 .. 2023. 8. 14. [React] Reconciliation(재조정), Virtual DOM(가상돔), Diffing Algorithm(비교 알고리즘) 알아보기 Reconciliation(재조정) 정리하자면 "React는 컴포넌트에 변화가 생길 때마다 모든 컴포넌트 요소를 재렌더링 하는 게 아니라 실제 돔(Real DOM)과 가상돔(Virtual DOM)을 비교하여 변경된 요소나 속성만 변경해주는 비교 알고리즘(Diffing Algorithm)을 사용한다."는 뜻이다. → 가상의 표현(Virtual DOM)을 메모리에 저장하고 실제 DOM과 동기화하는 과정 === 재조정(Reconciliation) Virtual DOM(가상돔) Real DOM을 직접 변경하게 되면 모든 컴포넌트가 재렌더링 되어야 하기 때문에 렌더링 횟수가 많아지고, 그에 따른 비용이 늘어나게 됩니다. 이를 방지하기 위해 React의 Virtual DOM은 최소한의 DOM만을 조작하여 실제 DO.. 2022. 10. 21. [React] useEffect vs useLayoutEffect 우연한 기회로 useLayoutEffect의 존재를 알게 되었다. 일단 React 공식문서를 한번 훑어보고 블로그 글을 참조해서 개념을 정리해 보았다. 내 생각에는... 그냥 면접 질문용이 아닐까 싶다. (실전에서 잘 안 쓰는 것 같음) 차이점 (useLayoutEffect 사용하지 말래요.) useEffect와 useLayoutEffect를 비교하려고 보았을 때 둘은 매우 유사한 이름을 가지고 있고 공식문서 상에서도 둘은 동일하다고 말한다. 차이점은 useEffect는 브라우저에 화면이 그려진 후에 실행되고, useLayoutEffect는 브라우저에 화면이 그려지기 전에 실행된다는 점인 것 같다. (+ useLayoutEffect는 동기적으로 발생한다.) 이정도면 useLayoutEffect는 사용하지.. 2022. 10. 21. [React] Side Effect(useEffect) 컴포넌트의 상태 관리와 사이드 이펙트 1. 컴포넌트의 상태와 관리에 대해 알아본다. 2. 컴포넌트의 사이드 이펙트에 대해 알아본다. velog.io [React] Side Effect란? React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side Effect라고 한다. 대표적인 예로어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우,일단 화면에 velog.io React에서의 사이드 이펙트(Side Effect)란? - 사이드 이펙트란 사전적 의미로 원래의 목적과 다르게 다른 효과가 발생하는 것을 말한다. - 리액트에서의 사이드 이펙트란 변경이나 효과가 일어날 때 다른 효과가 발생 할 수 있도록 설정하는 것이다. 이전의 코드에서 input에 값을 입력할 때 뿐.. 2022. 6. 21. [React] useReducer 컴포넌트의 state를 생성하고 관리하기 위해서 지금까지 useState Hook을 사용 해왔었는 데요. React Hook에서는 상태 관리를 위한 Hook으로 useReducer도 제공하고 있습니다! useReducer는 useState처럼 state를 생성하고 관리 할 수 있게 도와주는 도구입니다. 여러 개의 하위 값을 포함하는 복잡한 state를 다룰 경우 useReducer를 사용하면 훨씬 더 깔끔하게 코드를 작성 할 수 있습니다. 물론 유지보수에도 좋습니다! useReducer는 Reducer, Dispatch, Action 이 세가지로 이루어져 있습니다. 1️⃣ Reducer 2️⃣ Dispatch 3️⃣ Action 한가지 상황을 예로 들어 설명 하겠습니다. 철수라는 아이가 계좌에서 만원을 .. 2022. 3. 1. 이전 1 2 3 다음 728x90
