이것저것 스터디📚/React - 공식 문서 (52) 썸네일형 리스트형 React 공식문서 -useTransition - useTransition : UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅 function TabContainer() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } // ... } - useTransition이 반환하는 startTransition 함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있다. - useTransition은 훅이므로 컴포넌트나 커스텀 훅 내부에서만 호출할 수 있다. 만약 다른 곳(데.. React 공식문서 -startTransition - startTransition은 UI를 차단하지 않고 state를 업데이트할 수 있다. - 즉, startTransition 함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있다. import { startTransition } from 'react'; function TabContainer() { const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } // ... } - startTransition은 트랜지션이 진행 중인지 여부를 추적하기 위한 isPending 플래그를 제공하지 않는다는 점을 제외하면 useTransition과 매우 .. React 공식문서 -forwardRef - forwardRef를 사용하면 컴포넌트가 ref를 사용하여 부모 컴포넌트에 DOM 노드를 노출할 수 있다. - 즉, 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하도록 하려면 forwardRef를 사용할 수 있다. - forwardRef는 렌더링 함수를 인자로 받고, React는 props 및 ref와 함께 이 함수를 호출한다. const MyInput = forwardRef(function MyInput(props, ref) { return ( {props.label} ); }); Exposing an imperative handle instead of a DOM node(DOM 노드 대신 명령형 핸들 노출하기) - React에서 DOM 요소를 직접 노출하는 대신, 더 안전하고 추상화된 방식으로 상.. React 공식문서 -useRef - useRef : 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅 - useRef의 매개변수에는 초기값(initialValue)을 지정할 수 있는데, 이는 ref 객체의 current 프로퍼티 초기 설정값이며 어떤 유형의 값이든 지정할 수 있다. - useRef는 단일 프로퍼티를 가진 객체를 반환한다. - ref 객체를 JSX 노드의 ref 속성으로 React에 전달하면 React는 current 프로퍼티를 설정한다. - ref는 state와 달리 변경하더라도 리렌더링을 촉발하지 않는다. * 렌더링 중에는 ref.current를 쓰거나 읽지 마세요. - React는 컴포넌트의 본문이 순수 함수처럼 동작하기를 기대한다. - 입력값들(props, state, context)이 동일하면 완전히 동.. React 공식문서 -lazy - lazy를 사용하면 처음 렌더링될 때까지 컴포넌트 코드의 로딩을 지연시킬 수 있다. import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); - 컴포넌트 외부에서 lazy를 호출하여 지연 로드된 React 컴포넌트를 선언한다. 매개변수 * load - Promise 또는 다른 thenable(then 메서드를 가진 Promise와 유사한 객체)을 반환하는 함수이다. - React는 반환된 컴포넌트를 처음 렌더링하려고 시도할 때까지 load를 호출하지 않는다. - React는 load를 처음 호출한 후에는 resolve될 때까지 기다린 다음 resolve된 값을 React 컴포넌트로 렌.. React 공식문서 -<Suspense> - 를 사용하면 자식이 로딩을 완료할 때까지 폴백을 표시할 수 있다. Reference Props - children : 렌더링하려는 실제 UI이다. 렌더링하는 동안 children이 일시 중단되면 Suspense 경계가 fallback 렌더링으로 전환된다. - fallback : 로딩이 완료되지 않은 경우에 실제 UI 대신 렌더링할 대체 UI이다. 유효한 어떤 React 노드든 상관없다. - Suspense는 children이 일시 중단되면 자동으로 fallback으로 전환되고, 데이터가 다시 준비되면 다시 children으로 전환된다. - 렌더링 중에 fallback이 일시 중단되면 가장 가까운 상위 Suspense 경계가 활성화된다. -> "가장 가까운(부모) Suspense 경계를 활성화시킬 수 .. React 공식문서 -memo - memo를 사용하면 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있다. import { memo } from 'react'; const SomeComponent = memo(function SomeComponent(props) { // ... }); - memo로 컴포넌트를 감싸 메모화된 버전의 컴포넌트를 얻을 수 있다. - 메모화된 버전의 컴포넌트는 일반적으로 props가 변경되지 않는 한 부모 컴포넌트가 리렌더링할 때 같이 리렌더링 하지 않는다. * 매개변수 - component : 첫 번째 인자로 메모화 하려는 컴포넌트가 들어간다. - arePropsEqual(optional) : 컴포넌트의 이전 prop 및 새로운 prop의 두 인자를 받는 함수이다. 만약 새로운 prop과.. React 공식문서 -useContext - useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 React 훅이다. - useContext() 는 항상 호출하는 컴포넌트의 트리상 위의 가장 가까운 provider를 찾고, useContext()를 호출하는 컴포넌트 내의 provider는 고려하지 않는다. Specifying a fallback default value(fallback 기본값 지정하기) - React가 부모 트리에서 특정 context의 provider들을 찾을 수 없는 경우, useContext()가 반환하는 context 값은 해당 context를 생성할 때 지정한 기존 값과 동일하다. const ThemeContext = createContext(null); - 기본값은 절대 변경되지 않으며, co.. 이전 1 2 3 4 5 ··· 7 다음