# react hook

122개의 포스트

데브로드 4주차

반성이 많은 한 주다.부지런히 움직이기만 한다고 더 많은 것을 흡수하는 건 아닌 것 같다.컨디션 관리도 못했고, 아침 공부도 효율적이게 쓰지는 못했다.이번주 수업을 듣고 useEffect와 state에 대해 많은 생각을 했다.아직도 와닿지 않는 것들이 많다. 리액트 외

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

React 기초 정리

React는 SPA 개발의 하나로 Facebook에서 개발한 UI 라이브러리로, 복잡한 UI를 간단한 컴포넌트(Component)로 나누어 관리할 수 있도록 도와줍니다. React는 UI의 상태에 따라 뷰를 자동으로 업데이트하고, 재사용성이 높은 컴포넌트를 통해 개발

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

20230221 [react] - 커스텀 훅,react query

반복되는 로직이나 기능을 우리만의 훅으로 만든다. :같은 기능을 하는 handler들이 많이 있다면, 하나로 묶어도 되니까! 기존 코드function App() { const title, setTitle = useState(""); const comment, set

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

#8. useContext? context API는 그럼 뭐지....?

리액트는 여러개 컴포넌트로 구성됨 (트리형태)데이터 흐름은 상위컴포넌트(부모컴포넌트)에서 하위컴포넌트(자식컴포넌트) 즉, 위에서 아래로 데이터를 내려주는 형태최상위 컴포넌트(App)에 전달하고자 하는 state data를 두고, 그 F컴포넌트와 I컴포넌트에 데이터 값을

2023년 2월 13일
·
0개의 댓글
·
post-thumbnail

[React] useRef

React의 useRef Hook

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

#7. useReducer 꼭 써야될까?

❓의문. useState로 상태 변화가 가능한데, useReducer를 굳이 사용하는 이유?👉 취지가 다름 !고객이 은행업무를 본다고 예를 들어보자. 고객은 한 명이 아니고, 또 은행의 상품도 한 가지가 아니다!모든 고객이 은행의 모든 상품 그리고 모든 업무를 직접

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

20230211 [react] - react hook2

리렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링된다.최적화:불필요한 리렌더링을 줄이기 위한 작업이다.이때문에 나온 hook ▼React.memo: 컴포넌

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

20230210 [react] - react hook

:가장 기본적인 hook이다. (카운터나 todolist에 활용!)함수형 컴포넌트 내에서 가변적인 상태를 가지게 한다.state:현재값, setState:state를 변경할 수 있는 set함수(최신상태를 나타냄)useState:초기값인 배열( { } )로 이루어져

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

#4-3. React Component에서 부터 Hooks의 탄생까지(part3. hooks의 탄생)

class형 컴포넌트는 state와 Life Cycle의 관리가 가능하지만 컴포넌트 상태로직을 재활용하기 어렵고, this의 동작방식의 오류 가능성이 있으며 메모리 자원을 낭비한다는 단점이 있었다. 그리하여 state관리와 Life Cycle관리는 불가능하지만 메모리

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

#4-2. React Component에서 부터 Hooks의 탄생까지(part2. component의 종류)

Component는 크게 class형 컴포넌트와 함수형 component로 나뉜다 ! class 그리고 component 상속이 필수임render가 필수임props를 조회할 때 this를 사용함state(상태)를 사용함life cycle과 method를 이용클래스 컴포

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

리액트 훅 useMemo, useCallback

➡ 메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때 맨 처음 계산한 값을 메모리에 저장해서 필요 할때마다 메모리에서 해당 값을 꺼내서 사용하는 것을 말한다. state와 props를 통해 수많은 랜더링이 일어난다.랜더링이 일어날 때 무거운

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

[React Hook] useMutation()

get 이외의 method을 호출할 때 사용하는 React Hook이다. 서버쪽 상태를 변경하는 내용이 주를 이루기 때문에 useQuery보다 간단한 구성을 이루고 있다.예를 들어 로그인 api에 POST를 한다면 다음처럼 사용할 수 있다.useMutation Hook

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

Props/State

React의 props/state 개념

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

React Hook 정리

useState 훅은 함수형 컴포넌트에서 상태값 관리를 위해 사용 / 상태값 변경 함수는 비동기로 동작 / 참조타입을 상태값으로 관리하는 경우 깊은비교, 얕은비교 주의 / 상태값 변경 시, 컴포넌트는 re-rendering(자식 컴포넌트 포함)useEffect 훅은

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

useContext

📌context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 사용법 context 등록

2022년 12월 27일
·
0개의 댓글
·

리액트 훅 시리즈 - Use Effect 2

지난 강의에 이어서 useEffect를 사용하여 hook을 작성하는 것을 실제 예제를 통해 정리해 보겠습니다.이번에 만드는 시리즈는 노마드 코더 님의 실전형 리액트 Hooks 10가지 라는 무료 강의를 제 나름대로 정리해서 포스팅 해 보겠습니다. 더 자세한 강의가 듣고

2022년 12월 10일
·
0개의 댓글
·

리액트 훅 시리즈 - Use Effect

지난 강의에 이어서 이번에는 리액트 훅에서 use Effect를 사용하는 법을 실제 예제를 통해 정리해 보겠습니다.이번에 만드는 시리즈는 노마드 코더 님의 실전형 리액트 Hooks 10가지 라는 무료 강의를 제 나름대로 정리해서 포스팅 해 보겠습니다. 더 자세한 강의가

2022년 12월 10일
·
0개의 댓글
·

리액트 훅 시리즈 - Use State

함수형 컴포넌트에서 State를 사용할 수 있습니다. 이전에 클래스형 컴포넌트에서 했었던 불편한 작업들을 안해도 됩니다. 모든 것이 하나의 함수가 됩니다. 이제 함수형 프로그래밍이 가능합니다.위의 내용은 리액트 훅의 탄생 배경이자 리액트 훅을 써야하는 이유 입니다. 리

2022년 12월 9일
·
0개의 댓글
·
post-thumbnail

리액트 useState를 활용한 숫자 카운트하기

✔ 버튼을 클리시 함수를 실행시킨다.

2022년 12월 8일
·
0개의 댓글
·