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