zustand의 공식문서를 살펴보다, “Zustand는 React의 useSyncExternalStore 훅을 사용하여 React의 상태 관리 시스템과 원활하게 통합되어 Concurrent Mode와 호환된다” 는 내용을 보았다. Concurrent Mode라는 낯선 단어를 찾아보게 되었고, 생각보다 면접 질문으로도 쏠쏠하게 등장하기에 정리해보려한다! React 18에서 도입된 Concurrent Mode는 React 애플리케이션의 성능과 사용자 경험을 향상 시키기 위해 생긴 기능이다. 앞으로 Concurrent Mode가 무엇인지, 어떻게 작동하는지, 그리고 개발자들이 이를 어떻게 활용할 수 있는지 자세히보자. Concurrent Mode란 Concurrent Mode는 React가 렌더링 작업을 중단, 재개, 그리고 even 폐기할 수 있게 해주는 새로운 기능이다. React가 브라우저의 메인 스레드를 차단하지 않고 백그라운드에서 컴포넌트 트리의 여러 버전을 준비할 수 있게 …

나는 Zustand가 Provider이 필요하지 않는 상태관리 라이브러리라는 것을 알고 있었다. 하지만 갑자기 생각이 들었다. 왜?? 어떻게 동작하기에 상태관리 라이브러리가 필요하지 않을까? 궁금해서 찾아보다가, 좋은 내용이 많이 보여 공유해보려 한다. React 상태관리 일반적인 React 애플리케이션에서 상태는 아래 그림처럼 동작한다. 컴포넌트 내부 상태는 useState 훅을 사용하여 관리한다. 그리고 컴포넌트 트리를 통한 상태 전달은 props를 통해 하위 컴포넌트로 전달한다. 컴포넌트 외부에 상태를 전달하기 위해서 Context API를 사용하고, Provider 컴포넌트를 사용하여 하위 트리에 상태 제공하게 된다. 이러한 방식들은 모두 “React 컴포넌트 트리 내부에서 상태를 관리” 한다고 표현한다. Zustand로 상태관리하면? Zustand는 flux 패턴으로 동작한다. 클로저 내부의 state가 Store 역할, 사용자 정의 함수들이 Action 역할, se…

갑자기 작업하다가 궁금해져서 적는 첫번째 오이소박한 궁금증!! useEffect의 dependency에 useRef를 넣으면? useEffect 의 []에 의존성(dependency)를 넣을 수 있다! 이건 다 알고 있겠죠!? 그러면 리렌더링이 될 때 어느 시점에 의존성이 작동 될 까!? 긴말 말고 예시코드를 보자! 위 코드는 useRef의 current, useState의 state를 handleButtonClick 함수를 이용해서 1씩 올려주는 코드다. useEffect의 dependency에 useRef의 ref와 ref.current 의 값을 넣어보고 동작을 비교해보자~!! [ref] useRef의 ref 객체를 dependency에 직접 넣어주게 되면 useEffect가 변경사항을 감지하지 못하고 리렌더링 되지 않는다.. 하지만 값은 변경된다!!! [ref.current] 그리고 useRef의 ref.current 값 을 dependency에 직접 넣어주게 되면 use…

CRA(Create React App) 1.svg 2016년 이전에는 Create React App(CRA)가 등장하기 전에 프론트엔드 개발 환경이 통합되어 있지 않아서, 기존 앱에 리액트를 추가하기 위해 npm에서 import한 후 기존 빌드 구성을 수정하는 번거로움이 있었다고 한다! 여러 도구를 설치하고 JSX를 사용하기 위한 사전 설정을 진행하며, 개발과 프로덕션 환경을 다르게 구성해야 했다. 또한, 린트 설정 등 다양한 작업이 필요했는데, 이는 일반 사용자들에게는 쉽지 않은 작업이었을 것 같다. 시간이 지나 똑똑한 개발자들이 보일러플레이트 저장소를 만들어 공유하고 복제함으로써 시간을 단축할 수 있었지만, 업데이트가 어려워 빠르게 변화하는 생태계에 대응하는 것도 쉽지 않았을 것 같다. 이러한 어려움을 해결하기 위해, CRA(Create React App) 가 등장하게 되었다. CRA를 사용하면 리액트 애플리케이션을 쉽게 생성하고 필요한 설정 작업을 자동화할 수 있다. 이를 통…

React 19에 도입될 Hooks   use(Promise) & use(Context) Form actions useFormState useFormStatus useOptimistic Bonus: Async transitions 마무리 ✨ 잠깐!!! 모든 코드는 테스트 환경 에서 테스트 가능합니다. (단, React 19에 포함될 예정이지만 최종 release 전에 API가 변경될 수 있음)   use(Promise) & use(Context)   Reference 컴포터는의 호출을 사용하여 Promise 또는 Context 와 같은 리소스의 값을 읽음 use는 if문과 같은 조건문 루프 안에서 호출 가능 use를 호출하는 함수는 컴포넌트 또는 Hook 이어야 함 Promise와 함께 호출될 때, use는 Suspense 및 Error Boundaries와 통합된다. use가 pending 상태일 때 Promise가 전달완료 될 때까지 일시중단되고, use를 호출하는 컴포넌트가…

함수형 컴포넌트의 상태 관리 pjqnl16lm7 - CodeSandbox 클래스형 컴포넌트는 render() 메서드를 통해 상태 변경을 감지 Props 는 react 에서 불변 / this 는 변경가능, 조작가능 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출 render 될 때의 값을 유지 ⇒ 상태를 관리하려면 함수가 다시 호출되었을 때 이전 상태를 기억해야 함 ⇒ useState 는 클로저를 통해 이 문제를 해결 클로저 : 내부 함수에서 상위 함수 스코프의 변수에 접근할수 있는 것을 의미 왜 hooks 를 사용해야 될까? UI 의 상태 관련 동작 및 부수 작용을 캡슐화하는 가장 간단한 방법 고차 컴포넌트(HOC)의 복잡성을 피할 수 있음 props 로 전달되는 속성들이 명확하지 않고 중복됨 컴포넌트 구조의 복잡성을 유발 계층의 변화없이 상태 관련 로직을 재사용할 수 있음 useState 란 무엇인가 React 공식 문서 React 내부에서 상태를 관리하는 방식을 추…