판주야 Redux는…#1

1편, Javascript 부터 React까지

어느 가을날 저녁, 늦은 나이에 막 자바스크립트를 배우기 시작한 친구 판주가 물었다.

“형 state가 뭐야? 그리고 Redux는 뭐야?”

나는 웹 페이지가 우리나라에 막 퍼지기 시작할 때부터 시작했고, 대략 2년 전부터 직업으로써 자바스크립트와 React, Redux 등 관련된 다양한 웹 기술을 사용하고 있었지만, 워낙 드문드문 사용했던 웹(Web) 관련 기술이라 쉽게 대답할 수 없었다.

또한, 나 역시 Redux 을Redux를 이해하기 위해 수많은 자신의스스로의 질문들이 있었고 여전히 이에 대해 확실한 설명을 할 수준의 깊이 있는 공부를 못한 상태(State?)지만 지금까지 이해한 것을 바탕으로 이제 막 자바스크립트를 배우고 있는 내 친구 판주에게 이것에 관해 설명을 해 보려고 한다. 내 친구 판주는 프로그래밍 언어란 것과 자바스크립트 자체를 이제 막 배우기 시작한 상태다. 그렇기 때문에 자바스크립트 자체부터 Redux까지 간단하게 개념적으로만 설명하고 이해시켜보려고 한다.

자바스크립트는 무엇인가?

State, Redux 같은 용어를 접하려면 아마도 자바스크립트라는 것을 배우고 있거나 이미 사용하고 있을 것이다. 대부분 자바스크립트에 대해선 잘 알고 있겠지만 준비 단계로 간단하게나마 설명해 보려고 한다. 자바스크립트는 HTML로 이루어진 정적인 웹페이지를 동적인 페이지로 만들 수 있게 해 주는 프로그래밍 언어 중 하나이다.

‘정적’, ‘동적’ 웹 페이지?

그럼, ‘정적인 웹페이지’는 무엇이고 ‘동적이다’라는 것은 또 무엇일까? 다음을 보자.

<p>목동 돈까스</p>

웹페이지는 HTML로 작성된다.(HTML은 Hyper Text Markup Language의 약자로 https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started 여기에서 더 알아 보자). 위 HTML은 ‘목동 돈까스’란 글자가 쓰여진 페이지를 만들어 보여 준다. ‘목동 돈까스’란 글자는 고쳐 쓰지 않는 한 변경되지 않는다. 이렇게 변하지 않는 웹페이지를 ‘정적이다’ 라고 말한다. 그렇다면 ‘동적이다’ 라는 말은 반대로 변할 수 있는 웹페이지라는 것을 쉽게 유추 할 수 있으리라 생각한다. 자바스크립트는 정적인 페이지를 동적으로 만들어 준다고 했으니, 우리는 자바스크립트를 사용해 위 ‘목동 돈까스’라는 글자를 직접 고쳐 쓰지 않고 변하게 할 수 있을 것이다. 한 번 위 웹페이지의 글자를 자바스크립트를 이용해 변경되도록 해보자.

<p id="title">목동 돈까스</p>
<button onClick="**document.getElementById('title').innerHTML='수원 돈까스'**"> 목동을 수원으로 바꾸기 </button>

좀 많이 복잡해졌다. ‘목동 돈까스’ 글자를 표시하는 부분과 그 글자를 변하게 하는 ‘기능’ 을 작동할 수 있게 하기 위해 버튼이라는 HTML 요소를 하나 더 추가했다. 그리고 버튼을 누르면 글자를 변하게 하는 자바스크립트를 드디어 추가했다. 위 코드에서 Javascript 부분은

document.getElementById('title').innerHTML='수원 돈까스'

이다. 좀 복잡해 보이지만 한 번 그대로 읽어 보자. “웹페이지에서 ID가 title 인 요소(HTML 요소)를 가져와서 그 안에 있는 HTML을 ‘수원 돈까스’로 바꿔줘” 란 명령이다. 프로그래밍 언어는 인간이 이해할 수 있는 언어이기 때문에 복잡하긴 하지만 크게 어렵진 않다 (단, 영어를 안다면). 그럼 위 자바스크립트를 이해했을까? 단언컨데, 이제 위 코드를 이해한 것이면 자바스크립트의 전부를 알았다고 해도 과언이 아니다. (판주야 내 말을 믿어라! ㅋㅋ)

