응 그렇다.
실제로 최근 리액트 공부를 시작하는데, 초기 단계부터 Node.js를 설치하고 시작한다.
*참고로 개발 툴은 VS code 사용
근데 막상 실제로 Node.js 파일을 만져본적이 없다. (아직 초보)
그래서 전자 선생님한테 물어봤다.
물어봤는데 얘가 내가 블로그 하는 거 어떻게 알았는지 자기가 알아서 블로그용 텍스트 만들어주겠대..
너진짜 웃기고 무서운 아이다..
💡 React와 Node.js의 관계 — 왜 리액트에는 Node.js가 필요할까?
리액트를 처음 공부할 때 이런 경험, 한 번쯤 해보셨을 거예요.
“리액트를 배우려는데, Node.js를 먼저 설치하라고요?
리액트는 프론트엔드 라이브러리라며… 왜 서버 프로그램을 깔아야 하죠?”
저도 리액트를 처음 접했을 때 똑같이 헷갈렸습니다.
그래서 오늘은 React와 Node.js가 어떤 관계인지,
그리고 왜 Node.js 없이는 리액트를 제대로 개발할 수 없는지 정리해보겠습니다.
🧩 1. React와 Node.js는 각각 어떤 역할일까?
먼저 두 기술의 정체부터 확실히 구분해볼게요.
| React | 사용자 인터페이스(UI)를 만드는 자바스크립트 라이브러리 | 브라우저 (프론트엔드) |
| Node.js | 자바스크립트를 브라우저 밖, 컴퓨터 환경에서도 실행할 수 있게 해주는 도구 | 서버 or 개발 환경 (백엔드) |
React는 브라우저 안에서 동작합니다.
Node.js는 브라우저 밖, 개발자 컴퓨터나 서버에서 동작합니다.
즉, 이 둘은 “같은 자바스크립트를 쓰지만, 쓰이는 장소와 목적이 다릅니다.”
⚙️ 2. 그런데 왜 React를 하려면 Node.js를 설치할까?
이제 핵심 질문이죠.
리액트는 브라우저에서 실행되는 코드인데, 왜 Node.js가 필요할까?
그 이유는 바로 리액트를 개발하고 실행하기 위한 “개발 환경”을 Node.js가 만들어주기 때문이에요.
리액트 프로젝트를 만들 때 보통 이런 명령어를 쓰죠 👇
이 명령어가 작동하려면 Node.js와 npm이 반드시 설치되어 있어야 합니다.
💡 npm은 Node.js에 포함된 패키지 관리자예요.
리액트 프로젝트에 필요한 수많은 외부 라이브러리(react, react-dom, webpack 등)를 npm이 대신 설치해줍니다.
즉,
Node.js가 없으면 npm도 없고,
npm이 없으면 리액트 프로젝트를 생성하거나 실행할 수도 없습니다.
🧠 3. Node.js가 하는 일 3가지
① 개발 서버 실행
리액트를 실행할 때 자주 쓰는 명령어:
이 명령어가 로컬 주소(http://localhost:3000)에서 개발 서버를 열어줍니다.
이 서버는 Node.js 위에서 돌아가는 프로그램이에요.
→ Node.js가 리액트 코드를 브라우저로 전달하는 역할을 하는 거죠.
② 코드 빌드와 번들링
프로젝트 완성 후 배포할 때 이렇게 하죠 👇
이 과정에서도 Node.js가 리액트 코드를 최적화하고 압축해서
브라우저가 빠르게 읽을 수 있는 형태로 만들어줍니다.
③ 패키지 관리
리액트 프로젝트에는 여러 라이브러리가 포함돼요.
예: axios, react-router-dom, redux 등
이런 라이브러리를 설치하거나 업데이트할 때도 npm(=Node.js)이 필요합니다.
🧭 4. 정리하자면
| React | UI를 만들고 브라우저에 표시하는 라이브러리 |
| Node.js | 리액트 개발 환경을 구동하고, 패키지를 관리하고, 코드를 빌드하는 도구 |
| npm / npx | Node.js에서 제공하는 패키지 관리 툴 |
| VS Code | 코드를 편하게 작성하는 편집기 (개발 환경용 툴) |
리액트는 Node.js 위에서 실행되는 건 아니지만,
Node.js가 있어야 리액트를 개발·테스트·배포할 수 있습니다.
✨ 마무리하며
React는 프론트엔드 기술, Node.js는 백엔드 또는 개발 환경 기술이지만,
현대 웹 개발에서는 이 두 가지가 짝궁처럼 함께 움직입니다.
- 리액트는 “사용자 화면(UI)”을 담당하고
- Node.js는 “그 화면을 만들고 관리하는 도구 역할”을 합니다.
그래서 리액트를 배우려면 Node.js를 꼭 같이 설치해야 하는 거죠.
한마디로 정리하면:
💬 “리액트는 브라우저에서 실행되지만,
그 리액트를 만들어주는 건 Node.js다!”
댓글