React 첫걸음: Hello, React!

이제 개발 환경이 준비되었다면, 본격적으로 나만의 첫 React 애플리케이션을 만들어 봅시다. React의 진가는 실제로 코드를 치며 작은 동작을 경험할 때 비로소 체감할 수 있습니다.

프로젝트 구조와 핵심 파일 이해하기

create-react-app으로 생성한 프로젝트 폴더를 열어보면 다양한 디렉터리와 파일이 보입니다. 이 중에서 가장 중요한 것은 src 폴더입니다. 여기에 우리가 작성할 컴포넌트, 스타일, 로직이 담기게 됩니다. src/App.js 파일을 열면 기본적으로 React의 함수형 컴포넌트 양식을 확인할 수 있습니다.

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

이 구조는 이후 배우게 될 다양한 컴포넌트 개발의 출발점이 됩니다.

변경과 저장, 그리고 실시간 반영

브라우저에서 개발 서버(npm start)를 실행한 상태로 App.js 파일의 <h1>Hello, React!</h1> 부분을 다른 문구로 바꾼 뒤 저장해 보세요. 예를 들어, "나의 첫 리액트 앱"이라고 입력하면 브라우저 화면에도 즉시 바뀐 내용이 나타나는 것을 볼 수 있습니다. 이런 실시간 반영이 React 개발의 큰 매력 중 하나입니다.

JSX: JavaScript와 HTML의 만남

React에서는 JSX라는 특별한 문법을 사용합니다. 자바스크립트 코드 안에 HTML과 매우 유사한 형태를 자유롭게 삽입할 수 있게 해주죠. 위 코드에서 보았듯이 return 구문 안에 div, h1 등 HTML 요소를 쓰는 것이 가능합니다. 단, class 속성 대신 className을 쓴다거나, 모든 태그를 닫아야 한다는 규칙이 있습니다.

새로운 컴포넌트 만들기

React의 가장 큰 특징 중 하나는 화면 요소를 "컴포넌트" 단위로 쪼개 관리한다는 점입니다. src 폴더에 MyFirstComponent.js를 생성하고 다음과 같이 코드를 작성해봅시다.

function MyFirstComponent() {
  return <p>이것이 나의 첫 컴포넌트입니다!</p>;
}

export default MyFirstComponent;

그리고 App.js에서 아래처럼 불러와 표시할 수 있습니다.

import MyFirstComponent from './MyFirstComponent';

function App() {
  return (
    <div className="App">
      <h1>나의 첫 리액트 앱</h1>
      <MyFirstComponent />
    </div>
  );
}

저장 후 화면을 확인하면 새로운 메시지가 정상적으로 등장함을 알 수 있습니다.

앞으로의 길잡이

여기까지 따라왔다면, 이미 React 세계의 문을 활짝 연 셈입니다. 단순한 Hello World를 넘어, 컴포넌트 구조와 JSX의 원리를 느껴봤죠. 이제는 이 구조를 바탕으로 데이터를 주고받고, 동적으로 화면을 바꾸는 방법, 다양한 입력을 받는 UI를 다루는 법 등 점차 난이도를 높여갈 예정입니다.

기초를 반복해서 다져가다 보면, 어느새 직접 아이디어를 구현하는 실전 React 개발자로 성장해 있을 것입니다.