# ReactHooks

25개의 포스트
post-thumbnail

useReducer를 활용한 출석부 만들기

📍 index.jsx 📍 Students.jsx 📍 시연영상

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

useReducer를 공부해 보자..

📍 useReducer란? useState처럼 state를 생성하고 관리해 주는 도구이다. 여러개의 하위값을 포함하는 복잡한 state를 다뤄야 할때, useState 대신 useReducer를 사용하면 더 깔끔하게 코드를 짤 수 있고, 유지보수도 한결 편해진다

2일 전
·
0개의 댓글

useCallback / useMemo

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. React 공식 문서에서는 useCallback을 다음과 같이 말하고 있습니다. 메모제이션된 함수를 반한하는 하는 함수입니다. > 인라인 콜백과 그것의 의존성 값의 배열을 전달하세

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

useMemo를 더 공부해보자.. (useCallback과의 차이점)

컴포넌트 최적화에 사용되는 대표적인 훅은 useMemo와 useCallback이 있다. 오늘은 그 중에서 useMemo에 대해서 공부해보려고 한다.useMemo에서 memo라는 말은 Memoization(메모이제이션)을 뜻하는 말이다.동일한 값을 리턴하는 함수를 반복적

5일 전
·
0개의 댓글

useMemo, useCallback의 사용법

Memoization 기본적인 useMemo와 useCallback에 대한 사용법을 알기 전에 Memoization부터 보는 것이 좋겠다. Memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래민 기법을

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

useContext + ContextAPI를 공부해보자..

리액트는 여러개의 컴포넌트로 이루어져있다. 최상위의 App컴포넌트에서 트리를 형성하는데, 리액트의 데이터 흐름은 위에서 아래로 즉, 부모컴포넌트에서 자식컴포넌트로 props를 통해 전달이 된다.Props를 사용 할 때는, 부모컴포넌트가 자식컴포넌트 태그에 일일히 pro

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

Fe.07 Day.02

첫날 공부한 내용을 복습하고 잤는데.. 정확하게 3시간 자고 두 번째 날이 와버렸다. 피곤에 찌든 상태였지만, 이왕 시작해버린 공부 제대로 하자는 마음가짐으로 자리에 앉았다.두 번째 날의 시작은 우리는 왜 리액트를 배워야 하는가 부터 시작했다. 보다시피 답은 간단했다.

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

Node.js | React | MongoDB | Express (8)

concurrently, antd, redux, reacthooks

2022년 2월 19일
·
0개의 댓글

React Hooks conf 2018

https://www.youtube.com/watch?v=dpw9EHDh2bM

2021년 8월 15일
·
0개의 댓글

Handle an input with React hooks

ref:https://stackoverflow.com/questions/55757761/handle-an-input-with-react-hooks

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

React Hooks 코드 사용 예시모음

useState //선언 const [user, setUser] = useState(<span class="token

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

[react] FE 로그인/회원가입 구현 useState

//앱 미리보기 ⬆️//리액트 프로젝트 '버튼 하나에 두 가지 경로 넣기 react-router-dom/useState'에서 이어집니다.왓챠 UI를 참고하여 FE를 구현하도록 하겠습니다.client/src/components/LoginPage.js 생성client/sr

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

TIL. React hooks_useRef

state를 업데이트하면 컴포넌트는 re-render가 된다. 위 useEffect의 setRenderCount는 infinite loop에 빠지게 된다.여기서 알아야 하는 것이 useRef, Ref는 state와 매우 비슷하다. 이것은 컴포넌트가 re update되지

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

TIL.React hooks_useReducer

useReducer는 state관리에 사용되는 hook이다.이 말은 즉 useState의 대안이 되기도 한다는 의미 그렇다면 useState vs useReducer는 무슨 차이를 가지는가?useState는 useReducer를 사용해서 만들어진다. 그럼 언제 useR

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

[react] 버튼 하나에 두 가지 경로 넣기 react-router-dom/useState

src/components 디렉토리 생성src/components/Navbar.js 생성src/components/Navbar.css 생성

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

TIL.React Hooks_useContext

Context란? 모든 레벨에서 수동적으로 props를 전달하는 거 없이, context는 컴포넌트 트리를 통해 데이터를 전달할 방법을 제공한다.

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

TIL. React Hooks_useEffect

useEffect는 함수형 컴포넌트에서 side effect 처리를 위해 사용된다. 그리고 class형 컴포넌트의 componentdidmount, componentdidupdate와 같은 역할을 함수형 컴포넌트에서 해준다.클래스형 컴포넌트함수형 컴포넌트 useEffe

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

TIL. React Hooks_useState

setState는 비동기(async)다. 그래서 for loop안 현재 value는 0이다. 이전의 setState가 완료되면 setState가 업데이트되도록 하자. 비동기이기에 함수로서 state를 업데이트하는 것이 좋다!2.setCount() Function안에 화

2021년 3월 21일
·
0개의 댓글

React hooks

리액트에서 일반적인 값을 자손에게 전달하는 방법은 하향식으로 전달해야한다.전달 받은 값을 자손에서 부모에게 변경하고 싶다고 알려주려면, 하향식으로 전달받은 함수를 이용해야 한다.Level이 깊어질수록 불편함을 야기한다.이를 해결하기 위한 방법으로 flux, reflux

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

[esercizio] React Hooks 6

React Hooks 연습하기 6. useScroll 6. 결과물 .gif)

2020년 12월 20일
·
0개의 댓글