리액트 공식 문서(react.dev) 읽기 더보기 Built-in React Hooks 1. useTransition 📍useTransition ✅UI blocking 없이 state를 변경할 수 있는 hook const [isPending, startTransition] = useTransition() 📍useTransition() ✅컴포넌트 최상단에서 useTransition() 을 호출하여 일부 상태 업데이트 (set 함수)를 transition으로 표시 import { useTransition } from 'react'; function TabContainer() { const [isPending, startTransition] = useTransition(); // ... } ✅매개변수 - 없음..

리액트 공식 문서(react.dev) 읽기더보기Built-in React Hooks 1. useTransition 📍 React.dev먼저, 아직 베타 사이트였던 React Docs Beta 가 23년 3월 16일 부로 공식 홈페이지로 변경됐다- 그리고, 레거시 사이트 (reactjs.org) 에 접속하면, 새로운 react.dev 로 리디렉트된다 📍Built-in React Hooks 개요- 훅은 컴포넌트에서 여러 리액트 기능을 사용할 수 있게 해준다 (컴포넌트 내부에서만 사용가능)- 내장 훅을 조합해서 새로운 커스텀 훅을 만들 수 있다 📍State Hooks✅상태는 컴포넌트가 정보(예 - 유저 입력)를 기억하게 한다예) form 컴포넌트가 input value를 상태로 저장 ✅컴포넌트에 상태를 ..

React Docs (beta) 번역 및 정리 더보기 Built-in React APIs 1. createContext 2. forwardRef 3. lazy 4. memo 5. startTransition 📍startTransition ✅UI를 non-blocking하며 상태를 업데이트할 수 있게 해준다 startTransition(scope) 📍startTransition(scope) ✅startTransition 함수는 상태 업데이트를 transition(전환) 으로 표시할 수 있다 import { startTransition } from 'react'; function TabContainer() { const [tab, setTab] = useState('about'); function selec..

React Docs (beta) 번역 및 정리 더보기 Built-in React APIs 1. createContext 2. forwardRef 3. lazy 4. memo 📍memo 컴포넌트의 props가 변경되지 않는 경우, 리렌더링을 스킵하게 할 수 있다 const MemoizedComponent = memo(SomeComponent, arePropsEqual?) 📍memo(Component, arePropsEqual?) - memo api로 memoization할 컴포넌트를 래핑한다 - memoized된 버전의 컴포넌트는 리렌더링되지 않는다 (부모 컴포넌트가 리렌더링되어도) 단, props가 바뀌면 리렌더링됨 - memoization 완벽하게 보장되지는 않으며 성능 최적화 용도로만 사용해야 한다 ..

React Docs (beta) 번역 및 정리더보기Built-in React APIs1. createContext2. forwardRef 📍비디오 재생 및 중지하기 예제- 예제https://beta.reactjs.org/reference/react/forwardRef#examples forwardRefA JavaScript library for building user interfacesbeta.reactjs.org video element는 자체 메서드로 play() 와 pause() 를 갖는다App 컴포넌트와 video element가 있는 MyVideoPlayer 컴포넌트가 있다고 가정할 때, App 컴포넌트에서 직접 video element에 접근하게 해보자 ✅MyVideoPlayer.jsimp..

React Docs (beta) 번역 및 정리더보기Built-in React APIs1. createContext2. forwardRef 📍forwardRef✅컴포넌트가 특정 DOM 노드를 ref를 가진 부모 컴포넌트에게 노출하게 해준다즉, useRef로 만든 ref가 props로 타고 내려와 매개변수로 받아 지정할 DOM node를 활용하기 위한 기능const SomeComponent = forwardRef(render) 📍forwardRef(render)✅forwardRef를 호출하여 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하게 한다import { forwardRef } from 'react';const MyInput = forwardRef(function MyInput(props, ref)..