[React] 선언적 프로그래밍(Declarative Programming)

02.29.2024

0. Background

콜로소 라는 업체에서 하는 온라인 무료 특강을 듣고 배운 내용들을 잘라서 정리하려 한다.

토스 프론트엔드 개발자분이 선언적 프로그래밍, 단방향 흐름, 부수 효과 총 세가지에 대해 강연하셨다.

오늘은 이 중 선언적 프로그래밍에 대한 글을 정리해 보려고 한다.

1. 선언적이란?

1-1. 논란의 여지를 주는 키워드

우리 프로그래밍 세계에서는 논란의 여지가 있는 질문들이 있다.

HTML은 프로그래밍 언어인가? -> 프로그래밍 언어의 정의는?

강타입 언어를 써야하는가? -> 강타입이란?

개발을 잘 하려면 수학을 배워야 하는가? -> 개발을 잘한다라는 의미는?

 

이와 같이 선언적이라는 말도 엄밀하게 정의되는 개념이 없다. 당장 위키피디아를 찾아봐도 그렇다.

그렇다면 우리가 사용하는 '선언적'이란 보통 무엇을 뜻하는 용어일까?

1-2. 그럼에도 불구하고 정의해본다면

선언적코드란 실제 동작을 직접 실행시키는 코드가 아니라 어떤 동작이 실행되어야 하는지를 선언하는 코드라고 할 수 있을 것 같다.

---

2. 선언적 코드를 짜야 하는 이유

2-1. 선언적 코드를 왜 짜야하는가

선언적 코드를 왜 짜야하는가? 물론 몇가지 바로 뒤에서 나열할 장점들이 많이 있지만...

근본적으로, 선언적 코드를 왜 짜야하는가? 무엇이 선언적 코드의 장점들을 파생시키는가?

라는 질문들을 들었을 때 앞에서 우리가 정의한 선언적 코드의 정의를 생각해보면 좋을 것 같다.

돔에 대한 고민을 할 필요 없이(실제 동작) 어떤 동작이 실행되어야 하는지에만 집중을 할 수 있다.

2-2. 선언적 코드의 장점

선언적 코드를 작성해야하는 이유를 알았으니 잠시 선언적 코드의 확실한 장점을 잠시 짚고 넘어가보려고 한다.

1. 가독성을 높여준다
2. 이식성(Portability)가 높아진다 (렌더링 라이브러리 참고)
3. 성능 최적화가 가능해진다 (React 18 Concurrent rendering 참고)
4. 리액트를 쓰고 있는 경우 선언적인 코드가 읽기도 쉽고 유지보수도 쉽다.

---

3. 코드의 Style의 문제인가?

3-1 jQuery vs React.js

jQuery는 명령적, React.js는 선언적인 코드라고 할 수 있다. 그러나 몇몇은 이것을 코드 스타일로 바라보는 시각도 있다.

이것이 정말 스타일의 문제일까? 답은 아니라고 할 수 있다.

비동기 동작을 한다거나, 에러처리를 추가해야하는 등 유지보수 과정을 생각해보면, 선언적 코드가 훨씬 간결하다.

이것은 코드 컨벤션과 같은 스타일의 문제가 아니라 구조적인 부분이 포함됨을 함축한다.

결국 이러한 명령/선언 스타일은 정도나 깊이의 문제가 아니라 방향성의 문제이다.

 

---

4. 더 선언적인 코드 작성 예시 (왼쪽이 명령적, 오른쪽이 선언적 코드)

4-1. useOverlay의 사례

4-2. <Logging.Click>의 사례

4-3. react-query의 사례

4-4. relay의 사례

5. 결론

선언적 코드, 선언적 프로그래밍에 대해 알아봤는데 리액트를 공부하는 개발자라면 꼭 알고있어야 하는 부분같다.