그럼, React 란 무엇인가?

자바스크립트를 다(?)알았으니 이제 React를 알아보자. React는 자바스크립트를 더 쉽고 단순하게 사용할 수 있도록 도와주는 라이브러리이다. 라이브러리(도서관?)는 또 무엇인가? 어떤 기능을 구현하려면 자바스크립트로 여러 줄의 코드를 작성해야 하는데, 자주 (길게) 사용해야 하거나 복잡하게 작성해야 할 코드를 여러 함수 등으로 미리 만들어 모아놓은 것을 라이브러리라고 한다. 이 정도로만 알고 넘어가자.

왜 자바스크립트를 더 쉽고 단순하게 작성하도록 도와줘야 하는데?

웹 기술은 초기에 HTML을 사용해 단순히 정보를 브라우저상에 표시해 주는 기능을 수행했었다. 이랬던 웹 페이지가 네트워크 기술의 발달과 함께 다양한 기능을 수행하는 우리가 흔히 아는 ‘프로그램’ 수준으로 발전하게 된다. 그래서 이제 ‘웹 페이지’를 넘어 ‘웹 앱’ (Web Application — 웹 응용프로그램)으로 부르게 된다. 앱(애플리케이션)은 우리가 흔히 아는 엑셀, 파워포인트와 같은 것을 말하는데, 이런 프로그램을 사용해봤으면 알겠지만, 많은 데이터를 입력하거나 그것을 계산하거나 하며 사용자와 많은 상호작용이 필수적으로 발생한다. 그렇다 보니 웹 페이지를 동적으로 만들어주는 자바스크립트를 필수적으로 (굉장히 많이) 사용되게 되었다.

그런데…

앱 수준의 웹페이지(웹 앱)를 만들려면 단순한 텍스트뿐만 아니라 사용자로부터 어떤 값을 입력받는 입력 상자 등 많은 웹 요소(페이지를 구성하는 p, button 같은 HTML 태그들)들을 사용자의 버튼을 누르거나 마우스를 클릭하는 등의 동작에 따라 동적으로 변화무쌍하게 만들어야 한다. 그런데 바로 위 예제에서 확인할 수 있듯이 p HTML 태그 (<p>) 속의 글자 변경만 하는 데도 나름 길고, 복잡하고, 어렵게 보이는 자바스크립트 코드를 작성해야만 한다. 하물며 복잡한 햅 수준의 웹 페이지의 자바스크립트는 어떨까? 사용자와 상호작용을 하기 위해 엄청나게 많고 복잡한 코드를 작성해야 한다. 그렇다 보니 많은 웹 개발자들이 이것을 쉽고 단순하고 사용할 수 있게 하기 위해 라이브러리를 만들게 된다. 그 라이브러리 중 하나가 바로 React이다.

그래서, React가 어떻게 자바스크립트를 단순하게 해주는데?

위에서 사용한 자바스크립트 예제를 React를 사용해 한 번 바꿔보자.

