React 이해하기

간단 소개

React의 기본 개념, 선언형 UI, State 관리, Hook을 사용한 함수형 컴포넌트 등 React의 핵심 내용을 간략하게 설명합니다.

AI Summary

React의 기본 개념
- React는 UI를 만들기 위한 JavaScript 라이브러리이며, 컴포넌트 기반이고 선언형이다.
- DOM 조작의 복잡성을 해결하기 위해 등장했으며, JSX를 통해 HTML과 유사한 문법을 JavaScript 코드 내에서 사용할 수 있게 한다.
- Props를 통해 컴포넌트 간에 데이터를 전달하고, ReactDOM을 사용하여 React elements를 실제 DOM에 적용한다.
선언형 UI와 State 관리
- React는 선언형 방식으로 UI를 구성하여, 개발자는 '무엇'을 보여줄지에 집중하고 '어떻게' 보일지는 React가 처리한다.
- State는 setState를 통해 관리되며, React는 스케쥴링 업데이트를 통해 렌더링을 최적화한다.
- shouldComponentUpdate나 PureComponent를 사용하여 불필요한 rerender를 방지하고, immer 라이브러리를 통해 불변성 유지를 쉽게 할 수 있다.
Hook을 사용한 함수형 컴포넌트
- Hook을 사용하면 class 컴포넌트보다 더 간단하게 컴포넌트를 구현할 수 있으며, useState를 통해 함수형 컴포넌트에서 state를 사용할 수 있다.
- Custom Hook을 통해 상태 관련 로직을 여러 컴포넌트에서 재사용할 수 있으며, useReducer를 사용하여 상태 관리 로직을 구현할 수 있다.
- useMemo를 사용하여 성능을 최적화하고, memo를 사용하여 PureComponent와 유사하게 동작하도록 만들 수 있다.