#11 React 시작하기

 

Vanilla JavaScript로 메모장 CRUD 기능을 구현한 뒤, 이제 같은 메모장을 React로 다시 만들어보기 시작했다.

이번 React 단계의 목적은 새로운 기능을 추가하는 것이 아니다.
기존에 만든 메모장 기능을 React 방식으로 다시 구현하면서, JavaScript와 React의 차이를 이해하는 것이 목적이다.

 

JavaScript에서 했던 방식

이전 단계에서는 HTML 요소를 직접 가져오고, 직접 이벤트를 붙이고, 직접 화면을 다시 그렸다.

예를 들면 다음과 같은 코드들을 사용했다.

document.getElementById(...)
addEventListener(...)
document.createElement(...)
innerHTML
appendChild(...)
renderMemos()

즉, 직접 DOM을 조작했다.

메모 배열이 바뀌면 직접 renderMemos()를 호출해서 화면을 다시 그렸다.

memos.push(newMemo);
saveMemos();
renderMemos();

이 방식은 흐름을 이해하기에는 좋았다.
하지만 기능이 많아질수록 DOM을 직접 다루는 코드가 많아진다.

 

React에서는 무엇이 달라질까

React에서는 DOM을 직접 조작하는 방식에서 벗어난다.

JavaScript에서는 직접 요소를 만들고 화면에 붙였다.

const memoCard = document.createElement('div');
memoContainer.appendChild(memoCard);

React에서는 화면이 어떻게 생겨야 하는지를 JSX로 작성한다.

<div className="memo-card">
  <h3>{memo.title}</h3>
  <p>{memo.content}</p>
</div>

그리고 데이터는 일반 변수 대신 state로 관리한다.

JavaScript에서는 이렇게 사용했다.

let memos = [];

React에서는 나중에 다음처럼 바뀐다.

const [memos, setMemos] = useState([]);

아직 useState를 깊게 다루지는 않았다.
일단은 이렇게 이해했다.

memos
= 현재 메모 배열

setMemos
= memos 상태를 바꾸는 함수

React에서 중요한 점은 다음이다.

state가 바뀌면 React가 화면을 다시 그린다.

즉, JavaScript에서 직접 만들었던 renderMemos() 역할을 React가 어느 정도 대신해준다.

 

React 프로젝트 생성

React 프로젝트는 기존 JavaScript 파일을 지우지 않고, 별도 폴더에 만들었다.

현재 구조는 다음과 같다.

Memo Evolution/
  index.html
  style.css
  script.js
  react-memo/

React 프로젝트는 react-memo 폴더 안에 생성했다.

Vite를 사용해서 React 프로젝트를 만들었다.

npm create vite@latest react-memo -- --template react

그다음 React 프로젝트 폴더로 이동해서 필요한 패키지를 설치했다.

cd react-memo
npm install

개발 서버는 다음 명령어로 실행한다.

npm run dev

브라우저에서는 보통 다음 주소로 접속한다.

http://localhost:5173

 

Vite 개발 서버

npm run dev로 Vite 개발 서버를 실행하면 React 앱을 로컬에서 확인할 수 있다.

한 번 서버를 실행한 뒤에는 App.jsx, App.css 같은 파일을 수정할 때마다 보통 자동으로 화면이 갱신된다.

이 기능을 HMR이라고 한다.

HMR = Hot Module Replacement
파일을 저장하면 브라우저에 바로 반영되는 기능

그래서 단순히 App.jsx나 App.css를 수정할 때마다 매번 서버를 재실행할 필요는 없다.

다만 다음 경우에는 재실행이 필요할 수 있다.

npm run dev를 꺼버린 경우
새 라이브러리를 설치한 경우
package.json을 수정한 경우
vite.config.js를 수정한 경우
개발 서버가 에러로 종료된 경우

 

Vite 기본 화면 제거하기

처음 React 프로젝트를 만들면 Vite 기본 화면이 들어 있다.

App.jsx에는 React 로고, Vite 로고, 카운터 예제가 있었다.

