[React] 선언형과 리엑트

안녕하세요, 개발자 Sean입니다. 

 

라이브러리를 공부할 때 다른 참고서나 설명 블로그를 참조하는 방법도 좋은 방법이지만 뭐니 뭐니 해도 공식 라이브러리 설명 페이지가 

 

개발자의 의도를 가장 잘 설명하겠죠?

 

따라서 저도 이번에 한 번 처음부터 찬찬히 살펴보려고 합니다. 

 

어느정도 리엑트에 대한 이해도가 생긴 상태에서 공식 페이지를 읽어보니

 

새삼 이전에는 생각치 못했던 여러 의문이 생겼습니다. 

 

그중 하나가 아래와 같은 설명입니다. 

 

선언형

React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다.

선언형 뷰는 코드를 예측 가능하고 디버그 하기 쉽게 만들어 줍니다.

 

선언형과 명령형에 대한 대략적인 이해는 하고 있지만 

 

그게 리엑트와는 어떤 상관인 것일까요?

 

 

일단은 제가 이해하고 있는 선언형과 명령형의 차이점에 대해 말해보겠습니다. (저의 주관적인 생각이니,,, 그냥 가볍게 읽어주세요...!)

 

명령형: 음식을 어떻게 먹어야 하는가

선언형: 음식을 몇 번 방법으로 먹어야 하는가

우선 명령형에 대해 말하자면, 누군가가 음식을 먹을 때 어떤 절차를 밟아가며 먹어야 하는지를 알려주는 것이라 할 수 있습니다. 

'행동'을 어떻게 해야하는지 말이죠. 

예를 들어 1. 숟가락을 든다 2. 밥을 퍼서 3. 입을 벌리고 4. 넣어 5. 씹는다. 와 같이 절차별로 행동을 명령하는 방식을 명령형이라 합니다. 

반면에 선언형은 절차에 대해 명령하는게 아니라 음식을 먹는 방법이 여러가지 있는데 그중 어떤 방법으로 먹을지 최종적으로 '선택'한다고 이해하면 쉽습니다. 

예를 들어 1번 숟가락으로 먹기, 2번 나이프로 썰어 먹기, 3번 갈아 마시기 등이 사전에 정의되어 있고 

1번으로 먹을지를 '선택'하는 것이죠.

그래도 이해는 여전히 어렵죠? ㅎ

이부분은 저도 사실은 완전히 체득하진 않아 설명이 어렵네요 ㅠㅠ

 

그렇다면 리엑트는 왜 선언형이죠?

아래의 코드를 한번 살펴보겠습니다. 

export const Tabs = () => {

  return (
    <div>
      <Tab/>
    </div>
  )
}

export const Tab = () => {
  return (
    <div>
      tab
    </div>
  )
}

Tab이라는 컴포넌트를 감싸는 Tabs 상위 컴포넌트가 있다고 가정해 보겠습니다. 

 

여기서 모두가 대수롭지 않게 여겼던 컴포넌트의 모습을 한 번 주의 깊게 살펴보죠. 

 

const Tab = () => {}

 

네 그렇습니다. 컴포넌트가 함수의 모습을 띄고 있죠. 

 

그렇다면 아래와 같이 코드를 짜도 되지 않을까요?

 

export const Tabs = () => {

  return (
    <div>
      {Tab()}
    </div>
  )
}

export const Tab = () => {
  return (
    <div>
      tab
    </div>
  )
}

위와 같이 코드를 짜도 상관은 없을 겁니다. 

 

처음 코드와 마찬가지로 Tabs 컴포넌트는 Tab '함수'를 실행시켜 반환된 jsx를 dom에 렌더링 할 테니까요. 

 

그렇지만 위 코드는 추천하지 않는 코드입니다. 왜냐하면 state의 변화에 따라 변경되는 값이 있다면 그 변화를 감지하지 못하고 예상치 못한 결과로 화면에 렌더링 될 가능성이 높기 때문입니다. 

 

왜 그럴까요? 

 

이유는 리엑트가 선언형 라이브러리이기 때문입니다. 

 

곰곰이 생각해보면 리엑트로 어플을 만들 때 개발자는 렌더링에 대해 전혀 신경을 쓰지 않습니다. 

jsx 구문으로 최종적으로 개발자가 바라는 컴포넌트의 모습만을 그려 넣을 뿐이죠. 

 

만약 리엑트가 명령형 라이브러리였다면 아마도 위 코드에서 개발자는 아래와 같은 코드를 입력해야 할 것입니다. 

 

1. Tabs 컴포넌트에서 DOM을 그려라.

2. Tab 컴포넌트를 DOM에 추가해라. 

3. Tabs 컴포넌트에 있는 state의 변화를 Tab에도 적용시켜라.

4. 변경된 부분이 있다면 Tab의 DOM에도 변경된 부분을 적용시켜라.

 

하지만 리엑트는 그렇지가 않죠?

 

태그 형식으로 바라는 뷰의 모습만을 입력하면 알아서 위의 방식으로 뷰를 그려나갑니다. 

즉 뷰를 그린 뒤 상태를 변화시키고, 변화된 상태를 수정 적용하는 일련의 방식을 이미 리엑트는 알고 있는 셈이죠. 

 

다시 두 번째 코드를 한번 살펴봐 보죠. 

 

두 번째 코드에서는 컴포넌트의 형태로 Tab을 사용한 것이 아니라 함수의 형태로 Tab을 '실행'시켜 버렸죠? 

 

네, 선언을 기대하는 리엑트에게 지금 당장 실행을 하라는 '명령'을 내려버린 겁니다. 

 

컴포넌트의 형태로 Tab을 선언만 했다면 리엑트는 똑똑하게도

즉시 실행시키는 게 아닌 자신만의 적절한 절차를 밟아가며 뷰를 화면에 그려나갔을 겁니다.

 

리엑트가 왜 명령형 라이브러리인지 이제 감이 좀 오시나요?