# hooks

490개의 포스트

[React] React Hooks

React v16.8에 새로 도입된 기능으로서, 함수 컴포넌트에서도 state 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수 컴포넌트에서는 불가능하던 작업들을 할 수 있도록 도와줍니다.useSta

약 18시간 전
·
0개의 댓글
·
post-thumbnail

useReducer

useReducer useState 처럼 state를 생성하고 관리할수잇게 해주는 도구이다. 여러개의 하위값을 포함하는 복잡한 state를 다뤄야할때 사용하면 코드를 깔끔하게 사용가능하고 유지보수가 편해진다. 구성 Reducer Dispatch Action으로

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

[React] useMemo, React.memo

Memoization - 메모이제이션 동일한 값을 리턴하는 함수를 반복적으로 호출해야 된다면 맨 처음 값을 계산할때 해당값을 메모리에 저장해서 필요할때마다 또 다시 계산하지않고 메모리에서 꺼내서 재사용 하는 기법 (자주 필요한 값을 맨 처음 계산할때 캐싱을 해둬서 그

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

[React] useEffect, useCallback

useEffect useEffect는 렌더링시 발생하는 side effect를 다루기 위한 목적 Mount, Update, Unmount 될때 사용 한다. useEffect는 인자로 Callback 함수를 받는다, 형태 렌더링 될때 마다 실행 화면에 첫 레더링

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

[TIL] useLocation()

useLocation : '사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks'

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

[React] 성능개선

useCallback, useMemo, React.memo 차이점

2023년 1월 29일
·
0개의 댓글
·

Prisma 사용하기

Prisma에 대해 알아봅시다.

2023년 1월 21일
·
0개의 댓글
·
post-thumbnail

[React] 컴포넌트(Component) / Hooks

React의 핵심이라 불리는 컴포넌트(Component)는 UI를 부품화하여 재사용이 가능하게 할 수 있다. React 공식사이트에서는 나와있는 자료를 참고하자면 React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에

2023년 1월 15일
·
0개의 댓글
·
post-thumbnail

[React] Hooks

Hooks의 개념과 useState, useEffect, useMemo, useCallback, useRef과 같이 대표적인 Hook을 학습하고, Hook의 규칙과 Custom Hook을 만들어 실습을 통해 Hooks을 사용해보자!

2023년 1월 12일
·
0개의 댓글
·
post-thumbnail

[React] 커스텀 훅 사용하기

개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가 바로 그것입니다. Custom Hook은 이들 둘

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

React와 Hooks.

첫 날 과제에 뒤쳐진다는 생각이 들어서 힘들었지만수업을 듣고 당일 QUIZ와 과제를 풀어보니 첫 날의 고생이 도움이 되었는 가 보다.어제에 비하면 나름 수월하게 진행되었다.오늘 2일차에는 React에 대해 어제보다 더 심도있게 배운 날이다.// 자료출처: npmtren

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

React Hooks 시리즈 - useState(2)

이름을 입력 했을 때 추가되는 기능 구현

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

React Hooks 시리즈 - useState(1)

위의 update 버튼을 누르면 시간이 1씩 증가하는 코드.useState Hook 가져오기useState Hook을 React에서 가져온다.useState를 호출하는 것은 “state 변수”를 선언할 수 있다는 의미이다. 위에 선언한 변수는 time이라고 부르지만

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

React hooks 시작하기

리액트의 컴포넌트는 라이프 사이클(생명주기)가 존재한다.라이프 사이클은 Mounting(생성 될 때), Updating(업데이트 할 때),Unmounting(제거 할 때) 세가지로 나뉜다.▪ Mounting : DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고

2023년 1월 9일
·
0개의 댓글
·

useReducer

useState처럼 state를 생성하고 관리할 수 있게 해주는 hook복잡한 하윗값을 쓰게 될때 useState대신 useReducer을 사용하면 좋아여useReducer 사용하기 전에 알아둬야할 3가지DispatchReducerAction은행(Reducer)에 철수

2023년 1월 7일
·
0개의 댓글
·

Lifecycle

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

2023년 1월 7일
·
0개의 댓글
·

useEffect 실행 순서

나는 지금까지 useEffect가 top → bootom 순서로 작동하는걸로 알고있었다.하지만 알고봤더니 useEffect는 bottom → top 방식으로 작동되고 있었다.아래 예제를 보자.useEffect 실행 순서useEffect 를 제외한 함수내 요소들이 실행된

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

forwardRef vs useRef

forwardRef를 알려면 먼저 useRef에 대해 할아야 한다. 1) ref값이 변하여도 컴포넌트를 리렌더링 하지 않는다.2) 컴포턴드가 리렌더링를 해도 ref 값은 변하지 않고 유저가 직접 변경해야 한다.3) ref는 HTML DOM element를 직접 조종할수

2023년 1월 4일
·
0개의 댓글
·

useCallBack 함수에 대해 알아보자

useCallBack 함수는 useEffect 와 달리, dependency 비교를 레퍼런스로 하지 않고 밸류로 한다. 리액트 레포지터리에 있는 코드를 보면 알수있다. 그래서 컴포넌트가 리렌더를 하여도, 디펜던씨 리스트에 넣어진 변수들의 밸류값이 변하지 않으면 이전

2023년 1월 4일
·
0개의 댓글
·

[내일배움캠프 WIL] 9주차

일주일을 돌아보며...

2023년 1월 2일
·
0개의 댓글
·