몽환화

https://react.dev/reference/react/Suspense – React" data-og-description="The library for web and native user interfaces" data-og-host="react.dev" data-og-source-url="https://react.dev/reference/react/Suspense" data-og-url="https://react.dev/reference/react/Suspense" data-og-image="https://scrap.kakaocdn.net/dn/k1erZ/hyYG4DfTY9/09KSOXc0YxgEKJPtKc7hf0/img.png?width=1080&height=567&face=0_0_1080_56..

페이스북에서 만든 상태 관리 라이브러리리액트 훅의 개념으로 상태 관리를 시작한다아직 1.0.0 버전이 출시되지 않았다...  Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태 값을 동기 또는 비동기 방식을 통해 변환한다.  ~기본적인 사용법~RecoilRoot를 선언해 스토어를 만들고 atom이라는 상태 단위를 만들어 스토어에 등록한다.이 atom들을 key값으로 구별해 atom의 상태 변화를 구독하고 값이 변경되면 forceUpdate를 통한 강제 렌더링으로 최신 atom값을 가져오게 한다.  R..

useLayoutEffect 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect하하하하하하 그래도 알아보긴 하자  기본적인 사용 방식은 useEffect와 같다컴포넌트의 최상위 레벨에서 또는 자체 훅에서만 호출할 수 있다. 예시)대부분의 컴포넌트는 무엇을 렌더링할지 결정하기 위해 화면에서의 위치와 크기를 알 필요까지는 없다!  그러나 가끔 예외의 경우가 존재하는데, 마우스오버 시 요소 옆에 툴팁을 표시하는 경우 등이 있다. 공간이 충분하다면 툴팁이 적당히 표시되면 되지만, 공간이 충분하지 않다면 툴팁을 아래에 표시하는 등 위치를 변경할 필요성이 있다. 이를 위해서 툴팁의 렌더링을 위해 화면에서의 위치를 알아야 한다. 순서는 다음과 같다 툴팁을 원하는 위치에 렌더링한다(위치가 잘못된 경우..

또 물고뜯으러 옴2024.05.01 - [Front/React] - [React] useRef 물고뜯기 [React] useRef 물고뜯기useRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook 컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언const ref = useRef(initialValue)  컴포넌트가 일부 정보를 “기억”하고 싶지만, 해intothe-universe.tistory.comuseContext리액트의 훅을 모두 물어뜯어버리겠ㄷ ㅏ 가보자고 우선 Context란 무엇인가리액트 애플리케이션은 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있다.부모 가 가지고 있는 데이터를 자식에서도 사용하고 싶다면 props로 넘겨주는 것이 일반적..

useRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook 컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언const ref = useRef(initialValue)  컴포넌트가 일부 정보를 “기억”하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하려면 ref를 사용하세요.  매개변수 initialValue : ref 객체의 current 프로퍼티 초기 설정값, 초기 렌더링 이후부터는 무시됨반환값 ref : 단일 프로퍼티를 가진 다음과 같은 객체를 반환한다{ current: 0 // useRef에 전달한 값 }current : 처음에는 전달한 initialValue로 설정된다  ref.current 프로퍼티를 통해 해당 ref의 current 값에 접근할 수 있다.=>..