[React] SPA vs SSR, Suspense & Error Boundary

SPA와 SSR의 정의와 차이점은 어떤 것이 있을까요?SPASPA는 Single Page Application으로 서버에서 하나의 페이지(HTML)만 받아와서 나머지는 모두 클라이언트에서 동작하는 방식입니다. 서버에서 처음 받는 HTML은 다음과 같이 되어있을 것입니다.  bundle.js 스크립트에는 리액트와 기타 서드파티 종속성, 개발자가 작성한 코드 등 어플리케이션을 실행시키는 데 필요한 모든 코드들이 포함되어 있습니다. 자바스크립트 파일을 다운하고 파싱이 완료되면 모든 DOM을 불러와 에 저장합니다. SPA는 HTML을 받아오는 속도는 빠르지만, 코드 스플리팅을 하지 않으면 필요한 모든 코드가 하나의 js 파일에 담겨 번들의 크기가 증가하기 때문에 HTML에 내용이 처음 그려지는 속도(FP, F..

• format_list_bulleted React
• · 2024. 11. 19.

[React] React Hooks에 대해

Hook이 나오게 된 배경은 무엇일까요?  Hook은 React 버전 16.8부터 React 요소로 새로 추가되었는데, 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.  클래스형 컴포넌트를 작성하다가 this 바인딩으로 겪는 문제와 컴포넌트를 재사용하기 위해 고차 컴포넌트(HOC)와 render props를 사용함으로써 코드의 가독성이 떨어지는 문제들이 발생했습니다.이 문제를 해결하기 위해 함수형 컴포넌트에서 사용할 수 없었던 상태와 컴포넌트 생명주기 기능을 사용할 수 있게 해주었습니다..

• format_list_bulleted React
• · 2024. 11. 18.

[React] 리액트의 상태관리에 대해

React는 선언적인 방식으로 UI를 조작합니다. 개별적인 UI를 직접 조작하는 것 대신에 컴포넌트 내부에 여러 state(상태)를 묘사하고 사용자의 입력에 따라 state를 변경합니다.  상태가 변경되면 리액트는 컴포넌트를 재렌더링하고, 상태에 따른 UI를 그립니다. 리액트는 상태변화를 어떻게 감지할까요?  React는 useState 훅이 제공하는 setState 함수 호출을 통해 상태 변화를 감지합니다. 이때 내부적으로 이전 상태와 새로운 상태의 참조값을 비교하여 변화를 확인하기 때문에 불변성을 지키는 것이 중요합니다. 왜 state를 직접 변경하지 않고 setState를 통해 변경하는 것일까요? setState를 사용하지 않고 state를 직접 변경하면 리렌더링이 발생하지 않습니다. functio..

• format_list_bulleted React
• · 2024. 11. 17.