Frontend/React

Hook의 규칙

🧐 React Hooks란? 함수형 컴포넌트에서 state 관리와 Life Cycle을 다룰 수 있게 하는 기술이다.🧐Hooks의 도입 이유? 클래스형 컴포넌트에서 발생하는 몇몇 불편한 점들을 극복하기 위해- this 값의 변경- 떨어지는 가독성- HOC패턴의 Wrapper 지옥 🧐Hook의 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 한다.- 반복문, 조건문 또는 중첩된 함수 내에서 Hook을 호출해서는 안 된다.- 모든 렌더링에서 동일한 순서로 Hook을 호출해야 한다. 오직 React 함수 내에서 Hook을 호출해야 한다.- 일반적인 JavaScript 함수에서 호출해서는 안 된다. - React 함수 컴포넌트에서 Hook을 호출해야 한다.  Hook 이란?2018년 ..

리액트버전 18부터 등장하는 Batching 개념

🧐  Batching 이란 여러 상태가 한 번에 변경될 때, 리액트는 이러한 변경 사항을 일괄 처리하여 렌더링 주기를 최적화하는 방식을 의미한다. Batching리액트 버전 18부터 더욱 강화되었다.이벤트 처리 방식의 개선으로, 성능을 향상하는데 도움이 된다.리액트가 UI 업데이트를 처리할 때 여러 업데이트를 일괄로 처리하여 렌더링 주기를 최적화하는 방식을 의미한다.  기존상태(State)가 업데이트되면, 해당 컴포넌트와 그 자식 컴포넌트들이 모두 다시 렌더링 되었다.이러한 방식은 작은 업데이트도 큰 렌더링 작업으로 이어질 수 있어 성능 문제가 발생할 수 있었다.  버전 18여러 상태 업데이트를 한꺼번에 처리하여 렌더링 작업을 최적화한다.예를 들어, 여러 상태가 한 번에 변경될 때, 리액트는 이러한 변..