# hook
.png?w=120)
커스텀 훅
비동기 리퀘스트를 위한 커스텀 훅을 만들어서 사용해봤다.뭐 대충 이렇게 짰던것 같다. 리스트를 렌더링하려고 구현했는데, 리스폰스 받는데 시간이 조금 걸리면 리스트가 제대로 렌더링되지 않는 문제가 발생했다. 그래서 리액트 공식문서를 보다가 커스텀 훅을 이용해 해결할수 있
Rendering, useEffect, useCallback - Infinite Scroll
문제점 : state 가 변경되었을 때 다시 func01 을 실행시키기 위한 useEffect 가 실행되면서 렌더링 되는 과정에서 infiniteScroll 도 다시 실행되면서 setState 가 한번이 아니라 여러번 실행된다.렌더링 순서 1\. 첫 렌더링이 된다.
라이프 사이클? 훅?
useEffect()는 컴포넌트가 마운트 될때, 렌더링이 일어날때, 컴포턴트가 언마운트 될때마다 실행되는 훅(hook)이다.function1은 마운트 될때, 렌더링 될때 실행된다.function2는 언마운트 될때 실행된다.case2 코드는 case1코드와 거의 흡사하다
[React]성능 최적화의 useMemo, useCallback
성능최적화를 위한 도구 참고한 포스팅의 글 첫머리에 지극히 공감을 하게 되었다. > 이제 useState와 useEffect에 완전히 익숙해졌다고 느꼈는데, 컴포넌트 내에서 저 두 개의 hook 만으로도 props나 state를 다루는 로직에 관련된 기본적인 기능을 모
20210727
react의 hook 메서드중 하나인 useEffect는 DOM이 업데이트 된 후의 동작을 설정할 수 있는 side-effect 메서드로, react class 컴포넌트의 componentDidMount와 componentDidUpdate, componentWillUn
클래스 컴포넌트 vs 함수형 컴포넌트
차이점 클ㅐ스형 컴포넌트의 경우 state기능 및 라이프사이클 ,임의의 메서드를 정의 할 수 있는 기능을 사용할 수 있다. 클래스형에는 render함수가 꼭 있어야하고 그안에 보여주어야 할 jsx를 반환해야함 함수형의 장점 클래스형보다 선언하기 편함 메모리도 덜 사용
useEffect, useCallback, useMemo 비교
기본적으로 세가지 hook은 dependency 관계에 있는 변수 값이 변화하는 것에 연동되어 실행되는데, 구체적인 차이가 무엇인지 비교해보기class component의 life cycle 함수(side effect)를 function component에도 동일하게
React-hook Memoization을 통한 렌더링 성능올리기
잘하는 엔지니어가 되고 싶습니다!! 그러한 엔지니어가 되려면 정말 많은 능력이 필요할 것 같습니다! 여러 능력 중 기능적인 측면에서 성능을 올릴 수 있는 기법 중 하나인 Memoization에 대해 알아봅시다.
[React] 05.4 useCallback을 사용하여 함수 재사용하기
useCallback은 useMemo와 비슷한 Hook이다.useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.
[React] CustomHook 👉 useClick
https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다.요소를 선택했을 때 click 이벤트를 발생시킬 수 있다. useRef useRef 는 기본적으로 우리가 component의 어떤 부분을 선택할 수 있는 방법이다. document.
[React] CustomHook 👉 useTabs
https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다. button tab과 비슷하다고 생각하면 된다!
[React] CustomHook 👉 useInput
https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다. 1. use Input이란? input을 업데이트한다. 2.
[TIL-20210629] useEffect / Hook
Hook Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
[React] 리액트 훅 / React Hook (useState, useEffect)
Hook을 이용하여 클래스형 컴포넌트에선 가능했지만함수형 컴포넌트에서 기존에 할 수 없었던 작업들을 할 수 있습니다.Hook에는 다양한 종류가 존재하고 더 나아가서 커스텀 Hook도 사용자가 만들 수 있습니다.그 중 기본 Hook(useState, useEffect)을
Api 호출하는 커스텀 훅 만들기
회사에서 Api를 호출할때 react-async 라이브러리를 사용하고 있었는데 이 라이브러리를 사용하면서 불편했던 부분이 있어서 커스텀 훅을 만들기로 결심하게 됐다.우선 react-async 의 사용방식은 아래와 같다.이렇게 api를 GET만 하는 경우에는 사용방식이