1-1.웹 개발

웹 기술

인터넷이 연결되지 않은 곳이 없고 세상 모든 것이 다 웹에서 돌아가고 있다. 오피스 프로그램을 설치하지 않아도 브라우저로 구글 독스에 접속하여 문서를 작성하고 볼 수 있고 하디 디스크가 없어도 클라우드에 내 정보를 마음껏 저장할 수 있다.

뉴스나 영화도 네트워크를 통해 언제든지 볼 수 있으며 은행에도 갈 필요 없고 쇼핑도 컴퓨터로 즐긴다. 이 모든 혜택을 손바닥 위의 스마트폰으로 언제 어디서나 누릴 수 있다. 심지어 거대한 게임도 설치할 필요없이 웹에서 플레이할 수 있다.

세상이 이렇게 바뀌다 보니 모든 소프트웨어는 웹으로 전환되고 있으며 앞으로는 더할 것이다. C/C++ 개발자는 70년대 코볼 개발자와 비슷한 처지가 되어 버렸고 새로 배우는 젊은 세대는 웹 개발로 입문하는게 보통이다.

웹 관련 기술의 난이도는 높지 않아도 알아야 할 기술이 너무 많아져 오히려 더 복잡해졌고 결코 만만치 않다. 딱 하나만 깊이있게 배워서는 안되면 자잘하게 배워야 할 과목과 기술이 많다. 웹 기술이 어려운 궁극적인 이유는 과다한 다양성이다.

▶ 같은 목적의 기술이 너무 많고 절대 강자가 없다. 웹 프레임워크만 해도 앵귤러, 리액트, 뷰가 경쟁중이며 기업마다 선호하는 기술이 달라 어쩔 수 없이 다 배워야 한다.

▶ 변화의 속도가 너무 빠르다. 직선적으로 개선되는게 아니라 지그재그 식으로 갈팡질팡하며 나아간다. 거의 매일 바뀌며 후방 호환성은 개나 줘 버리라는 식이라 애써 배워 봐야 쓸모없는 기술도 많다.

▶ 참여자가 너무 많고 오만가지 기술을 들고 나와 최고라고 광고해 대니 갈피를 잡기 어렵다. 그렇다고 무시할 수도 없고 2% 성능 향상을 위해 완전히 다시 배워 봤자 소리소문없이 사라져 버리는 것도 많다.

▶ 개발 및 실행 환경이 가변적이라 최적의 궁합을 맞추기 어렵다. 브라우저나 장비가 천차만별이라 범용성을 확보하기 어렵다. 여기서 잘 되는게 저기서는 안되고 지금 되는게 내년에도 잘된다는 보장이 없다.

웹 개발은 대부분 오픈 소스 기반이다. 중앙의 강력한 통제자가 없어 자유롭게 업그레이드하다 보니 다양해질 수밖에 없다. 너무 자유분방해 거의 지저분한 수준이다. 그나마 국제적인 표준 재정으로 어느 정도의 방향성은 유지하고 있어 다행이다.

이런 상황이다 보니 어쩔 도리 없이 순서대로 하나씩 배우고 끊임없이 따라가야 한다. 시간과 체력이 많이 걸릴 수밖에 없고 단기간의 벼락치기로는 따라잡을 수 없다. 다행히 다 비슷 비슷은 해서 한 과목을 잘 익혀 튼튼한 기초를 다져 두면 다음 공부는 훨씬 수월하게 할 수 있다.

먼저 공부할 과목

웹은 클라이언트/서버 구조이며 클라이언트가 요청을 보내면 서버가 응답하는 방식으로 동작한다. 브라우저에서 네이버를 열고 검색식을 입력하여 요청하면 네이버 서버가 검색 결과를 찾아 응답하는 식이다.

이 시스템이 동작하려면 클라이언트와 서버가 다 구비되어 있어야 하며 네트워크로 연결되어 있어야 한다. 사용자쪽을 앞단(front end)라고 하며 서버쪽을 뒷단(back end)라고 한다. 하나의 앱을 완성하려면 양쪽 다 개발해야 한다.

이 책의 주제인 리액트는 프론트, 즉 앞단의 화면을 구현하는 기술이다. 브라우저에 정보를 표시하고 예쁘게 다듬고 사용자와 상호작용까지 하려면 각 영역을 담당하는 기술을 조합해야 한다. 여러 가지 기술이 사용되지만 다음 세 가지가 기본이다.

