리액트14 리액트 배칭(Batching)의 모든 것 리액트 배칭(Batching)의 모든 것 - 예시와 설명을 잘해두었습니다. 배칭: 리액트의 상태값을 일정한 주기로 처리하는 작업 React v18 이후 createRoot 함수를 사용함으로써 Automatic Batching 기능이 가능해졌습니다. 따라서 이벤트 핸들러 함수 내에 여러 setter가 사용되어도 같이 배칭으로 묶어서 처리해줍니다. 기존에는 여러 번 렌더링이 일어났어요. 참고 - 요즘 IT 2024. 3. 13. [React Custom Hooks] Form hooks ver 0.1 (with TypeScript) 영상을 참고하여 직접 Form 관련 커스텀 훅을 간단히 제작해보았습니다. 아직 미숙한 부분이나 부족한 점이 많지만, 실무, 사이드 프로젝트 등 여러 경험들을 토대로 저만의 커스텀 훅을 더 잘 보완해나가겠습니다. // form-hooks.ts import React, { useCallback, useState } from 'react'; export interface IuseInputProps { type: string; defValue: string | number; } const useInput = ({ type, defValue }: IuseInputProps) => { const [value, setValue] = useState(defValue); return { inputProps: { type.. 2022. 4. 21. [Learning React] 12장 - 리액트와 서버 (마지막) 12.1 아이소모피즘과 유니버설리즘 비교 - isomorphic; 브라우저가 아닌 플랫폼에서 리액트를 렌더링한다는 의미 - UI를 서버에서 렌더링한 결과를 브라우저에 보내서 표시 - 서버 사이드 렌더링; 앱의 성능, 이식성, 보안 향상 - Universal; 완전히 같은 코드를 여러 환경에서 실행할 수 있다는 의미 - 같은 코드를 브라우저나 서버에서 모두 사용 가능 - 노드를 사용해서 서버 구축 시 브라우저와 서버 환경에서 상당한 양의 코드 재사용 가능 - 서버와 브라우저에서 실행될 수 있는 코드 - 클라이언트와 서버 도메인 - 노드 사용시 isomorphic-fetch/https 모듈을 사용하여 fetch 구문 활용 가능 12.2 서버 렌더링 리액트 - ReactDOM.renderToString 메서드.. 2022. 2. 2. [Learning React] 11장 - 리액트 라우터 11.0 리액트 라우터 - 라우팅 - SPA에서는 JS가 정보를 가져와서 UI 갱신 - 라우팅: 클라이언트의 요청을 처리할 endpoint 찾는 과정 - endpoint를 사용하여 요청받은 콘텐츠 식별 가능 - 리액트에는 표준 라우터가 없음 - 리액트 라우터; 리액트 앱을 위한 라우팅 솔루션 11.1 라우터 사용하기 - react-router, react-router-dom 모듈 - App 컴포넌트를 컴포넌트 자식으로 넣기 (index.js) - Routes 컴포넌트 안에 Route 컴포넌트의 프로퍼티로 path, element 설정 (App.js) - react-router-dom은 브라우저 링크를 만들어주는 Link 컴포넌트 제공 - to 프로퍼티 활용 11.2 라우터 프로퍼티 - useLocatio.. 2022. 2. 2. 이전 1 2 3 4 다음 반응형