# hook

146개의 포스트

Effect Hook (feat. lifecycle in React)

클래스 컴포넌트의 생명주기와 함수 컴포넌트의 이펙트 훅을 통해서 작동 순서를 비교

3일 전
·
0개의 댓글

커스텀 훅

비동기 리퀘스트를 위한 커스텀 훅을 만들어서 사용해봤다.뭐 대충 이렇게 짰던것 같다. 리스트를 렌더링하려고 구현했는데, 리스폰스 받는데 시간이 조금 걸리면 리스트가 제대로 렌더링되지 않는 문제가 발생했다. 그래서 리액트 공식문서를 보다가 커스텀 훅을 이용해 해결할수 있

4일 전
·
0개의 댓글
post-thumbnail

Rendering, useEffect, useCallback - Infinite Scroll

문제점 : state 가 변경되었을 때 다시 func01 을 실행시키기 위한 useEffect 가 실행되면서 렌더링 되는 과정에서 infiniteScroll 도 다시 실행되면서 setState 가 한번이 아니라 여러번 실행된다.렌더링 순서 1\. 첫 렌더링이 된다.

4일 전
·
0개의 댓글

라이프 사이클? 훅?

useEffect()는 컴포넌트가 마운트 될때, 렌더링이 일어날때, 컴포턴트가 언마운트 될때마다 실행되는 훅(hook)이다.function1은 마운트 될때, 렌더링 될때 실행된다.function2는 언마운트 될때 실행된다.case2 코드는 case1코드와 거의 흡사하다

4일 전
·
0개의 댓글
post-thumbnail

[React]성능 최적화의 useMemo, useCallback

성능최적화를 위한 도구 참고한 포스팅의 글 첫머리에 지극히 공감을 하게 되었다. > 이제 useState와 useEffect에 완전히 익숙해졌다고 느꼈는데, 컴포넌트 내에서 저 두 개의 hook 만으로도 props나 state를 다루는 로직에 관련된 기본적인 기능을 모

4일 전
·
0개의 댓글
post-thumbnail

20210727

react의 hook 메서드중 하나인 useEffect는 DOM이 업데이트 된 후의 동작을 설정할 수 있는 side-effect 메서드로, react class 컴포넌트의 componentDidMount와 componentDidUpdate, componentWillUn

4일 전
·
0개의 댓글
post-thumbnail

클래스 컴포넌트 vs 함수형 컴포넌트

차이점 클ㅐ스형 컴포넌트의 경우 state기능 및 라이프사이클 ,임의의 메서드를 정의 할 수 있는 기능을 사용할 수 있다. 클래스형에는 render함수가 꼭 있어야하고 그안에 보여주어야 할 jsx를 반환해야함 함수형의 장점 클래스형보다 선언하기 편함 메모리도 덜 사용

2021년 7월 23일
·
0개의 댓글
post-thumbnail

surf react : hook - 1

react hook에 대해서

2021년 7월 23일
·
0개의 댓글

useEffect, useCallback, useMemo 비교

기본적으로 세가지 hook은 dependency 관계에 있는 변수 값이 변화하는 것에 연동되어 실행되는데, 구체적인 차이가 무엇인지 비교해보기class component의 life cycle 함수(side effect)를 function component에도 동일하게

2021년 7월 22일
·
0개의 댓글
post-thumbnail

React-hook Memoization을 통한 렌더링 성능올리기

잘하는 엔지니어가 되고 싶습니다!! 그러한 엔지니어가 되려면 정말 많은 능력이 필요할 것 같습니다! 여러 능력 중 기능적인 측면에서 성능을 올릴 수 있는 기법 중 하나인 Memoization에 대해 알아봅시다.

2021년 7월 20일
·
0개의 댓글
post-thumbnail

[React] 05.4 useCallback을 사용하여 함수 재사용하기

useCallback은 useMemo와 비슷한 Hook이다.useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.

2021년 7월 11일
·
0개의 댓글

[React] CustomHook 👉 useClick

https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다.요소를 선택했을 때 click 이벤트를 발생시킬 수 있다. useRef useRef 는 기본적으로 우리가 component의 어떤 부분을 선택할 수 있는 방법이다. document.

2021년 7월 10일
·
0개의 댓글

[React] CustomHook 👉 useTabs

https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다. button tab과 비슷하다고 생각하면 된다!

2021년 7월 10일
·
0개의 댓글

[React] CustomHook 👉 useInput

https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다. 1. use Input이란? input을 업데이트한다. 2.

2021년 7월 10일
·
0개의 댓글
post-thumbnail

TIL-27

20210709 React Hook(useState) 함수형 컴포넌트 / 클래스형 컴포넌트

2021년 7월 9일
·
0개의 댓글

[React] Hook 👉 useRef

1. useRef란? > DOM을 변경할 때 사용한다. 특징 컴포넌트 내부에서만 작동한다. 사용 예시

2021년 7월 7일
·
0개의 댓글
post-thumbnail

리엑트 디자인 패턴 - 컴포넌트 설계

컴포넌트 설계에는 어떠한 디자인 패턴이 존재할까? 나는 지금 어떤 패턴을 사용하고 있을까?

2021년 7월 5일
·
0개의 댓글
post-thumbnail

[TIL-20210629] useEffect / Hook

Hook Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

2021년 6월 30일
·
2개의 댓글
post-thumbnail

[React] 리액트 훅 / React Hook (useState, useEffect)

Hook을 이용하여 클래스형 컴포넌트에선 가능했지만함수형 컴포넌트에서 기존에 할 수 없었던 작업들을 할 수 있습니다.Hook에는 다양한 종류가 존재하고 더 나아가서 커스텀 Hook도 사용자가 만들 수 있습니다.그 중 기본 Hook(useState, useEffect)을

2021년 6월 30일
·
0개의 댓글
post-thumbnail

Api 호출하는 커스텀 훅 만들기

회사에서 Api를 호출할때 react-async 라이브러리를 사용하고 있었는데 이 라이브러리를 사용하면서 불편했던 부분이 있어서 커스텀 훅을 만들기로 결심하게 됐다.우선 react-async 의 사용방식은 아래와 같다.이렇게 api를 GET만 하는 경우에는 사용방식이

2021년 6월 23일
·
0개의 댓글