React를 쓰면서도 몰랐던 선언형 프로그래밍 이야기

React를 쓰면서도 몰랐던 선언형 프로그래밍 이야기

React를 처음 접했을 때, 나는 그냥 시키는 대로 문법을 익히고, JSX를 따라 썼다.
useState, map, onClick… 그렇게 UI를 만들고, 기능을 붙이고, 화면을 완성해 나갔다.

그런데 어느 순간, 문득 이런 생각이 들었다.

“나는 어떻게 UI를 구성하고 있었던 거지?”
“이게 다 선언형 프로그래밍이라고?”

React를 공부하면서 자연스럽게 사용했던 방식들이 사실은 선언형 프로그래밍이라는 걸, 꽤 시간이 지나서야 깨달았다.

---

선언형 vs 절차형, 간단 정리

스타일	절차형 프로그래밍	선언형 프로그래밍
초점	어떻게 처리할까	무엇을 만들까
특징	명령 중심, 순차적	의도 중심, 추상화
예시	DOM 직접 조작	JSX로 UI 구조 선언

절차형 프로그래밍은 “1번 하고 → 2번 하고 → 3번 해”처럼 하나하나 직접 지시하는 방식이다.
반면, 선언형 프로그래밍은 “이런 걸 원해!”라고 결과를 선언하고, 내부 처리는 프레임워크나 시스템이 알아서 처리한다.

---

React는 선언형 프로그래밍의 대표주자

• JSX로 UI를 선언한다 (HTML처럼 보여도 JS임)
• 상태가 바뀌면 자동으로 화면이 갱신된다
• DOM을 직접 조작하지 않고도 결과를 얻을 수 있다

예를 들어 이런 코드:

return <h1>Hello, {name}</h1>;

사실상 이건 다음과 같은 의도를 표현한 것이다:

“이 컴포넌트는 name이라는 상태를 받아서, Hello {name}이라는 텍스트를 가진 h1 태그를 보여줘.”

이게 바로 선언형 프로그래밍이다.

---

나는 이미 선언형으로 사고하고 있었다

React에서 리스트를 렌더링할 때, map()을 이렇게 쓰곤 했다:

{users.map(user => (
  <li key={user.id}>{user.name}</li>
))}

그냥 반복문 느낌으로 썼지만, 사실 이건 함수형 프로그래밍의 map 함수를 사용한 대표적인 선언형 스타일이다.

또 조건부 렌더링도 마찬가지다:

{isLoading ? <Spinner /> : <Content />}

어떻게 보여줄지 조건에 따라 의도를 선언하는 방식이다.
JS의 if문이나 for문처럼 흐름을 명령하지 않고, 그냥 “이럴 땐 이거 보여줘”라고 선언하는 것이다.

---

선언형 프로그래밍의 장점은?

• 코드가 간결하고, 의도가 명확하다
• 상태가 바뀔 때 UI 갱신을 자동으로 처리할 수 있다
• 추상화가 잘 되어 있어 복잡한 DOM 조작을 직접 할 필요가 없다

물론 useEffect나 ref처럼 절차형 코드를 써야 하는 경우도 있다.
하지만 전체적으로 React는 선언형 기반 사고를 권장하고, 개발자도 그 흐름에 자연스럽게 따라가게 된다.

---

마무리: React는 선언형 프로그래밍의 입문서다

React를 쓰면서 나는 선언형 프로그래밍을 자연스럽게 체득하고 있었던 것 같다.
“어떻게 만들까”에서 “무엇을 만들고 싶은가”로 사고방식이 전환된 것이다.

프로그래밍 패러다임을 이해한다는 건 단순히 문법을 아는 걸 넘어선다.
어떤 사고 방식으로 문제를 푸는가를 이해하게 되는 것이니까.

이제 React를 쓸 때,
그냥 return <div>를 쓰는 것이 아닌,
“나는 지금 UI를 선언하고 있다”는 걸 조금 더 의식하면서 코드를 써보자. 😄