하지만 지금 목표는 메모장을 다시 만드는 것이므로 기본 코드는 제거했다.

기존에 있던 예시 코드들은 필요 없었다.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'

const [count, setCount] = useState(0)

이번 단계에서는 아직 useState를 쓰지 않는다.
목표는 단순히 React에서 정적인 메모장 화면을 만드는 것이다.

 

React에서 정적인 메모장 화면 만들기

기존 HTML에서 만들었던 메모장 구조를 React의 JSX로 옮겼다.

react-memo/src/App.jsx는 다음과 같은 구조로 만들었다.

import './App.css'

function App() {
  return (
    <div className="app">
      <div className="memo-form">
        <h2>새 메모 작성</h2>

        <label htmlFor="memo-title">제목</label>
        <input id="memo-title" type="text" placeholder="제목을 입력하세요" />

        <label htmlFor="memo-content">내용</label>
        <textarea id="memo-content" placeholder="내용을 입력하세요"></textarea>

        <button type="button">메모 추가</button>
      </div>

      <div className="memo-list">
        <h2>메모 목록</h2>
        <p className="empty-message">아직 작성된 메모가 없습니다.</p>
      </div>
    </div>
  )
}

export default App

아직 기능은 없다.

버튼 클릭 기능 없음
입력값 관리 없음
메모 추가 없음
localStorage 없음

이번 단계는 화면 구조만 React로 옮기는 것이 목표였다.

 

HTML과 JSX의 차이

React에서는 HTML과 비슷하게 생긴 JSX를 사용한다.

하지만 완전히 같은 문법은 아니다.

가장 먼저 만난 차이는 class와 for였다.

HTML에서는 다음처럼 쓴다.

<div class="app">

React JSX에서는 className을 사용한다.

<div className="app">

또 HTML에서는 label과 input을 연결할 때 for를 쓴다.

<label for="memo-title">제목</label>

React JSX에서는 htmlFor를 사용한다.

<label htmlFor="memo-title">제목</label>

이유는 JSX가 JavaScript 문법 위에서 동작하기 때문이다.
class나 for는 JavaScript에서 이미 다른 의미로 사용되는 단어라서 React에서는 다른 이름을 쓴다.

또 하나의 차이는 input 태그다.

HTML에서는 이렇게 써도 된다.

<input id="memo-title" type="text">

하지만 JSX에서는 닫는 표시를 해주는 방식이 일반적이다.

<input id="memo-title" type="text" />

이번 단계에서 기억할 JSX 차이는 다음과 같다.

class → className
for → htmlFor
input은 self-closing으로 작성

 

CSS 옮기기

기존 JavaScript 메모장에서 사용하던 CSS를 React 프로젝트의 App.css로 옮겼다.

수정할 파일은 다음이다.

react-memo/src/App.css

Vite 기본 CSS는 메모장 프로젝트에 필요 없어서 제거하고, 기존 메모장 스타일을 적용했다.

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f4f4f4;
}

.app {
  width: 500px;
  margin: 40px auto;
  padding: 24px;
  background-color: white;
}

.memo-form {
  margin-bottom: 32px;
}

.memo-form label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
}

button {
  margin-top: 12px;
  padding: 10px 16px;
  cursor: pointer;
}

.empty-message {
  color: #777;
}

.memo-form input,
.memo-form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

이렇게 해서 React에서도 기존과 비슷한 정적 메모장 화면을 볼 수 있게 되었다.

 

이번 단계는 React 기능 구현이 아니라 React 환경에 진입하는 단계였다.

핵심은 다음과 같다.

기존 HTML/CSS 메모장 화면을 React 프로젝트 안으로 옮겼다.
React에서는 JSX로 화면을 작성한다.
class는 className으로, for는 htmlFor로 쓴다.
아직 기능은 없고 정적인 화면만 만든 상태다.

다음 단계에서는 useState를 사용해서 입력값과 메모 배열을 React 상태로 관리하겠다.