▶HTML : 보여줄 내용을 작성한다. 태그와 문자열로 구성되며 어디에 어떤 내용을 보일 것인지 정의하는 문서이다. 구조가 간단해 배우기 쉽고 직관적이다.

▶CSS : 페이지의 모양을 정의한다. 화면 요소를 배치하는 방법과 색상, 모양을 지정한다. 단순하지만 양이 많아 다 알기는 어렵고 레퍼런스를 찾아볼 준비만 해 두면 충분하다.

▶자바 스크립트 : 버튼 클릭이나 페이지 이동시의 동작을 정의하여 사용자와 상호작용한다. 문법 자체는 간단하지만 높은 숙련도를 요구한다.

이 셋은 웹 개발의 기본이며 전공 필수이다. 웹 개발 프레임워크는 모두 이 세 기술 위에서 동작하며 피할 수 없다. 리액트를 공부하기로 했다면 이미 다 알고 있을 것이며 그렇지 않다면 학습의 순서를 잘못 정한 것이다.

완전히 다 알 필요는 없더라도 개념은 파악하고 모르면 찾아볼 정도까지는 준비해 두어야 한다. 리액트 자체도 어려운데 앞부분을 찾아가며 같이 공부하는 건 비효율적이다. 미분, 적분을 구구단과 함께 공부할 수는 없는 노릇이다.

이 세 과목만 알면 리액트 공부를 일단 시작할 수는 있다. 물론 이게 다는 아니어서 실무를 하려면 더 많은 것을 공부해야 한다. 리액트와 함께 병행하여 공부해도 되지만 각각이 별도의 주제이므로 따로 시간을 내서 공부하는 것이 좋다.

▶데이터베이스 : 데이터를 다루려면 쿼리는 작성할 수 있어야 한다. 앞단만 작업한다면 일단은 몰라도 되지만 최소한 개념은 알고 있어야 한다.

▶Node.js : 서버측 기술이며 백단과 협업하려면 어느 정도는 알아야 한다. 리액트의 실행 환경이어서 최소한 패키지 관리는 할 수 있어야 한다.

▶타입스크립트 : 대규모 프로젝트를 안정적으로 수행하기 위해 필요하며 점점 대중화되고 있어 필수적이다.

이 외에 숱하게 많은 라이브러리와 개발 환경도 익혀야 한다. 갈 길이 멀지만 기초가 탄탄하면 나머지는 팁 습득 수준으로 익힐 수 있다. 일단은 전공 필수 3과목과 리액트에 치중하여 실습하자.

단일 페이지 앱

초기의 웹은 보여줄 내용마다 페이지를 따로 작성했다. 요청을 보내면 결과를 담은 페이지를 다시 보내 주는 식이다. 여러 페이지로 구성된 구조를 MPA(Multiple Page Application)이라고 한다. 예를 들어 1 + 2를 요청하여 3이라는 계산 결과를 받는다면 다음 과정을 거쳐 실행한다.

요청을 받은 서버는 계산 결과를 result.html이라는 별도의 문서로 만들어 보내 주며 브라우저는 이 페이지로 전환한다. 독립적인 페이지를 각각 따로 만드니 쉽지만 페이지 전환이 잦고 매번 통신이 이루어지므로 속도가 느리다. 검색을 하면 검색 페이지가 새로 열리며 주소도 바뀌는데 이런 정통적인 방식이 MPA이다.

이에 비해 하나의 페이지로 된 구조를 SPA(Single Page Application)라고 한다. 새로운 페이지로 바뀌는게 아니라 같은 페이지가 일부 바뀌며 주소는 그대로이다. 요청을 보내되 서버는 계산 결과를 웹 페이지가 아닌 XML 문서나 JSON 문자열에 담아 보낸다. 클라이언트는 이 문서를 해석하여 미리 정해진 요소에 출력한다.

요청과 응답이 비동기적으로 수행되는데 이걸 가능하게 하는 기술이 AJAX이다. MPA는 응답을 받기 전에 동기적으로 기다려야 하는데 비해 SPA는 비동기로 요청만 보내고 응답이 올때까지 다른 일을 할 수 있다.

페이지를 바꾸는게 아니라 미리 배치해 놓은 요소에 결과만 출력하면 된다. 실행중에 웹페이지를 원하는대로 주무를 수 있다. 마치 응용 프로그램을 쓰듯이 한 페이지 안에서 모든 일을 처리할 수 있으며 화면 전환이 없으니 깜박임도 덜하다.

