# hooks

424개의 포스트
post-thumbnail

useMemo와 useCallback의 차이

React Hooks에 대해 공부하면서 useMemo와 useCallback의 차이에 대해 궁금증이 생기게 되었다.

2022년 9월 28일
·
0개의 댓글
·
post-thumbnail

useLayoutEffect vs useEffect

MountUpdate (when state changes based on any event)UnMountRun lazy initializer RenderReact updates DOMRun Layout EffectsBrowser paints the screenRuns

2022년 9월 27일
·
0개의 댓글
·
post-thumbnail

React - useRef Hook

useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상

2022년 9월 24일
·
0개의 댓글
·

React) useMemo, useCallback, useRef

Memoization 삼형제 react에서 최적화를 위해 제공하는 hook 중에 대표적인 친구들이 바로 useMemo, useCallback, useRef이다. 이 셋은 쓰이는 곳이 각각 다르지만 최적화를 위해 memoization을 사용한다는 공통점이 있다. 여기서

2022년 9월 24일
·
0개의 댓글
·
post-thumbnail

Hooks와 setInterval, 친해지길 바라

페이지가 새로 렌더가 될 때마다 각 페이지에 머무는 시간을 측정하고 싶다.useEffect에 setInterval을 넣어주면 해결이겠지?해당 함수를 useEffect안에 넣어줬는데 seconds 값을 잘 불러오지 못하는 것 같다. 값이 0에서 1로 올라간 후 멈춰있는

2022년 9월 13일
·
0개의 댓글
·

Hooks [REACT]

UseMemo, UseCallback, Component communication, useRef, Hooks https://stackblitz.com/edit/react-ts-vypbqa?file=ComponentComm.tsx

2022년 9월 12일
·
0개의 댓글
·

Drag and Drop using Hook

RefHooking, Using Drag and Drop in React장점 1, 재사용성.: Hooks create a common way to reuse code by incorporating a single function call to use React feat

2022년 9월 11일
·
0개의 댓글
·
post-thumbnail

todolist 만들기(3) useReducer, useContext 실전

앞에서 useReducer 와 useContext사용법을 봤었는데 이번에는 두 hook을 한파일안에 같이 사용해볼 에정이다. useReducer TodoContext.js todolist iteme들을 임의로 세개정도 만들어 주고 action type에 따라 s

2022년 9월 9일
·
0개의 댓글
·
post-thumbnail

todolist만들기(1) useReducer, useContext

todolist를 만들며 useReducer와 useContext를 사용하게 되어 정리해 보았다.useState와 함께 상태관리를 할때 사용하는 훅으로 useContext와 함께 사용하는 경우가 많다.순서대로 살펴보자면 reducer는 state를 인자로 받고 변경된

2022년 9월 8일
·
0개의 댓글
·

useReducer

useState처럼 state를 todtjd하고 관리할 수 있게 해주는 hook 복잡한 하윗값을 쓰게 될때 useState대신 useReducer을 사용하면 좋아여

2022년 9월 6일
·
0개의 댓글
·

[요약] 슬기로운 useContext 사용법

슬기롭게 리액트 훅을 사용해보자.

2022년 9월 5일
·
0개의 댓글
·

Lifecycle

컴포넌트의 Lifecyclemount : 페이지에 장착 됨update : 업데이트 됨unmount : 필요없을 때 제거됨

2022년 9월 5일
·
0개의 댓글
·
post-thumbnail

React hooks - useEffect

컴포넌트의 LifeCycle (함수형 컴포넌트)useEffectReact에서 컴포넌트의 LifeCycle은 크게 3가지로 구분Mount - 브라우저에서 컴포넌트가 처음 렌더링 될 때 실행update - 브라우저에서 컴포넌트가 재 렌더링 될 때 실행Unmount - 컴포

2022년 9월 5일
·
0개의 댓글
·

React 의 Hooks 이란?

Hooks 이란 무엇일까? 모든 용어들은 정의에서부터 그 의미가 시작된다.공식 문서와 블로그들에서는 Hooks 을 무엇이라고 표현할까? 리액트 공식 문서에서는 Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. 정도

2022년 8월 29일
·
0개의 댓글
·
post-thumbnail

React Hooks

수많은 훅스에 대하여 알아볼까?

2022년 8월 28일
·
0개의 댓글
·
post-thumbnail

[React] useRef란?

📋 useRef란? > useRef 는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지 useRef는 저장

2022년 8월 28일
·
1개의 댓글
·

useReducer, useLayoutEffect 훅 알아보기

useReducer, useLayoutEffect 훅에 대해서 알아본다

2022년 8월 21일
·
0개의 댓글
·

[2022.08.19] 리액트 useCallback

useCallback은 memoization 기법으로 컴폰너트 성능을 최적화시켜준다.메모이제이션은 자주 사용되는 값을 받아오기 위해 반복적으로 계산해야한다면 이전에 이미 계산한 값을 캐싱해놓고 필요할 때마다 계산하지 않고 메모리에서 꺼내와서 사용한다.useCallbac

2022년 8월 19일
·
0개의 댓글
·
post-thumbnail

[React] useEffect란?

우선 Side Effect라는 단어에 대해 알아야한다.함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect(부수 효과) 가 있다고 표현한다.하지만 그 Side Effect들은 state, props의 변

2022년 8월 18일
·
1개의 댓글
·
post-thumbnail

[React hooks] useReducer

✔ 현재 App.js의 상태.. data를 참조해야하기 때문에 App.js안에서만 상태관리가 이루어질 수 밖에 없다. 현재 app.js 코드가 길어서 넘 무거움..!! ✔ useReducer 목표: 상태변화 로직들을 컴포넌트에서 분리하여 좀 더 가볍게 만들기.

2022년 8월 18일
·
0개의 댓글
·