리액트 공식 문서(react.dev) 읽기더보기Built-in React Hooks 1. useTransition2. useCallback 📍useCallback✅리렌더링 간 함수 정의를 캐시할 수 있는 훅- 컴포넌트 상단에서 호출const cachedFn = useCallback(fn, dependencies) 📍useCallback(fn, dependencies)✅매개변수fn- 종속성 배열(dependency array) 의 원소가 바뀌지 않으면 캐시되는 함수- 종속성 배열의 원소가 바뀌면, 렌더링 중에 전달한 콜백 함수를 리턴하고, 재사용에 대비하여 저장(캐싱) dependencies- fn 코드 내부에서 참조되는 모든 반응형 값(props, state 및 컴포넌트 내부의 모든 변수와 함수) 배..

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

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 1. 렌더링📍렌더링이란?브라우저에서의 렌더링 : DOM 요소를 계산하고 그려내는 것- JavaScript DOM API 가 담당 React의 렌더링- 실제 렌더링 과정은 React에서 대신 처리해주고, 개발자는 UI 를 설계하는데 집중 (선언형 프로그래밍)- React 내부에서 렌더링이 어떻게 실행되는지 이해하고, 이를 최적화할 필요가 있다 📍React에서 리렌더링이 발생하는 시점⭐state가 변했을 때⭐특정 컴포넌트의 state가 변하면, 해당 컴포넌트와 하위 컴포넌트가 모두 리렌더링됨 state를 사용하는 이유- state(변경될 수 있는 데이터)를 UI와 연동하기 위해서 📍React의 렌더링 과정1️⃣기존 컴포넌트의 U..

📍참고 https://www.aurigait.com/blog/drag-and-drop-in-react-without-using-any-external-library/ Drag and Drop in React without using any External Library - Auriga IT Drag and Drop feature in React with little effort using useRef hook. Here we'll see it in action by implementing an easy drag and drop list. www.aurigait.com https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그..