'💻개발/React' 카테고리의 글 목록

React.memo, useMemo, useCallback 언제 써야 할까?

💻개발/React 2024. 9. 22. 18:47

1. 웹에서 렌더링이란?웹 브라우저가 HTML, CSS, Javascript 등의 웹 자원을 해석해 사용자에게 시작적으로 표시하는 과정주요 단계HTML 파싱 -> DOM(Document Object Model) 트리 생성DOM: 문서 구조를 나타내는 트리 형태의 데이터 구조, 각 요소는 노드로 표현CSS 파싱 -> CSSOM(CSS Object Model) 트리 생성스타일 규칙을 기반으로 각 요소에 적용될 스타일 정보 포함Render 트리 생성DOM + CSSOM = Render 트리화면에 실제로 표시될 요소만 포함, 각 요소 스타일 포함(display: none 이면 포함 안됨)Layout (Reflow)각 요소 위치와 크기를 계산하는 과정, 화면 배치 결정(DOM, CSSOM이 변경되면 다시 수행됨)..

개발 모드에서 API 요청할 때 프록시 설정하기 Proxying API Requests in Development

💻개발/React 2023. 7. 11. 13:48

Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev * 참고: 이 기능은 react-scripts@0.2.3 이상에서 사용할 수 있습니다. 사람들은 종종 백엔드 구현과 동일한 호스트 및 포트에서 프런트 엔드 React 앱을 제공합니다. 예를 들어 앱이 배포된 후 프로덕션 설정은 다음과 같을 수 있습니다. / - static server returns index.html with React app /todos - static server returns index.html with React app /..

코드 스플리팅 Code Splitting & 서버 사이드 렌더링 Server Side Rendering

💻개발/React 2023. 7. 3. 14:19

코드 스플리팅 컴포넌트를 분리된 파일로 저장하는 것 서버 사이드 렌더링 X: React.lazy Suspense로 구현 서버 사이드 렌더링 O: Loadable Components 라이브러리 사용 권장 서버 사이드 렌더링 단점: 웹 브라우저 일을 서버가 대신 사용하니 서버 리소스 사용됨 → 동시에 많은 사용자 접속하면 서버 과부하 발생 가능성 있음 보완: 사용자가 많은 경우 캐싱과 로드 밸런싱을 통해 성능 최적화 필요 서버 사이드 렌더링과 코드 스플리팅 함께 사용시 충돌이 있음(코드 스플리팅 깜빡임 현상) 서버 사이드 렌더링된 결과물이 브라우저에 나타남 자바스크립트 파일 로딩 시작 자바스크립트가 실행되면서 아직 불러오지 않은 컴포넌트를 null로 렌더링함 페이지에 코드 스플리팅된 컴포넌트들 사라짐 코드 ..

리덕스 상태 관리 도식 Redux

💻개발/React 2023. 7. 3. 14:17

리액트 라이프 사이클 메소드 React Lifecycle Methods

💻개발/React 2023. 7. 3. 14:11

updating 경우 부모 컴포넌트에서 넘겨주는 props가 바뀔 때 컴포넌트 자신이 들고 있는 state가 setState를 통해 업데이트될 때 부모 컴포넌트가 리렌더링될 때

ABOUT ME

기록의 힘

티스토리툴바