# ReactHooks

tmdgk10

전역상태관리를 위한 API 입니다.createContext : context 생성Consumer : context 변화 감지Provider : context 전달(to 하위 컴포넌트)App.jsxGrandFather.jsxFather.jsxChild.jsxGrandFa

ses2201

전역상태관리를 사용하지 않는 경우, 특정 컴포넌트에서의 state 변화를 다른 컴포넌트에게 전달하기 위해 여러차례 props를 전달해야함 (이를 props drilling 이라고 부름)context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리

ses2201

들어가기전, 보통 전역상태를 관리할 때는 useContext 훅을 쓰기보다는 Recoil을 썼었고, 상태 같은 경우는 useReducer 훅 대신에 useState를 많이 선택해서 썼었다. 선택할 때 큰 이유는 없었다(그냥 많이 써봤던 것 썼을 뿐..) 그래서 이번에

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 속성을 가지

seungmini

useCallback() 은 리액트에서 내놓은 여러가지 hooks 중 하나이다.함수를 메모제이션 (Memoization) 하기위해 사용된다.메모제이션 (Memoizatio) 이란?함수의 반환 값을 캐시하여 동일한 인자가 함수에 전달될 때 이전에 계산한 값을 반환함으로써

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 📍 시연영상