React 2

React - 리엑트의 랜더링 과정

렌더링 - 컴포넌트에게 현재 Props와 State에 기반하여 UI에서 어떻게 보여지고 싶은지 알려달라고 요청하는 과정이다. 크게 3개의 단계로 나뉜다.렌더링 트리거 (손님의 주문을 주방으로 전달)컴포넌트 렌더링 (주방에서 주문 준비하기)DOM에 커밋 (테이블에 주문한 요리 내놓기) 1단계: 렌더링 트리거컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.1) 컴포넌트의 초기 렌더링인 경우 2) 컴포넌트의 state가 업데이트된 경우 초기 렌더링  앱을 시작할 때 초기 렌더링을 트리거해야 한다, 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메서드를 호출하면 이 작업이 완료된다.import Image from './Image.js';import { create..

React 2024.05.11

React - 상태관리 (Zustand 그외 Redux...)

리액트 상태 관리 라이브러리 Redux: Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나. 애플리케이션의 전역 상태를 효과적으로 관리하고 변경 사항을 추적하기 위해 사용된다. Zustand: Zustand은 리액트 상태 관리를 위한 간단하고 직관적인 라이브러리. Zustand은 React Hooks와 함께 사용되며, 전역 및 로컬 상태를 관리하고 리액트 컴포넌트 간의 상태 공유를 용이하게 해준다. Recoil: Recoil은 페이스북에서 개발한 리액트 상태 관리 라이브러리이다. Recoil은 상태의 원자성과 종속성 추적을 위한 간단한 API를 제공하며, 상태를 효과적으로 관리하고 여러 컴포넌트 간에 공유할 수 있다. 이중에서 이번에 자세히 얘기할건 이번 프로젝트에서 도입될 Zustand 라..

React 2023.05.23
반응형