정보를 보여 주기만 하는게 아니라 사용자의 입력을 받아 동작을 처리하기 때문에 웹 페이지가 아닌 웹 앱이라고 한다. 페이지 하나가 곧 프로그램인 셈이다. 사용자는 엑셀이나 워드를 쓰듯 웹페이지 안에서 원하는 작업을 다 할 수 있다.

프레임워크

웹 앱은 사용자의 입력을 받아 처리하는 프로그램이므로 원칙적으로 자바스크립트로 모든 것을 다 할 수 있다. 그러나 스크립트로 모든 것을 코딩하면 어렵기도 하고 일일이 코드를 짜야 하니 생산성도 떨어진다. 편의성과 생산성을 보장하는 고수준의 클라이언트측 프레임워크가 많이 발표되어 있는데 다음 3가지가 인기가 많다.

▶Angular : 구글이 만들고 사용한다. AngularJS 1.x는 자바스크립트 사용하다 버전2에서 타입스크립트를 사용하면서 이름에 JS를 떼 냈다. 여기 저기 활용할 수 있는 이점은 있지만 배우기 어려워 상대적으로 인기가 덜하다.

▶React : 메타(페이스북)가 개발한 라이브러리이다. SPA(Single Page Application)를 전제로 하며 가상 DOM을 활용하여 랜더링이 빠르다. HTML을 JSX(JavaScript XML)로 표현하며 컴포넌트를 조립하여 페이지를 만든다.

▶Vue.js : 자바스크립트 기반이며 가상 DOM 활용으로 속도가 빠르다. 문법이 간단하여 기존 개발자가 적응하기 쉽지만 코드 형식이 너무 자유로워 대규모 프로젝트에 적용하기는 어려운 단점이 있다.

셋다 노드 환경에서 실행되며 npm 패키지로 배포한다. https://npmtrends.com은 각 패키지의 다운로드 회수를 비교해 보여주는데 이를 통해 인기의 정도를 가늠할 수 있다. angular는 거의 바닥을 기고 있고 react와 vue가 각축전을 벌이고 있는 상태이나 리액트의 점유율이 더 높다.

물론 인기가 많다고 해서 가장 좋은 라이브러리라는 것은 아니다. 프로젝트의 규모와 목적에 따라 적합한 라이브러리를 잘 선택해야 한다. 경쟁 라이브러리라고 해도 지향하는 목적은 같고 웹 앱을 구현하는 최신 기술은 다 비슷해서 하나를 잘 익히고 개념을 알아 두면 나머지도 쉽게 익숙해질 수 있다.

1-2.리액트

역사

리액트는 메타가 2011년부터 페이스북의 화면 업데이트 속도를 개선하기 위해 개발을 시작했다. 첫 버전은 자바스크립트에서 HTML 문서를 동적으로 생성하는 방법을 도입하여 광고 플랫폼에 적용했다. 2013년 오픈소스로 전환한 후 가상 돔, Router, Redux, Hooks 등을 지속적으로 추가하여 기능을 확장해 왔다. 2026년 현재 최신 버전은 19.2이다.

발표년도	버전	주요 특성
2013	0.3	첫 오픈소스 공개 버전. JSX 구문 사용
2015	0.14	React와 React DOM 패키지 분리. 함수형 컴포넌트 추가
2016	15	랜더링 성능 향상. 자바스크립트 ES6 적용
2017	16	Fiber 도입으로 비동기 랜더링 가능
2019	16.8	Hooks 기능. useState, useEffect. 가독성과 재사용성 향상
2020	17	이벤트 처리 방법 개선
2022	18	동시성 구현, 자동 배치, 비동기 랜더링 최적화
2025	19	useTransition, useActionState 추가

최신 버전을 사용하더라도 이전 소스를 봐야 할 일이 필연적으로 발생하기 때문에 역사를 어느 정도는 알아야 한다. 레거시 프로젝트를 이어서 개발할 수도 있고 샘플 소스가 이전 버전으로 되어 있는 경우도 흔하다. 회사에서는 최신 버전보다는 안정화된 버전을 선호하고 한번 선택한 버전을 잘 바꾸지 않는다.

