React

라우팅이란? 사용자가 요청한 url에 따라 해당url에 맞는 페이지를 보여주는 것. > React는 SPA(Single Page Application)이기 때문에 새로운 페이지를 가져오지는 않는다. - 라우터 컴포넌트 사용자가 입력한 주소를 감지하는 역할을 하며

공식문서calculateValue:function = cachedValue에 값을 리턴할 적절한 함수dependencies:array = useMemo가 작동하기에 "의존하는 값"들을 담는 배열참고자료(youtube)inCorrectVersion같은 state(item

useForm()registerinput 또는 selector 요소에 사용 가능하다. 특징은 아래와 같다.유일한 "name"을 필요로한다.dotSyntax를 사용한다.여러 option을 추가할 수 있다.handleSubmitform의 data를 받아 편하게 제출 가능하

공식문서 Context란?

참고자료 - useRef참고자료 - DOM with Refs참고자료 - 예제 한글자료변수관리를 위해 사용되는 react hooks이다. Ref는 Reference의 약자이다.보통 변수관리라 하면 useState가 일반적으로 떠오를 것이다.이 둘에는 큰 차이가 있다.us

공식문서useEffect와 매우 유사하다.차이점은 해당 스크린이 포커스될 때 동작한다는 것이다.포커스될 때 마다 동작하는 것을 방지하기 위해서는 useCallback을 사용하여 dependencies를 설정해야한다.(useEffect처럼 사용이 안되나보다.)진행중인 R

배경 기존 메인 프로젝트는 MST(MobxStateTree)를 사용하여 상태를 관리했다. 이는 MST의 의도와 맞게 단순히 Clent State만을 다뤘으며, 비동기 데이터 동기화와 같은 Server State 처리는 반복적인 코드 작성으로 직접 처리중이었다. (굉장히

State 공식문서 react의 컴포넌트들은 여러 interaction에 대해 동작을 감지하고 기억하며 적용하는 것이 필요하다. 입력을하고, 버튼을 클릭하며, 제출을 하는 등의 동작이다. 이러한 것들에대한 '기억'을 'State'라고 말한다. React에서는 단순히

CRUD 중 Read시 주로 사용된다. 즉, 데이터 페칭을 목적으로 사용되며 Promise를 기반으로 하는 메서드들을 제공한다.QueryKey: Array 쿼리를 식별하기위한 유일한 key 이는 단순 배열, 값을 포함한 배열, 변수에 의존하는 배열 등의 형태를 가질

cache와의 인터랙션을 위해 사용된다.cache를 전역적으로 사용하기 위해 처음 해야할 일은 App 컴포넌트에 queryClient 인스턴스를 생성하고 Provider에 넣어주는 것이다.이로써 useQueryClient를 통해 queryClient에 접근할 수 있게

Closure의 개념을 활용. 함수형 컴포넌트에서 사용된다. 이 전 상태를 기억하여 컴포넌트의 생명주기를 다룰 수 있게 한다.use~ 방식으로 작명해야 한다.ex) useState, useLogin ...최상위에서만 호출되어야 한다.React 함수 내에서만 호출되어야

useInfiniteQuery 공식문서 공식문서에 따르면 해당 hook은 useQuery의 확장이다.

reactQuery는 QueryCache라는 그릇에 여러 query를 담고있는 구조이며 이 query들은 observer를 통해 component와 소통한다.여기서 이 두 메서드(invalidateQueries, refetch )는 공통적으로 QueryCache에 있는

컴포넌트를 동기화시켜주는 React 자체 제공 시스템(hook).이는 컴포넌트가 mount, update, unmount될 때 실행된다.위에서 언급한 것 처럼 mount, update, unmount될 때 실행된다.각 상황에서 구체적일 실행 시점을 살펴보자.우선 use

메모이제이션? React에서 메모이제이션이란 렌더링 성능을 최적화하는 방법중 하나이다. 계산된 값을 저장해두었다 동일한 계산을 요구할 때 다시 사용하게되어 불필요한 연산을 줄일 수 있다. 하지만 계산된 값을 저장해두는 만큼, 불필요한 사용 시 메모리만 잡아먹는 상황도