초보자를 위한 리액트 기초: HTML부터 훅까지 한 번에 이해하기

웹페이지를 더 재밌고 똑똑하게 움직이게 만들고 싶나요? HTML, JavaScript,그리고 리액트(React)의 동작 원리를 차근차근 따라가면 그 비밀을 알 수 있어요. 이 내용을 읽고 나면 나만의 대화형 웹앱도 꿈이 아니라는 걸 알게 될 거예요!

웹의 첫걸음: HTML은 집의 설계도!

HTML(웹페이지 뼈대 만들기)는 웹사이트가 어떤 모습이어야 하는지 정해주는 설계도 같은 역할을 해요. 예를 들면, "div"나 "h1" 같은 태그를 써서 화면에 글씨, 박스, 버튼 같은 요소들을 만들죠. 이 코드는 그냥 웹브라우저에 보여주려고 있는 거예요. 바꿀 수 있지만, 직접 움직이거나 변하지는 않아요.

자바스크립트: 설계도를 움직이게 만드는 마법사

JavaScript(웹페이지 행동 정하기)는 HTML로 만든 페이지가 말을 하거나, 움직이거나, 버튼을 눌렀을 때 뭔가 일어나게 도와줘요. 예를 들면 아래처럼 코드를 짜면, 버튼을 누를 때마다 글씨가 바뀌어요.

const appDiv = document.getElementById("app");
const header = document.createElement("h1");
const text = document.createTextNode("자바스크립트로 시작!");
header.appendChild(text);
appDiv.appendChild(header);

하지만 이렇게 직접 하나씩 "어떻게" 할지를 다 지시해줘야 해서, 일일이 신경 쓸 게 많아요. 이걸 "명령형 방식(Imperative)"이라고 불러요.

DOM: 현재 화면의 실시간 모습

DOM(Document Object Model, 화면의 실시간 모양)는 브라우저가 지금 보여주는 웹페이지의 '진짜 모습'을 뜻해요. HTML 설계도는 바뀌지 않지만, JavaScript로 DOM은 쉽게 조작할 수 있어요. 예를 들어, 버튼을 더 추가하거나 글씨를 바꾸면 진짜 화면이 달라져요!

선언형 프로그래밍과 리액트: "뭘 할지"만 말하면 척척!

React(리액트, UI 만들기 도우미)는 "이렇게 만들어줘!"라고 순식간에 말할 수 있는 똑똑한 친구예요. 예를 들어, "여기 큰 글씨로 Learn React!"라고 주문만 하면 알아서 그려줘요. 복잡한 절차는 React가 알아서 처리해요. 이런 방식을 "선언형(Declarative)"이라 불러요.

JSX: 자바스크립트에 HTML 느낌 더하기

JSX(JavaScript XML, 자바스크립트 확장 문법)는 HTML처럼 생긴 코드를 JavaScript 코드 안에 쓸 수 있게 해줘요.

root.render(<h1>Learn React</h1>);

하지만, 브라우저는 바로 JSX를 알아듣지 못해요. 이럴 땐 Babel(바벨, 자바스크립트 통역사)라는 툴이 필요해요. Babel이 JSX 코드를 "진짜 자바스크립트"로 바꿔 주어서, 브라우저가 제대로 이해하고 실행할 수 있게 해줘요!

리액트 컴포넌트: 내 마음대로 조립하는 블록

컴포넌트(조각 하나, 함수로 만드는 UI 블록)는 웹의 각 부분을 블록처럼 쫙쫙 만들어줍니다. 예를 들어, "Header"라는 컴포넌트를 만들면, 여러 곳에서 같은 방식으로 쉽게 재사용할 수 있죠.

function Header() {
  return <h1>리액트 배우기!</h1>;
}

그리고 <Header /> 이렇게 써서 화면에 원하는 위치에 나타낼 수 있어요.

Props(프롭스): 컴포넌트에게 값 전달하기

Props(프롭스, 전달할 데이터)는 컴포넌트에게 필요한 정보를 준다고 보면 돼요. 예를 들어, "제목은 뭘로 할까?"를 결정해서 Header의 'title' props로 넘겨줄 수 있죠.

function Header(props) {
  return <h1>{props.title}</h1>;
}
// 사용 예시
<Header title="리액트 배우기" />

이렇게 하면 같은 Header 컴포넌트를 여러 가지 제목으로 재사용할 수 있어요.

State와 Hooks: 컴포넌트가 기억력 갖기!

State(상태, 기억하는 값)는 컴포넌트가 "현재 어떤 값"인지 기억할 수 있도록 해줘요. 예를 들어, 좋아요 버튼을 몇 번 눌렀는지 기억하려면, useState(유즈스테이트, 상태 관리 훅)을 씁니다.

const [likes, setLikes] = React.useState(0);

<button onClick={() => setLikes(likes + 1)}>좋아요 {likes}</button>

버튼을 누르면 'likes' 값이 하나씩 늘어나고, 그 숫자가 바로 화면에 나타나죠.

마무리

HTML은 웹의 뼈대, JavaScript는 움직임, DOM은 실시간 화면, React와 JSX는 똑똑한 조립과 선언을 담당해요. 컴포넌트는 블록처럼 쉽게 만들고, Props로 정보를 전달, State와 Hooks로 기억을 추가할 수 있죠. 이런 흐름을 차근히 따라 하면 누구나 직접 웹앱을 만들 수 있어요! 작은 실습부터 시작해 보세요. 머릿속으로 결과를 상상하며, 직접 코드를 한 줄씩 입력하면 점점 더 쉽게 이해할 수 있습니다.

#HTML #JavaScript #React #JSX #컴포넌트

출처 및 참고 :