# react hook
데브로드 4주차
반성이 많은 한 주다.부지런히 움직이기만 한다고 더 많은 것을 흡수하는 건 아닌 것 같다.컨디션 관리도 못했고, 아침 공부도 효율적이게 쓰지는 못했다.이번주 수업을 듣고 useEffect와 state에 대해 많은 생각을 했다.아직도 와닿지 않는 것들이 많다. 리액트 외
React 기초 정리
React는 SPA 개발의 하나로 Facebook에서 개발한 UI 라이브러리로, 복잡한 UI를 간단한 컴포넌트(Component)로 나누어 관리할 수 있도록 도와줍니다. React는 UI의 상태에 따라 뷰를 자동으로 업데이트하고, 재사용성이 높은 컴포넌트를 통해 개발
20230221 [react] - 커스텀 훅,react query
반복되는 로직이나 기능을 우리만의 훅으로 만든다. :같은 기능을 하는 handler들이 많이 있다면, 하나로 묶어도 되니까! 기존 코드function App() { const title, setTitle = useState(""); const comment, set
#8. useContext? context API는 그럼 뭐지....?
리액트는 여러개 컴포넌트로 구성됨 (트리형태)데이터 흐름은 상위컴포넌트(부모컴포넌트)에서 하위컴포넌트(자식컴포넌트) 즉, 위에서 아래로 데이터를 내려주는 형태최상위 컴포넌트(App)에 전달하고자 하는 state data를 두고, 그 F컴포넌트와 I컴포넌트에 데이터 값을
#7. useReducer 꼭 써야될까?
❓의문. useState로 상태 변화가 가능한데, useReducer를 굳이 사용하는 이유?👉 취지가 다름 !고객이 은행업무를 본다고 예를 들어보자. 고객은 한 명이 아니고, 또 은행의 상품도 한 가지가 아니다!모든 고객이 은행의 모든 상품 그리고 모든 업무를 직접
20230211 [react] - react hook2
리렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링된다.최적화:불필요한 리렌더링을 줄이기 위한 작업이다.이때문에 나온 hook ▼React.memo: 컴포넌
20230210 [react] - react hook
:가장 기본적인 hook이다. (카운터나 todolist에 활용!)함수형 컴포넌트 내에서 가변적인 상태를 가지게 한다.state:현재값, setState:state를 변경할 수 있는 set함수(최신상태를 나타냄)useState:초기값인 배열( { } )로 이루어져
#4-3. React Component에서 부터 Hooks의 탄생까지(part3. hooks의 탄생)
class형 컴포넌트는 state와 Life Cycle의 관리가 가능하지만 컴포넌트 상태로직을 재활용하기 어렵고, this의 동작방식의 오류 가능성이 있으며 메모리 자원을 낭비한다는 단점이 있었다. 그리하여 state관리와 Life Cycle관리는 불가능하지만 메모리
#4-2. React Component에서 부터 Hooks의 탄생까지(part2. component의 종류)
Component는 크게 class형 컴포넌트와 함수형 component로 나뉜다 ! class 그리고 component 상속이 필수임render가 필수임props를 조회할 때 this를 사용함state(상태)를 사용함life cycle과 method를 이용클래스 컴포
리액트 훅 useMemo, useCallback
➡ 메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때 맨 처음 계산한 값을 메모리에 저장해서 필요 할때마다 메모리에서 해당 값을 꺼내서 사용하는 것을 말한다. state와 props를 통해 수많은 랜더링이 일어난다.랜더링이 일어날 때 무거운
[React Hook] useMutation()
get 이외의 method을 호출할 때 사용하는 React Hook이다. 서버쪽 상태를 변경하는 내용이 주를 이루기 때문에 useQuery보다 간단한 구성을 이루고 있다.예를 들어 로그인 api에 POST를 한다면 다음처럼 사용할 수 있다.useMutation Hook
React Hook 정리
useState 훅은 함수형 컴포넌트에서 상태값 관리를 위해 사용 / 상태값 변경 함수는 비동기로 동작 / 참조타입을 상태값으로 관리하는 경우 깊은비교, 얕은비교 주의 / 상태값 변경 시, 컴포넌트는 re-rendering(자식 컴포넌트 포함)useEffect 훅은
useContext
📌context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 사용법 context 등록
리액트 훅 시리즈 - Use Effect 2
지난 강의에 이어서 useEffect를 사용하여 hook을 작성하는 것을 실제 예제를 통해 정리해 보겠습니다.이번에 만드는 시리즈는 노마드 코더 님의 실전형 리액트 Hooks 10가지 라는 무료 강의를 제 나름대로 정리해서 포스팅 해 보겠습니다. 더 자세한 강의가 듣고
리액트 훅 시리즈 - Use Effect
지난 강의에 이어서 이번에는 리액트 훅에서 use Effect를 사용하는 법을 실제 예제를 통해 정리해 보겠습니다.이번에 만드는 시리즈는 노마드 코더 님의 실전형 리액트 Hooks 10가지 라는 무료 강의를 제 나름대로 정리해서 포스팅 해 보겠습니다. 더 자세한 강의가
리액트 훅 시리즈 - Use State
함수형 컴포넌트에서 State를 사용할 수 있습니다. 이전에 클래스형 컴포넌트에서 했었던 불편한 작업들을 안해도 됩니다. 모든 것이 하나의 함수가 됩니다. 이제 함수형 프로그래밍이 가능합니다.위의 내용은 리액트 훅의 탄생 배경이자 리액트 훅을 써야하는 이유 입니다. 리
