시작하며: "뭐부터 해야 하죠?" 막막한 여러분을 위해
"React를 시작하고 싶은데, 뭐부터 해야 할지 막막하신가요?"
웹 개발의 세계에 발을 들이면 가장 먼저 듣게 되는 이름 중 하나가 바로 React입니다. 하지만 시작하려면 복잡한 환경 설정과 따라하기 어려운 튜토리얼 때문에 좌절하기 쉽습니다. Hello World 도 보기 전에 지쳐 포기하게 되곤 합니다.
그런데 npm create vite@latest 명령어 하나로 10초 만에 복잡한 React 환경을 구축할 수 있다면 어떨까요?
이 글에서는 바로 그 명령어, npm create vite@latest를 사용해 프로젝트를 만드는 첫 단계부터, React의 '컴포넌트'와 '상태(State)'를 배워 실제 작동하는 결과물을 만드는 과정을 안내합니다. 지금 바로 React 개발의 첫걸음을 함께 떼어봅시다!
React 프로젝트 10초 완성: npm create vite@latest 명령어 알아보기
앞에서 말한 것처럼 React를 시작할 때 가장 큰 장벽은 '개발 환경 설정'입니다. 하지만 이제는 npm create vite@latest 명령어 한 줄이면 모든 것이 해결됩니다. 이 명령어를 차근차근 파헤쳐 보고 실제로 npm create vite@latest 을 사용해 React화면을 띄워보겠습니다.
1.명령어 뜯어보기: npm create vite@latest
이 명령어는 크게 세 부분으로 나눌 수 있습니다.
npm: 'Node Package Manager'의 약자로, JavaScript 개발에 필요한 수많은 도구(패키지)들을 설치하고 관리해주는 관리자입니다. Node.js가 설치되어 있다면npm은 이미 준비되어 있습니다.create:npm에게 "새로운 프로젝트를 만들어 줘!"라고 알리는 명령어입니다.vite@latest: 이 부분이 바로 핵심입니다. "Vite라는 도구의 가장 최신 버전을 사용해서 프로젝트를 만들어 줘!"라는 의미입니다. Vite가 우리가 필요한 모든 설정을 알아서 처리해주기 때문에, 우리는 React 코드 작성에만 집중할 수 있습니다.
한마디로
npm create vite@latest는 npm에게 Vite 도구의 최신 버전을 사용해 새로운 개발 프로젝트를 만들라고 지시하는 명령어입니다.
2.실제로 npm create vite@latest 사용해보기
이제 터미널을 열고 직접 명령어를 실행해 봅시다.
1.프로젝트를 생성할 폴더로 이동: 터미널에서 cd 명령어를 사용해 프로젝트를 저장하고 싶은 위치로 이동합니다.
2..명령어 실행: 해당 위치에서 npm create vite@latest 원하는 파일명 을 입력하고 엔터를 누릅니다.
명령어를 실행하면, Vite는 대화형으로 우리에게 몇 가지 질문을 던지며 프로젝트 설정을 도와줍니다.
질문 1:Select a framework:
"어떤 프레임워크를 사용하실 건가요?" 라는 질문입니다. 키보드 방향키를 움직여 React를 선택하고 엔터를 누릅니다.
질문 2: Select a variant:
"어떤 종류의 React 프로젝트를 원하세요?" 라는 질문입니다. TypeScript를 선택하고 엔터를 누릅니다.
질문 3:use rolldown-vite(Experimental)?
”실험적인 기능인 'rolldown-vite'를 사용하시겠습니까?" 라는 질문입니다. 이는 나중에 프로젝트를 더 빠르게 빌드하기 위한 새로운 기능이지만, 아직 실험 단계이므로 No를 선택하는 것을 추천합니다.
질문 4:Install with npm and start now?
"지금 바로 필요한 도구들을 설치하고 개발 서버를 시작할까요?" 라는 아주 친절한 질문입니다. Yes를 선택하면, 원래는 수동으로 입력해야 할 npm install(설치)과 npm run dev(실행) 명령어를 한 번에 처리해줍니다.
모든 질문에 답하고 나면, 잠시 후 여러분의 웹 브라우저에 React 로고가 빙글빙글 돌아가는 화면이 나타날 겁니다! 🥳
서버 끄고 다시 켜기
- 서버 끄기: 터미널 창에서
Ctrl + C를 누르면 개발 서버가 종료됩니다.- 서버 다시 켜기: 프로젝트 폴더 안에서
npm run dev명령어를 입력하면 언제든지 서버를 다시 켤 수 있습니다.
React의 핵심: 레고 블록 같은 '컴포넌트' 이해하기
React의 모든 것은 '컴포넌트'라는 개념에서 시작합니다. React로 웹사이트를 만드는 것은 레고 블록으로 멋진 레고 작품을 조립하는 것과 같습니다. 여기서 레고 블록 하나하나가 바로 컴포넌트입니다.
프로젝트 src 폴더를 보면 App.tsx 파일이 보일 겁니다. .tsx 확장자는 이 파일이 TypeScript와 JSX를 함께 사용하는 파일임을 의미합니다. 이 App.tsx가 바로 우리 프로젝트의 가장 큰 레고 블록입니다. 지금은 조금 복잡하니, 우리가 직접 다룰 수 있도록 깨끗하게 비우고 새로 시작해 봅시다.
App.tsx 파일 안의 모든 코드를 지우고, 아래의 코드를 직접 입력해보세요.
코드를 저장하는 순간, 브라우저 화면이 우리가 방금 작성한 내용으로 실시간 변경되는 것을 확인하셨나요?
이렇게 간단한 리엑트 화면을 만들 수 있습니다.
컴포넌트에 생명 불어넣기: useState 사용
지금 만든 버튼은 아무리 클릭해도 아무 일도 일어나지 않습니다. 컴포넌트가 무언가를 기억하게 만들어야 합니다. 이 기억 저장소가 바로 상태(State)이며, 상태를 만드는 것이 바로 useState입니다.
1. useState 불러오기
App.tsx 파일 맨 위에 다음 코드를 추가해 useState라는 훅을 불러옵니다.
2. '숫자'를 기억할 상태 만들기
이제 App 함수 안에서 useState 주문을 외워 숫자를 기억할 공간을 만듭니다.
useState<number>(0)에서 <number>는 type(타입)으로 TypeScript에게 "count라는 상태는 앞으로 숫자(number) 타입만 가질 거야!"라고 명확하게 알려주는 역할을 합니다.
3. 화면에 현재 숫자 보여주기 및 버튼 기능 추가하기
이제 컴포넌트가 기억하고 있는 count 값을 화면에 보여주고, 버튼을 누를 때마다 setCount 함수를 호출해 count 값을 1씩 증가시켜 보겠습니다. 아래와 같이 수정해주세요.
React화면에서 버튼을 클릭해보세요. 숫자가 1, 2, 3... 순서대로 올라갑니다! 축하합니다. 여러분은 방금 useState를 이용해 '상태가 변하면 화면도 알아서 바뀐다'는 React의 가장 핵심적인 원리를 경험하셨습니다.
마무리:이제 React 첫걸음을 완벽하게 떼셨습니다
축하합니다! 여러분은 Vite로 환경 설정이라는 가장 큰 벽을 빠르게 넘었고, TypeScript 환경에서 컴포넌트라는 블록을 직접 만져봤으니, useState로 생명까지 불어넣었습니다.
지금 가장 중요한 것은 복잡한 이론이 아닙니다. '내가 만든 버튼을 누르니 화면의 숫자가 바뀐다!'는 신기하고 즐거운 감각, 바로 그 하나입니다. 앞으로 수많은 에러와 마주하겠지만..😂,오늘 느낀 이 작은 성취감은 그 어떤 어려움도 이겨낼 수 있는 가장 큰 힘이 되어 줄 겁니다!
이제 여러분은 무엇이든 만들 수 있는 진짜 React 개발자의 의미 있는 첫걸음을 떼셨습니다.오늘 배운 내용을 바탕으로, 만들고 싶으셨던 첫 리액트 프로젝트에 도전해보는 건 어떨까요?
