React 심화

React에는 Virtual DOM이라고 하는 가상의 DOM 객체가 있다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다. Virtu

React가 기존 가상 DOM과 변경된 새로운 가상 DOM을 비교할 때, React 입장에서는 변경된 새로운 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 방법을 알아낼 필요가 있었다. 즉 하나의 트리를 다른 트리로 변형을 시키는 가장 작은 조작 방식

React에는 다양한 Hook이 존재하고 있다. 그 전에 Hook이 정확히 무엇인지, 가장 기본적인 Hook이 무엇인지, Hook의 사용 규칙 등에 대해 알아보자. Function Component와 Class Component Hook은 함수 컴포넌트에서 사용하는

컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다.그러나 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다.그림 너무 많은 렌더링은 앱에 안 좋은 성능을 미치는 극단적인 예React Hook은 함수 컴포넌

React Hook은 렌더링 최적화를 위한 Hook도 존재하는데, useCallback과 useMemo가 바로 그 역할을 하는 Hook라고 배웠다.이번에는 useCallback Hook에 대해 배워보고, useMemo와 useCallback의 차이에 대해 학습하도록 하

Custom Hooks란 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 혹을 주로

대부분 React 앱들은 Webpack, Rollup과 같은 툴을 사용해 번들링(Bundling)한다.이렇게 하면 HTML 웹 페이지에 JavaScript를 쉽게 추가할 수 있기 때문이다.번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 페이지를 설정하는 데