const [title, setTitle] = useState('목동 돈까스');
<p>{title}</p>
<button onClick={() => {setTitle('수원 돈까스')}> 목동을 수원으로 바꾸기 </button>

어떤가? 정말 쉽고, 단순해 지지 않았는가!!!

그렇다, 쉽고 단순해지지 않았다.

하지만, 제일 첫 줄을 제외한다고 가정하면, p 태그(<p>)의 id가 빠지고 document.getElementById('title').innerHTML='수원 돈까스' 의 긴 명령을 한 단어로 된 setTitle('수원 돈까스') 란 명령 하나로 축약 되었으니 단순해 졌다고 볼 수도 있겠다.

그렇다, React는 전체적인 자바스크립트의 코드의 양을 획기적으로 줄여주거나 단순화해 주지는 않는다. 오히려 상황에 따라 코드의 양은 더 늘어날 수도 있고 전체적으로 보면 구조에 따라 더 복잡해 보일 수도 있다. 하지만 앞서 가정했던 것처럼 위 예제에서 첫째 줄을 제외한다면 (사실 심지어 react를 사용하기 위해 필요한 더 많은 코드 마저 위 코드에서 생략되어 있지만) 실제 콘텐츠 부분 (사용자에게 보이는 HTML 부분)은 쉽고 단순하고 직관적으로 되었다.

잠시, React로 작성된 위 코드도 한 번 그대로 읽어보자. “처음 값을 ‘목동 돈까스’로 하는 title 이라는 변수 (수학에서 x, y 같은 역할을 하는 것) 와 그 변수 값을 바꿀 수 있는 함수 (수학에서 사용하는 함수 같은 개념) setTitle 을 만들고 웹페이지에는 그 변수를 표시하는 부분을 만든 다음, 버튼을 누르면 그 변수 값을 ‘수원 돈까스’로 변경한다” 로 읽을 수 있다. 정말 어렵고 복잡해졌다 ㅎㅎ. ‘변수’, ‘함수’ 만드는 부분 설명이 어렵게 만드니 그 부분을 빼고 다시 한 번 읽어보자 “setTitle(함수)를 사용해 title 변수(x)를 ‘수원 돈까스’ 로 변경해라” 로 읽을 수 있겠다. 어떤가? “웹페이지에서 ID가 title 인 요소(HTML 요소)를 가져와서 그 안에 있는 HTML을 ‘수원 돈까스’로 바꿔줘” 란 것 보다 좀 쉬워졌을까?

위에서 사용한 예제가 너무 단순해서 그 차이가 잘 보이지 않을 수 있다. 하지만 보여는 HTML 태그에만 집중해서 보면, 그 양이 더 많아지거나 화면이(페이지) 여러 개로 나누어지는 경우 그 차이는 명확하게 보이게 될 것이다.

같은 동작을 하는 자바스크립트로만 작성된 코드와 React 라이브러리를 사용하여 작성된 코드를 보이는 HTML 태그에만 집중해서 한 번 더 복잡한 상황을 갖고 비교해 보자. 보이는 부분만 발췌 (React의 선언부 코드를 생략) 했기 때문에 초깃값 ‘목동 돈까스’ 는 무시하고 자바스크립트가 사용된 button 태그 위주로만 보자

<p id="title">목동 돈까스</p>
<button onClick="**document.getElementById('title').innerHTML='수원 돈까스'**"> 제목 변경 </button>
<p id="city">서울시</p>
<button onClick="**document.getElementById('**city**').innerHTML='경기도 수원시'**"> 시 변경 </button>
<p id="province">양천구</p>
<button onClick="**document.getElementById('**province**').innerHTML='권선구'**"> 구 변경 </button>
<p id="address">목동</p>
<button onClick="**document.getElementById('**address**').innerHTML='권선동'**"> 동 변경 </button>
<p>{title}</p>
<button onClick={() => {setTitle('수원 돈까스')}> 제목 변경 </button>
<p>{city}</p>
<button onClick={() => {setCity('경기도 수원시')}> 시 변경 </button>
<p>{province}</p>
<button onClick={() => {setProvince('권선구')}> 구 변경 </button>
<p>{address}</p>
<button onClick={() => {setAddress('권선동')}> 동 변경 </button>

어떤가? 이제 차이가 보이지 않는가? 훨씬 명확하고 직관적으로 되었다.

그렇다. React는 자바스크립트의 동작 방식을 조금 바꾸어 화면에 보이는 HTML 부분을 좀 더 명확하고 직관적으로 코드를 작성할 수 있게 해준다. 그래서 React 코드는 작성하기 쉽고, 읽기 쉽고, 고치기 쉽다. (물론, 위 예에서 React를 사용하기 위해 생략된 많은 코드들이 있다는 것은 모두가 알고 있는 함정이다. 훗…)

자바스크립트의 동작 방식을 바꾸었다고?

앞에서 React는 자바스크립의 동작 방식을 조금 바꾸어 쉽게 만들었다고 했다. 원래 자바스크립트의 동작 방식은 어땠고 또 그것이 어떤 문제가 있었길래 그 방식을 바꾸어 쉽게 만들었다고 하는 것일까?

그건 다음 시간에?

원글 작성자 : 김건한(Conan)
원글 올리는자 : 박상은(Sanni)

창의적이고 꼼꼼한 건한님! 한 편을 작성하기 위해 들인 수고가 많았습니다~ 독자 여러분! 2편이 나올 수 있게 많은 공감 부탁드려요. 코드의 어디가 왜 바뀌는건지, 쉽다고 했는데 왜 이 부분은 난 이해가 안되는건지~ 질문을 드렸는데 여러분들의 많은 반응이 있어야 후속편과 답글을 받을 수 있답니다. 수많은 ‘판주'를 위하여 치얼스 🍻— 상은