[React.js] static page part.2

Composable

리액트에서 말하는 composable은 복잡한 UI를 작고 독립적이며 재사용 가능한 컴포넌트들을 사용해서 구현하는 것을 의미합니다.

 

컴포넌트를 마치 라이브러리처럼 만들고 여러 곳에서 사용하는 것입니다.

Declarative

declarative(선언형)은 무엇을 할 것인지에 중점을 두는 것이고, 반대로 imperative(명령형)은 어떻게 할 것인지에 중점을 두는 것입니다.

 

예를 들어 목표가 주어진 숫자 배열에서 짝수만 추출하는 것이라고 합니다. imperative의 경우 배열을 순회하면서 요소가 짝수인지 확인하고 짝수라면 evens 배열에 넣는다라는 어떻게 할 것인지 볼 수 있습니다. 반면에 declarative는 내부 동작은 보이지 않지만 filter 함수를 통해서 짝수만 추출한다라는 무엇을 원하는지만 선언합니다.

// 목표: 배열에서 짝수 추출하기
const nums = [1,2,3,4,5];

// Imperative
const evens = [];

for(let i=0; i<nums.length; i++) {
  if(nums[i] % 2 == 0) evens.push(nums[i]);
}

console.log(evens);

// Declarative
const evens = nums.filter(el => el % 2 == 0);

console.log(evens);

 

비유하면 imperative는 요리의 모든 과정을 진행하는 것이고, declarative는 요리사에게 요리해 달라고 요청만 하는 것이라고 보면 됩니다. declarative가 더 추상적입니다.

 

react에서 render 함수를 통해 요청하면 원하는 UI는 react가 그려주는 것을 보면 declarative인 것을 알 수 있습니다.

 

scrimba는 일부 유료 기능을 제공하지만 해당 강의에서는 유료로 결제할 부분은 문제를 푸는 부분에서 발생할 수 있는데 스킵해도 문제없습니다. 일시정지하고 문제를 풀어도 됩니다.

 

참고

https://scrimba.com/learn-react-c0e