React 개요 및 주요기능 _ 개념 정리

React 학습 정리: Hooks의 등장 배경과 종류

1. Hooks의 등장 배경

• 컴포넌트의 두 가지 형태: 리액트 컴포넌트는 본래 **클래스형(Class)**과 **함수형(Function)**으로 나뉨.
• 클래스형 컴포넌트의 특징:
  • 클래스 내부에서 컴포넌트의 **상태(State)**와 라이프사이클(Lifecycle) 관련 함수들을 정의하여 사용함.
  • 하지만 코드가 매우 길고 로직이 복잡해지는 단점이 존재함.
• 함수형 컴포넌트의 도입:
  • 클래스형의 복잡함을 해결하기 위해 단순 함수 하나만 작성하는 방식을 선호하게 됨.
  • 그러나 초기 함수형 컴포넌트는 상태 관리와 라이프사이클 관리가 불가능하다는 치명적인 한계가 있었음.
• Hooks의 도입:
  • 개발 시 필수적인 상태 및 라이프사이클 관리를 함수형에서도 구현하기 위해 Hooks라는 개념을 도입.
  • 자바스크립트에서 제공하는 특정 함수들을 통해 함수형 컴포넌트의 기능을 확장함.

---

2. 주요 Hooks의 종류

리액트에서 제공하는 Hooks는 크게 세 가지 목적으로 분류할 수 있습니다.

1) 상태 관리 (State Management)

컴포넌트 내에서 동적인 데이터를 다루기 위해 사용합니다.

• useState: 가장 기본적인 상태 관리 Hook.
• useReducer: 복잡한 상태 로직을 다룰 때 사용.
• useContext: 전역적으로 데이터를 공유할 때 사용.

2) 라이프사이클 관리 (Lifecycle Management)

컴포넌트의 탄생부터 소멸까지의 과정을 제어합니다.

• useEffect: 컴포넌트가 **Mount(생성), Update(수정), Unmount(제거)**될 때 특정 작업을 수행하도록 설정.

3) 성능 최적화 (Performance Optimization)

불필요한 렌더링을 방지하여 앱의 속도를 높입니다.

• useMemo: 연산된 값을 재사용할 때 사용.
• useCallback: 특정 함수를 재사용할 때 사용.
• React.memo: 컴포넌트 자체를 캐싱하여 불필요한 리렌더링을 방지.

---

💡 정리: Hooks의 등장 덕분에 이제는 복잡한 클래스 없이도 함수형 컴포넌트만으로 리액트의 모든 강력한 기능을 구현

 

3.Router(라우터) 개념

• 역할: 페이지 전환을 담당함.
• SPA(Single Page Application): React는 단일 페이지 애플리케이션이기 때문에 페이지 이동 시 화면 전체가 새로고침 되면 안 됨.
• 작동 원리: 브라우저 전체를 새로 불러오는 대신, 주소에 따라 필요한 **컴포넌트만 교체(page 단위)**하여 보여줌.
• 주의 사항:HTML의 기본 <a> 태그를 사용하면 페이지가 새로고침되므로 절대 사용하면 안 됨. (대신 Link 컴포넌트 등 사용)
• 사용 라이브러리: 현재 react-router-dom v7.x 버전을 기준으로 함.

---

4. Axios 개념

• 역할: REST 서비스를 위한 HTTP 클라이언트 라이브러리.
• 연동 방식:
  • **비동기 통신(Ajax)**을 기반으로 외부 API와 연동함.
  • 서버에 JSON 데이터를 요청하고 응답받는 구조임.
• 주요 학습 키워드:
  • 동기(Synchronous) vs 비동기(Asynchronous): 작업의 순차적 실행과 병렬 실행의 차이 이해.
  • JavaScript 싱글 스레드(Single Thread): 자바스크립트는 한 번에 하나의 작업만 수행할 수 있다는 개념.
  • Web APIs 영역: 비동기 처리를 위해 브라우저에서 제공하는 별도의 처리 영역(Timer, DOM, AJAX 등)

상태 관리 라이브러리: Redux (전역 상태 관리)

• 기본 개념:
  • React 애플리케이션의 상태(State)를 효율적으로 관리하기 위한 라이브러리.
  • 컴포넌트 간의 데이터 전달이 복잡해지는 문제를 해결하기 위해 사용.
• 전역 상태 관리(Store):
  • 컴포넌트 외부에 **단 하나의 저장소(Store)**를 두고 모든 상태를 관리.
  • 특정 컴포넌트가 상태를 변경하면, 해당 상태를 사용하는 모든 컴포넌트가 자동으로 업데이트됨.
• Redux의 핵심 구성 요소 및 흐름:
  1. Action(액션): 상태를 어떻게 변경할지 정의한 '주문서' (객체 형태).
  2. Dispatch(디스패치): 액션을 스토어로 전달하는 함수.
  3. Reducer(리듀서): 이전 상태와 액션을 받아 새로운 상태를 만들어내는 '공장'.
  4. Store(스토어): 애플리케이션의 전체 상태가 저장되는 '창고'.
• 장점:
  • 데이터 흐름을 단방향으로 일관되게 유지 가능.
  • 상태 변화 추적이 쉬워 디버깅에 유리함.

package.json에 라이브러리 추가해서 사용할 수 있다.