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..