또 어떤 경우는 버전을 낮추어 개발해야 하는 경우도 있다. 아직도 윈도우나 맥을 10년전 운영체제로 쓰는 사람이 있고 셋톱박스나 스마트TV처럼 업그레이드가 곤란한 장비도 있다. 언제 어떤 기능이 들어갔는지는 대충 파악해 두어야 혼란이 없다.

리액트는 프레임워크가 아닌 라이브러리이다. 이 둘은 주 흐름을 누가 가지는지가 다른데 프레임워크는 구조를 강제하지만 라이브러리는 필요할 때만 호출해서 쓰는 것이다. 상대적으로 가볍다.

리액트는 오로지 클라이언트쪽의 뷰만 다룬다. 사용자의 입력에 어떻게 반응하여 어떻게 그릴 것인가만 처리한다. 무엇을 보여줄 것인지는 모른다. 풀스택과 다양한 장비를 지원하는 추가적인 과목이 더 있다.

▶Next.js : 리액트의 서버측 기술이다. 데이터를 관리한다.

▶리액트 네이티브 : 리액트를 안드로이드, iOS에 적용한 모바일 프레임워크이다.

배우기 쉽다고 주장하지만 처음에는 사실이었을지 몰라도 지금은 그렇지 않다. 리액트만 보면 간단해 보이지만 모든 것을 다 갖추고 있지는 않아 주변 라이브러리를 필수적으로 사용해야 한다. 사용할 수 있는 라이브러리를 취향에 맞게 골라 쓸 수 있는 것은 장점이지만 그러려면 모든 라이브러리를 섭렵해 봐야 한다. 공부할 양이 많고 계속 바뀐다는 점에서 피곤하지만 웹 개발의 일반적인 특성이라 어쩔 수 없다.

도움말

홈페이지는 https://react.dev/이나 영문 사이트이다. 여러 언어로 번역되어 있는데 프랑스, 튀르키예, 스페인 그리고 한중일까지 6개국은 완벽한 번역을 제공한다. 독일, 러시아, 이탈리아도 일부 번역만 제공하는데 비해 우리나라의 위상이 꽤 높다. 따라서 우리는 다음 사이트를 방문하면 된다.

https://ko.react.dev

자습서와 레퍼런스를 제공한다. 자습서의 예제가 꽤 잘 만들어져 있고 설명도 잘 되어 있으므로 한번씩 읽어 보는 것이 좋다. 학습하기 페이지에는 리액트 기초부터 틱택토 게임을 만들면서 주요 개념을 설명하고 Props와 State까지 실습을 통해 사용 방법을 터득하게 해 준다.

API 참고서는 주제별 레퍼런스를 잘 정리해 놓아 실무중에 찾아보기 편리하게 구성되어 있다. 번역의 질도 높고 예제도 핵심적인 내용을 잘 설명하고 있어 큰 도움이 된다. 한번에 다 보는 것보다 도움말의 구조를 잘 파악해 두고 필요할 때마다 찾아보는 것이 좋다.

요즘은 chatgpt나 gemini에 물어 보면 친절하게 잘 가르쳐 준다. 실무를 할 때도 마찬가지지만 학습할 때 잘 활용해야 한다. 다만 뭘 물어 봐야 할지를 알아야 하므로 리액트의 구조에 대해서는 어느 정도 알고 있어야 정확한 답을 구할 수 있다.

가상돔

리액트의 특징 및 장점을 정리해 보자. 당장 와 닿지 않더라도 이해되는 부분까지만 접수해 두면 된다. 실제 예제를 만들어서 살펴 보는게 제일 좋지만 처음부터 너무 많은 것을 알아야 해서 쉽지 않다. 여기서는 정확하지는 않더라도 대충의 예제로 개념 파악 위주로 설명한다.

브라우저는 HTML 문서를 분해하여 관리한다. 전체적으로 긴 문자열이지만 부분 부분을 다루기 쉽지 않아 내부적으로는 노드로 전개한다. 태그, 속성, 문자열 등 페이지를 구성하는 요소를 노드라고 하며 노드끼리 계층을 이룬다. 노드가 계층을 이룬 것을 DOM이라고 한다. 다음 문서를 보자.

h2para.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>sample</title>

</head>

<body>

<h2 id="head">제목이다.</h2>

<p id="para">이것은 <b>문단</b>이다.</p>

</body>

</html>

크롬 브라우저에 이 문서를 열어 보자. F12를 눌러 개발툴을 열고 Elements 탭을 보면 문서의 구조를 보여준다.

