[실무] 01. React 입문 - 설치 및 실행

React JS 실무

React 입문 (1) — 왜 React이고, 어떻게 시작하면 좋을까요? (설치/실행)

리액트를 처음 시작할 때 가장 헷갈리는 ‘환경 구성’과 ‘프로젝트 구조’를 짧게 정리해 드립니다.

범위 입문 핵심 설치·실행 실습 바로 따라하기

React 입문: 설치부터 첫 실행까지(개념도)

이 포스트에서 정리하는 것

• React가 무엇을 해결하려고 등장했는지(큰 그림)
• create-react-app으로 프로젝트를 만들고 실행하는 최소 절차
• 처음에 꼭 알아두면 좋은 폴더/파일 구조

1) React는 “UI를 컴포넌트로 쪼개는 방식”입니다

React는 화면을 작은 조각(컴포넌트)으로 나누어 조립하는 방식입니다. 덕분에 화면이 커져도 “같은 패턴을 반복”할 수 있고, 유지보수가 쉬워집니다.

한 문장 요약
React는 “상태(state)가 바뀌면 화면이 알아서 다시 그려지는(선언형) UI 프레임워크”입니다.

2) 설치/실행(가장 단순한 루틴)

Node.js가 설치되어 있다고 가정하고, 아래 순서로 시작하시면 됩니다.

npx create-react-app my-app
cd my-app
npm start

• 잘 되는지 확인: 브라우저가 열리고, 수정 저장 시 자동으로 반영되면 정상입니다.
• 자주 생기는 문제: 권한(폴더 위치), Node/npm 버전, 이미 점유된 포트(3000) 등이 원인인 경우가 많습니다.

3) 폴더 구조는 이렇게만 기억하셔도 충분합니다

경로	의미
src/	실제로 개발하는 대부분의 코드가 들어갑니다.
src/index.js	앱의 시작점(ReactDOM 렌더링). 보통 <App />을 붙입니다.
src/App.js	화면의 루트 컴포넌트(레이아웃/라우팅의 출발점).
public/	정적 파일(아이콘 등). 빌드 시 그대로 포함됩니다.

실무 팁
초반에는 src/components 폴더만 깔끔히 유지해도 생산성이 크게 올라갑니다.

빠른 체크(30초)

1. React를 “컴포넌트” 관점에서 설명할 수 있으신가요?
2. src/index.js와 src/App.js의 역할 차이를 알고 계신가요?
3. 실행이 안 될 때, 포트/권한/버전 중 무엇부터 확인하시나요?

참고 링크

• React 공식 문서(시작하기)
• Create React App 문서(참고)
• Node.js 다운로드
• DoLearn 커리큘럼(강의 목록)