[React] #3 컴포넌트

컴포넌트는 SPA를 지향하는 React에서 사용하는 앱을 이루는 최소 단위이다. MVC 방식으로 관리되는 기존의 웹 프레임워크는 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있다. 반면 컴포넌트는 MVC의 view를 독립적으로 구성하여 재사용할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.

 

☝🏻 MPA vs SPA

MPA(Multiple Page Application) : 여러 개의 페이지로 구성된 웹 어플리케이션으로, 사용자가 요청할 때마다 서버에 다른 페이지를 요청해서 받아온다. 전체 페이지를 불필요한 부분까지 다시 렌더링 해야 하기 때문에 상태 유지의 어려움 + 불필요한 로딩이 발생한다는 단점이 있다.

SPA (Single Page Application) : 한 개 페이지로 구성된 웹 어플리케이션으로, 처음 요청 시에 하나의 페이지만 불러오고 페이지 이동이 필요할 시에 새로운 페이지를 그리는 것이 아니라 기존 화면의 구성 요소들이 바뀌는 방식의 웹사이트이다.

 

 

컴포넌트 선언 방식

1. 클래스형 컴포넌트

- state 기능, 라이프 사이클 기능 제공

- render 함수 필수 (render 함수 내 리턴문에서 JSX 반환)

2. 함수형 컴포넌트

- state 기능, 라이플 사이클 기능 사용 불가 → Hooks 도입으로 해결

- 편한 선언과 적은 메모리 사용

☝🏻함수형 컴포넌트 사용 권장

 

💥 리액트 컴포넌트 이름은 항상 대문자로 시작해야 한다.

 

 

참고 자료 : https://thebook.io/080203/, https://react.vlpt.us