body 노드 안에 h2 노드와 문자열이 있다. p 노드안에 문자열과 b 노드가 있고 b 노드안에는 또 문자열이 있다. 개발툴은 이 구조를 간단하게 보여 주지만 실제로는 문자열이나 속성, 심지어 주석까지도 하나의 노드로 취급한다. 위 문서의 DOM 트리를 그려 보면 이런 모양이다.

브라우저가 HTML 문서를 이렇게 잘게 나누어 관리하는 이유는 개별적으로 수정할 때 노드 단위로 바꾸어 두면 효율적이기 때문이다. 이 문서는 반말로 되어 있는데 존대말로 바꾸고 마침표도 넣어 보자. 스크립트로 다음 두 동작을 수행해야 한다.

① h2 내부의 텍스트를 찾아 내용을 "제목입니다."로 바꾼다.

② p의 마지막 자식 노드를 찾아 내용을 "입니다.'로 바꾼다.

두 동작 모두 자바스크립트로 간단히 구현할 수 있다. 다음 스크립트를 <p> 태그 아래쪽에 작성하면 문서를 열자 마자 노드의 내용을 바꾼다. 버튼을 배치해 두고 클릭할 때 동작하는 것도 가능하다.

<script>

let head = document.getElementById("head")

head.firstChild.nodeValue = "제목입니다."

let para = document.getElementById("para")

para.lastChild.nodeValue = "입니다."

</script>

SPA는 한 페이지에서 모든 것을 다 처리해야 하므로 DOM을 조작할 일이 빈번하며 조작의 양도 많다. 그러나 DOM을 조작하는 것은 굉장히 비싸고 느린 동작이다. DOM 자체는 빠르지만 부가적으로 같이 처리해야 할 작업이 많다. nodeValue = "제목입니다." 대입을 하는 즉시 브라우저는 전체 화면을 다시 그린다. 문자열을 바꾸는 간단한 작업이지만 아무리 작은 변화라도 레이아웃이 통째로 바뀔 수 있어 DOM 트리를 재정렬하고 스타일시트를 적용하여 화면을 다시 그린다.

뭔가를 변경하는데 비용이 드는 것은 어쩔 수 없다. 그러나 nodeValue = "입니다."를 대입할 때도 똑같은 일을 한번 더 반복하는 비효율이 있다. 첫 번째 대입할 때 곧이어 다음 대입이 또 있다는 것을 미리 알았다면 이때는 DOM 트리를 미리 분석할 필요 없다. 마지막 변경시 몰아서 한꺼번에 정렬하면 된다. 그러나 자바스크립트는 코드의 다음줄에 뭐가 있는지 미래를 예측할 수는 없기 때문에 DOM 트리를 바꿀 때마다 즉시 웹페이지를 갱신할 수밖에 없는 한계가 있다.

가상 DOM은 이런 문제를 해결하기 위해 메모리에 실제 DOM의 사본을 만들어 둔다. 모든 변경을 보이지 않는 가상 DOM에서 수행하면 화면 깜박임이 없고 변경 사항을 모아 두었다가 최종적으로 한꺼번에 반영하여 속도도 빠르다.

가상 DOM도 별도의 메모리를 쓰고 사본과 원본을 비교하는 처리가 들어가 그 자체가 빠른 것은 아니다. 중요한 것은 "모아서 한꺼번에" 업데이트한다는 점이다. 내부에서 무슨 짓을 하든 실제 DOM은 딱 한번만 바뀌기 때문에 브라우저도 한번만 다시 그리면 된다.

속도는 월등히 빨라지고 화면 깜박임을 최소화하여 출력 품질도 좋아진다. 대신 내부에 별도의 사본을 유지해야 하므로 메모리를 더 많이 쓴다. 가상돔은 리액트만의 특징은 아니며 지금은 일반화되었다. 그만큼 실용적이고 효과가 뛰어난 기술이라는 얘기다.

JSX

리액트는 자바스크립트안에 HTML 문서를 통합하여 기술하는 JSX(JavaScript XML) 확장 스크립트를 사용한다. 이런게 왜 필요한지 간단한 예를 통해 알아보자.

성적표를 웹 페이지에 출력해 보자. 큼지막한 제목과 점수를 알려 주는 문자열로 된 간단한 문서이다. HTML 문서로 비슷한 모양을 만들려면 <h2> 태그로 제목을 붙이고 <p> 태그로 점수를 출력한다. 차후 노드를 조작하기 위한 class 속성과 id 속성도 지정했다.

