# ReactHooks

ses2201

1) useState와 lazy initialization https://yceffort.kr/2020/10/IIFE-on-use-state-of-react

ses2201

Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 (Render 자체가 화면을 다시 그리는 것이 아니라, Virtual Dom을 그림으로써 어떤 부분을 바꿔야할지 계산하는 과정임)Paint: 실제 스크린에 Layout을 표시하고

ses2201

useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게

ses2201

전에는 useState, useEffect로 거의 99프로의 코딩을 했었지만, 이제는 조금 달라져야하지 않을까 하여 useRef, useMemo, useLayoutEffect 등의 훅들을 정리하는 포스트를 작성하게 되었다. useRef 함수는 current 속성을 가지

llvovll89

react 연습을 위해 다이어리앱을 만들어보자 생각을 하였다.프로젝트 구조는우측 (side bar) = 다이어리 간략한 요약 ( title / content / 마지막 작성 time )좌측 (main) = 아무 컨텐츠가 없을 시 그냥 randerpage.add 버튼을

minhyuk00

useCallback은 useMemo와 비슷한 Hook입니다. useMemo는 특정 결괏값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수입니다.useCallback은 첫 번째 인자로 넘어온 함수를

zoo0

html, css, javascript만으로는 큰 프로젝트를 하기에 어려움이 있다.또 그 안에 존재하는 button이나 input들을 매번 하나하나 만들기엔 힘들고 비효율적이다.잘 쪼개서 만들어놓고 레고상자에 담아놓은 다음 필요에 의해 꺼내서 사용할 수 있는 방법이 있

jangdu

Counter.tsxApp.tsx

tk050501

개인적으로 React에서 라우팅을 할 때 요긴하게 쓸 수 있는 Hooks 2가지를 소개 해보겠습니다. useLocationuseMatch우리는 보통 리액트에서 브라우저의 URL에 따라 Route 해주고또 클라이언트의 URL 경로를 UI로 지정해 주기 위해 Link를 사

dlrudgk95

React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다.예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로

reasonz

useMemo는 컴포넌트 성능을 최적화하는 방법 중 하나이다.useMemo에서 메모(Memo)는 memoization을 의미한다.memoization은 메모리에 넣기라는 뜻이다.메모이제이션이란, 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 메모리

dovnaldisn

인프런 | 따라하며 배우는 노드, 리액트 시리즈 - 기본강의 (John Ahn님)를 듣고 정리한 내용입니다.

reasonz

함수형 컴포넌트에서 useRef를 호출하면 ref 오브젝트를 반환해준다.변수명.current로 접근하여 초기값을 변경할 수 있다.반환된 ref는 렌더링 여부와 관계없이 값을 그대로 유지할 수 있다. (unmount 되기 전까지)어떤 값을 저장할 때!state를 사용한다

aimzero9303

yarn add react-pdf

aimzero9303

🙋🏻‍♂️ 우리가 만든 Next.js 프로젝트가 있다고 가정하고, 깃허브에 배포하는 과정을 순서대로 정렬해 보았다. 📍 package.json homepage 에 url 을 추가한다. build script 에 next export 를 추가했다. script

aimzero9303

📍 index.jsx 📍 Students.jsx 📍 시연영상

aimzero9303

📍 useReducer란? useState처럼 state를 생성하고 관리해 주는 도구이다. 여러개의 하위값을 포함하는 복잡한 state를 다뤄야 할때, useState 대신 useReducer를 사용하면 더 깔끔하게 코드를 짤 수 있고, 유지보수도 한결 편해진다

rlaclgns321

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. React 공식 문서에서는 useCallback을 다음과 같이 말하고 있습니다. 메모제이션된 함수를 반한하는 하는 함수입니다. > 인라인 콜백과 그것의 의존성 값의 배열을 전달하세

aimzero9303

컴포넌트 최적화에 사용되는 대표적인 훅은 useMemo와 useCallback이 있다. 오늘은 그 중에서 useMemo에 대해서 공부해보려고 한다.useMemo에서 memo라는 말은 Memoization(메모이제이션)을 뜻하는 말이다.동일한 값을 리턴하는 함수를 반복적

jinhengxi

Memoization 기본적인 useMemo와 useCallback에 대한 사용법을 알기 전에 Memoization부터 보는 것이 좋겠다. Memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래민 기법을