# hook
Using the Effect Hook
Hooks는 Class없이 상태를 관리할 수 있도록 도와준다.Effect hooks는 함수형 컴포넌트 내부에서 side effect를 실행하도록 도와줍니다.대표적인 "side effect"의 예시로 Data fetching, setting up a subscripti
[무작정 따라하기] 훅. 후훅. 리. 리액트 훅. 후훅. 훅. 리. 리액트 훅 알아보기
React 16.8버전부터 새롭게 추가된 Hook은 기존 class를 사용하지 않고, React state와 lifecycle features를 연동할 수 있게 해주는 함수다.기존 class를 사용한 React는 코드의 재사용성이 낮고, 작성하기 까다로우며, reloa
220517 TIL
유튜브 별코딩님의 강의를 보고 작성한 나의 일지state 관리를 도와주는 hook!따지자면, useState 와 마찬가지로 staet 를 생성하고 관리하게 도와주는 도구여러 개의 하위값을 포함하는 복잡한 state 를 다뤄야 할 때, 사용하면 좋다!알아야 할 3가지!R
[스터디-우아한반상회] useRef
이번주는 React에 내장 된 Hook API 중, useRef에 대해서 공부해봤다. useRef를 다루기 전에, Hook에 대해서 한번 정리하고, useRef에 대해서 살펴보자. Hook은 React 16.8 버전부터 React에 새로 추가 된 요소이다. Hook을
220515 TIL
TIL DAY 183 오늘 배운 일 ✔️ React Hooks > 유튜브 별코딩님의 강의를 보고 작성한 나의 일지 useMemo 컴포넌트 성능을 최적화하는 hook useMemo -> Memo = Memoization (메모이제이션) 동일한 값을 리턴하는
[패스트 캠퍼스 FE] 리액트 맛보기 - 3
1️⃣ 컴포넌트 상태 다루기2️⃣ 컴포넌트 사이드이펙트 다루기3️⃣ 커스텀 훅 만들기4️⃣ Hook Flow 이해하기공식문서useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예제: useSt
useCallback과 useMemo 사용하기
랜더링의 최적화를 위해서 사용되는 useCallback은 이미 랜더링되었던 동일한 함수라면, 다시 함수가 선언되지 않는다.
useEffect
리액트 컴포넌트를 관리하고 꿰뚫어 보는 것은 매우 어려운 일이다. 공부를 하며 가장 어렵다고 느껴지는 부분은 새로운 것을 학습할 때가 아니라 그 자체에 대한 기본을 갈고 닦는 것 같다.리액트 훅을 이해하기 위해선 기본적으로 생명주기를 알아야 한다. 기본적으로 useEf
useRef
Javascript에서 HTML태그를 선택할 때는 보통 getElementId를 사용했다.React에서는 useRef라는 Hook함수가 HTML 태그에 접근하도록 도와준다.useRef는 DOM을 직접 선택하여 HTML 태그에 접근가능하게 하는데어떤 상황에서 useRef
useEffect
클래스형 컴포넌트에는 componentDidMount와 같은 생명주기 메서드들이 있고함수형 컴포넌트에는 오늘 자세히 다룰useEffect라는 생명주기관련 훅이 있다.의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수로 함수가 실행되는지 안되는지에 의존한다.
State Lifecycle
컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드이다.이는 특정 시점에 코드가 실행되도록 설정할 수 있다는 것을 의미한다.이 순서에 대해 간략히 요약한다면그리기 : render그리고 난 뒤 : componentDidMo
Class Component vs Functional Component
class안에는 함수와 변수를 넣을 수 있다.이 변수와 함수를 조합해 붕어빵과 몬스터를 만드는 방법을 적어둘 수 있다.그리고 붕어빵과 몬스터를 만들고 싶다면 new 붕어빵()으로 만들어 준다.이렇게 만들어진 붕어빵과 몬스터는 객체 또는 인스턴스라고 부른다.그림의 new