<h2 class="head">성적표</h2>

<p id="result">점수는 123입니다.</p>

실제 점수는 상수가 아니라 score라는 변수값을 출력하되 어디선가 계산된 값이라고 하자. 문자열 사이에 점수를 조립하여 출력하는 것은 정적인 문서가 아닌 동적인 동작이므로 코드가 필요하다. 자바스크립트로 이런 문서를 만들어 보자. 다음 예제는 정확하게 같은 문서를 실행 직후에 생성한다.

score.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>sample</title>

</head>

<body>

<div id = "root"></div>

<script>

// 출력할 점수

let score = 123

// <h2> 태그 생성

let head = document.createElement("h2");

head.setAttribute("class","head")

let text = document.createTextNode("성적표");

head.appendChild(text);

// 루트에 <h2> 태그 추가

let root = document.getElementById("root")

root.appendChild(head);

// <p> 태그 생성

let para = document.createElement("p");

para.setAttribute("id","result")

let textpara = document.createTextNode("점수는" + score + "입니다.");

para.appendChild(textpara);

// 루트에 <p> 태그 추가

root.appendChild(para);

</script>

</body>

</html>

자바스크립트는 스스로 동작할 수 있는 코드이지만 브라우저 화면에서 확인하려면 HTML 파일을 만들고 <script> 태그 안에 코드를 작성하여 실습해야 한다. score.html 파일을 새로 만들고 편집기로 코드를 입력한 후 브라우저에서 열면 다음과 같은 실행 결과를 볼 수 있다.

<body> 안에는 div 태그 하나만 정의되어 있는데 id를 root로 지정했다. 이 태그 자체는 보이지 않지만 동적으로 생성할 태그를 추가할 지점이다. 스크립트에서는 태그를 생성하고 텍스트와 속성을 설정한 후 root에 하나씩 붙여 실행중에 태그를 만들어 낸다. <p> 태그의 내용에는 score 변수를 문자열 중간에 삽입한다.

원하는 문서를 만들어 내기는 했다. 그러나 보다시피 단 두 줄의 HTML 문서를 생성하는데 너무 많은 코드가 필요하다. 어렵거나 복잡한 것은 아니지만 이걸 일일이 작성하려면 시간도 많이 들고 길다 보니 오타를 칠 위험도 높다.

또 문자열과 자바스크립트 코드가 뒤섞여 어디가 HTML이고 어디가 코드인지 분간하기도 어렵다. 이 예제에서는 "점수는" + score + "입니다." 정도의 간단한 연결문이지만 실무 코드에서는 ", +, <> 등이 마구 뒤섞여 정신이 없고 괄호 짝을 맞추느라 눈깔이 빠질 지경이다. 간단한 정수값 하나도 이런데 SQL 쿼리문을 조립하려면 어떻겠는가?

이런 불편함을 해소하기 위해 나온 것이 JSX이다. 자바스크립트와 HTML을 통합해서 간략하게 기술하는 스크립트이다. 위 코드를 JSX로 쓰면 길이도 짧아지고 읽기도 쉽다. 잠시 후 실습해 볼 것이다.

function App() {

let score = 123

return (

<div>

<h2 className="head">성적표</h2>

<p id="result">점수는 {score}입니다.</p>

</div>

);

}

function App은 자바스크립트 함수이며 이 안에서 당연히 변수를 선언할 수 있고 인수도 받을 수 있다. return () 안에 있는 구문이 JSX이며 이 안에서 <h2>, <p> 태그를 정의한다. 이 정의문은 React 객체의 createElement, appendChild 메서드 호출문으로 바뀌어 가상 DOM을 생성하고 최종적으로는 실제 DOM에 연결한다. 내부 과정은 복잡하지만 JSX의 실행 결과가 앞에서 작성했던 자바스크립트 코드와 같은 효과를 낸다.

JSX는 HTML도 아니고 자바스크립트도 아니며 고유의 문법을 가지는 XML 문서이다. 전체적으로는 HTML 문서처럼 생겼고 작성하는 방법도 비슷하지만 별도의 규칙이 있다. 따라서 우리는 이 문법의 규칙을 따로 배워야 한다. XML은 문법이 엄격해 정확하게 기술해야 한다. 대소문자나 구두점까지도 규정을 지켜야 한다. 다음에 따로 상세히 연구해 보기로 하고 이 예제에서 드러나는 몇 가지 예만 확인해 보자.

