- 리액트는 UI를 조작하는 선언적 방법을 제공하는 라이브러리
선언형
- 어떤 UI를 보여주고 싶은지 '선언'만 하면 알아서 그려줌
- 컴포넌트나 데이터의 배치를 통해 무엇이 렌더링 될지에 대해서만 생각
- 원하는 UI 결과값만 리턴하고 어떻게 화면에 보여지게 할 지 로직은 추상화
- 즉, UI를 다루는 부분은 리액트에게 위임하고 개발자는 결과에만 초점
예시
- filter, map, reduce 등의 메서드
- 이미 메서드 안에 동작이 서술되어 있기 때문에 개발자는 구체적인 절차는 신경 쓸 필요 없이 메서드를 그대로 선언에 사용하기만 하면 됨
const numbers = [1, 2, 3, 4, 5, 6];
let sum = numbers
.filter(i => i % 2)
.map(i => i * 2)
.reduce((acc, cur) => acc + cur);
console.log(sum); // 18
선언형 장점
- 코드가 간결해진다.
- DOM을 조작하는 세부 로직이 아닌 무엇을 보여줄 지에 집중할 수 있다.
- 화면이 어떻게 그려질 지 결과 예측이 쉬워진다.
- 디버깅이 쉽다.
선언형 특징 요약
- 결과물에만 집중하고, 복잡한 과정은 추상화해서 숨겨놓는다.
- 명령형의 경우 한 줄씩 읽어 나가면서 다음에 어떤 일이 발생할지 추측해야 한다.
- 선언형의 경우 자세한 방법을 모르더라도 코드만 보고도 어떤 일이 발생할지 추측이 쉽다.
- 코드의 가독성을 높여 개발자가 문제의 본질(= 어떤 화면을 그릴지)에 집중할 수 있도록 도와준다.
- 코드 재사용성을 높여준다.
리액트가 선언형 프로그래밍인 이유
JSX 자체가 선언형은 아니다. 하지만 JSX의 캡슐화를 통해 선언형 코드 작성이 가능하다.
const App = () => {
<Nav />
<Menu />
<Detail />
}
<Nav />
, <Menu />
, <Detail />
는 JSX로 작성된 코드를 캡슐화한 컴포넌트다. 각 컴포넌트의 자세한 코드는 직접 들어가봐야 알겠지만, 어떤 순서와 어떤 내용으로 화면에 그려질지는 대충 예측할 수 있다.
또한 우리는 <Nav />
, <Menu />
, <Detail />
의 렌더링되는 과정까지 알 필요가 없다.
명령형
- UI를 조작하기 위한 과정을 컴퓨터에게 알려주는 것
- 어떤 로직으로 어떻게 코드를 짜야 페이지가 그려지는지 지시
- 결과를 얻기 위해 데이터를 어떻게 조작해야 하는지 '과정'에 집중
- 코드가 어떻게 동작해야 하는지를 작성
예시
- 배열에 있는 숫자가 어떻게 반복되고 계산되는지에 대한 로직이 모두 드러남
const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
if (i % 2 === 0) {
sum += numbers[i] * 2;
}
}
console.log(sum); // 18
명령형 단점
- 과정을 하나하나 다 설명
- 관리해야 하는 UI가 많아질수록 코드가 기하급수적으로 늘어남
- 코드의 가독성과 재사용성이 낮아져서 유지 보수가 힘들어짐
- 직관적이지 않아서 화면에 어떻게 그려질지 예측하기 어려움
참고 자료
리액트와 선언형 프로그래밍(Declarative Programming)
리액트(React) - Virtual DOM과 선언형