처음 만난 리액트 문서
0.1 HTML 살펴보기
0.1.1 HTML이란 무엇인가?
먼저 웹 사이트를 구성하는 가장 기본 요소중 하나인 HTML에 대해서 알아보겠습니다. HTML은 Hyper Text Markup Language의 약자로써 마크업 언어의 한 종류입니다. 여기서 마크업이라는 것은 문서나 데이터를 처리하기 위해 문서에 추가되는 정보를 의미합니다. 그리고 마크업 정보를 표현하기 위한 언어를 마크업 언어라고 합니다. HTML은 이러한 마크업 언어의 한 종류입니다. 그동안 HTML은 주로 웹에서만 사용되었습니다. 하지만 요즘은 웹브라우저를 이용해서 데스크탑용 앱을 만들 수 있는 기술들도 있기 때문에 그런 곳에도 HTML이 사용되기도 합니다. 정리하면, HTML은 웹사이트의 뼈대를 구성하기 위해서 사용하는 마크업 언어라고 생각하면 됩니다.
HTML에서는 우리가 흔히 태그(tag)라고 부르는 것들을 사용해서 웹사이트의 구조를 만들고 웹사이트에 들어갈 내용을 채워넣게 됩니다. 태그는 태그 이름을 뾰족 튀어나온 괄호(<, >) 사이에 넣어서 사용합니다. 그리고 모든 태그에는 여는 것과 닫는 것이 있는데, 예를 들어 html 태그는 <html>를 사용해서 열고, </html>를 사용해서 닫습니다. 슬래시(/)가 들어가면 닫는 역할을 한다고 기억하면 됩니다. 아니면 <br />처럼 열고 닫는 것을 한 번에 쓰는 경우도 있습니다. 태그는 열었으면 꼭 닫아줘야 한다는 것을 기억해주세요. 간혹가다가 닫지 않아서 오류가 발생할 수 있기 때문입니다.
0.1.2 웹사이트의 뼈대를 구성하는 태그들
그렇다면 웹사이트의 뼈대를 구성하는 태그에는 어떤 것들이 있을까요? HTML에는 웹사이트의 뼈대를 구성하기 위한 가장 기본적이고 필수적인 태그들이 존재합니다. 바로 아래에 나오는 태그들입니다.
<html>
<head>
</head>
<body>
</body>
</html>
<html>태그는 말 그대로 HTML의 시작과 끝을 알리는 태그입니다. 모든 웹사이트의 HTML소스 파일을 열어보면 <html>로 시작하고 </html>로 끝나는 것을 볼 수 있습니다. 아래 이미지는 우리가 자주 방문하는 구글 웹사이트의 HTML 소스를 개발자 도구로 열어본 것입니다. 그림에 표시된 것처럼 시작과 끝에 <html>태그가 존재하는 것을 볼 수 있습니다.
그리고 <html>태그 안에는 <head>와 <body>태그가 존재합니다. <head>와 <body>태그는 단어의 의미 그대로 머리와 몸통을 의미합니다. 아까 HTML이 웹사이트의 뼈대를 구성한다고 말씀드렸죠? 사람의 몸에도 머리쪽에 있는 뼈와 몸통에 있는 뼈가 나눠져 있는 것처럼 HTML도 머리와 몸통으로 나눠져 있습니다. 그중에서 머리를 담당하는 것이 <head>태그이고, 몸통을 담당하는 것이 <body>태그입니다. 아래 그림은 사람의 몸과 각 부위에 매칭되는 HTML태그를 나타낸 것입니다.
그럼 웹사이트에서 머리(head)는 무엇을 의미할까요? 우리가 사람을 볼 때 얼굴이 있는 머리를 보면 그 사람이 누군지 알 수 있는 것처럼, 웹사이트의 head는 이 웹사이트가 어떤 웹사이트인지 여러가지 속성들(제목, 설명 등)을 담고있는 곳이라고 보면 됩니다. 이러한 속성들을 메타데이터(metadata)라고 부릅니다. 그래서 <head>태그 안에 있는 내용들만 살펴봐도 해당 웹사이트가 대략적으로 어떤 사이트인지 알 수 있습니다. 참고로 <head>태그 안에서 웹사이트의 제목을 넣기 위해 사용하는 태그가 바로 <title>태그입니다. 아래 그림은 <head>태그와 그 안에 있는 <title>태그를 나타낸 것입니다.
그리고 사람의 머리 밑에 몸통이 있듯이 <body>태그는 <head>태그 다음에 나오며, 실제로 웹사이트에서 보이는 콘텐츠가 들어가게 됩니다. 그래서 이 <body>태그 안에 들어있는 내용이 바로 우리가 실제로 웹브라우저에서 보게 되는 내용이라고 생각하면 됩니다.
0.1.3 SPA (Single Page Application)
지금까지 <html>, <head>, <body>태그에 대해서 간단하게 알아봤습니다. 자, 여기서 우리가 하나의 웹사이트를 탐색할 때를 한 번 떠올려 보겠습니다. 보통 하나의 복잡한 사이트에 접속해서 여러가지 버튼이나 탭을 누르면서 여러 페이지를 왔다갔다 할 때마다 브라우저에 나오는 내용이 달라지는것을 볼 수 있었을 겁니다. 그렇다면 브라우저에 나오는 내용이 바뀐다는 것은 <body>태그로 둘러싸인 부분의 내용이 바뀐다는 것일까요?
네, 맞습니다. 실제로 각 페이지별로 HTML파일이 따로 존재하며, 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 HTML파일을 받아와서 화면에 표시해주게 됩니다. 그렇다면 수많은 페이지가 존재하는 복잡한 사이트의 경우 HTML파일이 수십에서 수백개가 될텐데 그걸 어떻게 다 관리할까요? 그래서 나오게 된 것이 바로 SPA(Single Page Application) 입니다. SPA는 말 그대로 하나의 페이지만 존재하는 웹사이트(또는 웹 애플리케이션) 입니다. 어떻게 하나의 페이지로 복잡한 웹사이트를 모두 표현할 수 있을까요? 그 비밀은 바로 우리가 이 문서에서 배우려고 하는 리액트와 관련이 있습니다. 아래 그림을 한 번 보도록 하겠습니다.
위 그림의 왼쪽은 전통적인 방식의 웹 애플리케이션입니다. 이 방식의 경우 여러개의 페이지가 존재하는 형태이기 때문에 Multi Page Application이라고 부르기도 합니다. 사용자가 페이지를 요청할 때마다 새로운 페이지가 로딩되어 화면에 나타나는 것이죠. 그리고 각 페이지는 각자의 HTML파일을 갖고 있습니다. 반대로 오른쪽은 Single Page Application을 나타낸 것이며, 단 하나의 페이지만 존재합니다. 여기서 페이지가 하나라는 것은 HTML파일이 하나라는 뜻입니다. 처음에는 이 HTML파일의 <body>태그 내부가 텅 비어있다가 우리가 페이지에 접속할 때 해당 페이지에 해당되는 콘텐츠를 가져와서 동적으로 <body>태그 내부를 채워넣게 됩니다. 그리고 여기서 리액트가 채워넣는 역할을 해준다고 생각하면 됩니다. 자세한 내용은 뒷장에서 리액트를 배울때 나오니, 여기서는 SPA의 개념만 간단하게 이해하고 넘어가면 됩니다.
마지막 업데이트: 2025년 08월 25일 02시 50분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.