몽환화

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://blog.kakaocdn.net/dna/k1erZ/hyYG4DfTY9/AAAAAAAAAAAAAAAAAAAAALBCSSMVMM0SZYR6oijngRNVse_HLu1rPRzp0B_8pAyE/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=%2F47F%2F1baaS4ojOfaYFFPhHDycQs%3D

사실 이번에는 물고뜯기까지는 못하고 앙 물어보기만 해서 물고뜯기라고 못함 그냥 시작해보자고  모종의 이유로 드래그앤드롭을 활용할 일이 매우 많아졌습니다.. 그리고 주로 사용하는 라이브러리가 바로 이react-beautiful-dnd 였기에 공부를 해보았어요사실 냅다 적용부터 해보고 뒤늦게 공부중; 이럴줄 알았으면 토이플젝때 투두리스트 내가맡을걸! 아무튼 시작https://github.com/atlassian/react-beautiful-dnd GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with ReactBeautiful and accessible drag and drop for lists ..

먼저 내부 슬롯 interneal slot과 내부 메서드 internal method란?자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드.ECMAScript 사양에 등장하는 이중 대괄호 ([[...]]) 로 감싼 이름들이 내부 슬롯과 내부 메서드 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아님내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직으로 원칙적으로 접근이나 호출 불가그러나 일부 내부 슬롯과 내부 메서드에 한해 간접적으로 접근할 수 있는 수단 제공  자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함프로퍼티의 상태 : 값, 값의 갱신 여부, 열거..

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

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

useImperativeHandle컴포넌트의 최상위 레벨에서 useImperativeHandle을 호출해 노출할 ref핸들을 사용자가 직접 정의할 수 있다  import { forwardRef, useImperativeHandle } from 'react';const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { return { // ... your methods ... // ... 메서드는 여기에 작성합니다 ... }; }, []); // ...useImperativeHandle(ref, createHandle, dependencies?) ref : forwardR..

타입스크립트 TypeScript: 기본 자바스크립트 문법에 타입을 가미한 것뭔가 파란색을 써야할 것 같ㅇ ㅏ 자바스크립트타입스크립트동적 타입 언어정적 타입 언어인터프리터 언어컴파일 언어(자바스크립트로 컴파일됨)런타임 단계에서 오류 발견컴파일 단계에서 오류 발견 자바스크립트 => 동적 타입 언어로 코드를 실행했을 때인 런타임 단계에서야 오류를 발견할 수 있다타입스크립트 => 정적 타입 언어, 컴파일 단계에서 타입을 검사하기 때문에 실행 전 오류를 발견할 수 있다인터프리터 언어가 아닌 컴파일 언어이다 동적 타입 : 변수의 타입이 런타임 시점에 결정되는 것인터프리터 언어 : 코드를 한줄한줄 읽어가며 바로 명령을 처리하며 컴파일 변환 없이 바로 사용되는 언어 타입스크립트는 결국 자바스크립트로 컴파일해서 사용하는..

물고뜯기 세번째. useReducer컴포넌트의 최상위에 호출하고 reducer를 이용해 state를 관리한다 그럼 reducer가 뭔데?한 컴포넌트에서 state 업데이트가 여러 이벤트 핸들러로 분산되는 경우가 있다. 이 경우 컴포넌트를 관리하기 어려워지므로 state를 업데이트하는 모든 로직을 reducer를 사용해 컴포넌트 외부로 단일 함수를 통합해 관리할 수 있다 컴포넌트 내부의 state 로직을 외부로 빼서 reducer로 옮길 수 있다  import { useReducer } from 'react';function reducer(state, action) { // ...}function MyComponent() { const [state, dispatch] = useReducer(reduce..

또 물고뜯으러 옴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 값에 접근할 수 있다.=>..