리액트 공식 문서(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)..

React Docs (beta) 번역 및 정리 더보기 1. Built-in React APIs 1-1. createContext 📍createContext 컴포넌트가 읽거나 제공할 수 있는 context를 생성한다 const SomeContext = createContext(defaultValue) 📍createContext(defaultValue) 컴포넌트 외부에서 호출하여 context를 생성한다 import { createContext } from 'react'; const ThemeContext = createContext('light'); ✅매개변수 defaultValue - 일치하는 context provider가 없을 때 context가 가질 값 - 의미있는 기본값이 없으면 null을 명시하..

📍구현할 것 1. 좌우 버튼 클릭 시 다음 슬라이드로 넘어감 (React) 2. 슬라이드가 변경될 때 부드럽게 이동 (CSS) 3. 자동 슬라이딩 (React) 📍구현 먼저 슬라이드 컨텐츠 컴포넌트 생성

📍완성된 이미지 📍구현 2개의 element가 필요하다 - 그라데이션 element - 백그라운드 element 그라데이션 element는 회색 - 흰색 - 회색 이렇게 그라데이션 되게 스타일링한다 background element (회색) 위로 그라데이션 element가 지나가게 하면 된다 - 이때, 시작 지점은 | 그라데이션 | 백그라운드 | { return ( ); }; export default Skeleton; - Skeleton.scss .skeleton-box { display: inline-block; height: 1em; // 부모 요소와 같게 position: relative; overflow: hidden; background-color: #DDDBDD; &::after { posi..