▶ 태그의 class 속성은 className으로 쓴다.

▶ 단 하나의 루트가 있어야 한다. <h2>과 <p>을 감싸는 <div>가 필요하다.

▶ 자바스크립트 코드를 사용하거나 변수를 읽을 때는 { } 괄호로 감싼다.

고유 문법을 가지는 JSX는 브라우저가 직접 해석할 수 없다. 따라서 자바스크립트로 번역해 주는 트랜스파일러(transfiler)가 필요하다. 컴파일러는 언어를 실행 가능한 이진 파일로 번역하는데 비해 트랜스파일러는 소스를 다른 소스로 바꾼다. 언어 사이를 번역하는 일종의 컴파일러라고 생각하면 된다. 여러 종류가 있는데 리액트는 바벨 또는 ESBuild를 사용한다.

브라우저로 보내기 전에 한단계 더 거치다 보니 복잡한 규칙이 필요하다. 여기서는 JSX의 필요성과 개념에 대해서만 소개한다. 더 상세한 문법과 규칙은 예제를 만들어 보면서 실습해 보자.

컴포넌트 기반

리액트는 웹페이지를 통째로 구현하는게 아니라 각 부분을 컴포넌트로 분리하여 조립식으로 구현한다. 컴포넌트는 화면을 구성하는 UI의 한 부분이며 웹페이지의 부품에 해당한다. 네이버를 보자.

검색식을 입력받는 부분, 광고를 출력하는 부분, 로그인 정보를 보여 주는 부분 등으로 나누어져 있다. 이 각각의 네모 영역이 바로 컴포넌트이다. 전체를 한 덩어리로 개발하는 것보다는 기능별로 잘게 쪼개 개발하는 편이 더 쉽다.

컴포넌트를 잘 만들어 놓으면 여러 개 나열하여 반복할 수 있고 컴포넌트끼리 중첩하여 더 복잡한 것도 만들 수 있다. 컴포넌트 자체가 독립적인 부품과 비슷해 다른 페이지에서 손쉽게 재활용할 수도 있다.

컴포넌트를 너무 거창하게 생각할 필요없이 HTML의 <table>, <img> 태그와 같은 개념이라고 보면 된다. 도표를 표시하려면 <table> 컴포넌트를 쓰고 이미지를 출력하려면 <img> 컴포넌트를 배치하여 웹 페이지를 만든다. 즉, 컴포넌트는 태그와 비슷하며 속성을 가지고 스타일을 입힐 수도 있다. 태그는 기능이 고정적인데 비해 컴포넌트는 더 유연하다.

▶ 스스로 상태를 유지하여 사용자의 선택을 기억한다. 검색식을 입력받는 부분은 최후로 입력한 검색 문자열이 무엇인지 기억하고 로그인 컴포넌트는 현재 로그인한 사용자의 이름을 기억한다.

▶ 부모로부터 속성을 전달받고 동적 문서를 생성하여 리턴하는 식으로 통신하여 가변적인 정보를 실시간으로 보여준다. 메일 컴포넌트는 로그인한 사용자의 정보를 전달받아 새 메일과 쪽지의 개수를 표시하고 관리한다.

▶ 함수 또는 클래스로 정의하며 이 안에 조건, 반복, 이벤트 처리 등의 코드를 작성할 수 있어 모양과 동작을 마음대로 정의할 수 있다. 최신 뉴스 목록이 나타나고 클릭하면 해당 뉴스를 보여준다.

HTML 문서가 <div>, <a>, <img> 태그를 구성되는 것과 똑같은 원리로 리액트 페이지는 <Login>, <Mail>, <News> 등의 컴포넌트로 구성된다. 기본 태그와 구분하기 위해 항상 대문자로 시작한다. 기능이 고정된 태그와 달리 프로그래밍 가능하고 그러다 보니 개발 방법을 배워야 한다는 차이가 있을 뿐이다.

리액트로 개발한다는 것은 이런 컴포넌트 하나 하나를 만들고 조합하는 과정이다. 잘 만들어 놓은 것은 재사용할 수 있고 남이 만들어 놓은걸 가져다 쓸 수도 있다. 부품을 먼저 만들고 조립하여 큰 앱을 만드는 상향식(bottom up) 개발 방식이다.