"ui를 구성하는 가변적인 데이터"
어떤 일을 어떻게 할 것인가?
무엇을 할 것인가?
프론트엔드가 감당해야하는 기능이 많거나 복잡할 수록 선언적 방식이 유리.
명령형 프로그래밍에서는 하나의 HTML에 모든 UI가 덩어리로 존재하기 때문에 기능 단위로 파일을 분리하기 어렵다. 코드의 재사용성이 낮고, 유지보수가 어렵다.
반면 선언적 프로그래밍에서는 state를 바탕으로 JS가 UI를 그린다. 기능 단위로 JS 파일을 분리할 수 있다. 그리고 가독성과 재사용성이 높아진다는 중요한 효과 또한 갖게 된다.
선언적 & 컴포넌트 기반 프로그래밍 = 모던 프론트엔드 어플리케이션의 패러다임
리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다.
그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다.
컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
라이프 사이클은 총 9개의 과정이 존재하는데 크게는 컴포넌트가 처음 실행될때인 Mount, 데이터에 변화가있을때인 Update, 컴포넌트가 제거 될때인 Unmount 이렇게 세 개로 나눌 수 있다.
-> state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프 사이클 메서드를 사용 가능하다. 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수가 필수적으로 있어야 JSX 반환이 가능하다. 함수형 컴포넌트보다 먼저 나왔기 때문에 유지보수를 위해 알아두어야 한다.
-> 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리 상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점이다. 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용한다.