이번 글에서는 React 프로젝트 생성 방법에 대해 알아보겠습니다. 흔히 아시는 ‘create-react-app’ 커맨드를 쓰면 되는데 그 전후로 정확히 어떤 프로세스로 진행해야 하는지 참고하시면 좋을 듯 합니다.
React란?
먼저 React에 대해 간단히 알아야겠죠. React를 쓰면 html 파일을 1개만 쓰면서도 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워서 보여줄 수가 있습니다. 그래서 기존 프론트엔드 결과물들보다는 훨씬 부드럽게 동작하게 되는데요.
바닐라 자바스크립트로도 만들 수는 있지만 코드가 너무 길어지는 관계로 리액트라는 자바스크립트 라이브러리를 설치해서 사용하면 이걸 더 쉽게 만들 수 있습니다. 그래서 리액트라는 라이브러리를 배우고 사용하는 것입니다.
리액트 쓰는 또 다른 이유들은 html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있어서 큰 프로젝트일 수록 html 관리가 편해지기 때문입니다.
React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능합니다. React Native는 기본적으로 React와 거의 동일하며 html css 문법만 약간 달라집니다.
React Hook
Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다.
React Hook은 간단하게 설명해서 클래스 형식의 리액트 컴포넌트에서만 할 수 있었던 state관리나 라이프사이클등을 함수 형태 컴포넌트에서도 사용할 수 있게 만들어주는 기능입니다. React Hook을 쓰면 아래와 같은 장점이 있습니다.
- 코드가 간결해짐
- 가독성이 향상됨
- 많은 라이브러리들도 Hook 형태로 제공
- HOC 문제 해결 가능
- 불필요한 코드 최소화
React 설치 방법
Create React App은 React를 배우기에 편안한 환경이며 React에서 새로운 단일 페이지 애플리케이션 구축을 시작하는 가장 좋은 방법입니다.
최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정하고 멋진 개발자 환경을 제공하며 프로덕션을 위해 앱을 최적화합니다. 컴퓨터에 Node >= 14.0.0 및 npm >= 5.6이 있어야 합니다. 프로젝트를 만들려면 다음을 실행합니다.
npx create-react-app my-app cd my-app npm start
Create React App은 백엔드 로직이나 데이터베이스를 처리하지 않습니다. 프런트엔드 빌드 파이프라인을 생성하기 때문에 원하는 모든 백엔드에서 사용할 수 있습니다. 내부적으로는 Babel과 webpack을 사용하지만 이에 대해 알 필요는 없습니다.
프로덕션에 배포할 준비가 되면 npm run build를 실행하면 빌드 폴더에 앱의 최적화된 빌드가 생성됩니다. README 및 사용 설명서에서 Create React App에 대해 자세히 알아볼 수 있습니다.
Node.js, VCS 설치
만약 본인의 개발 환경이 세팅되지 않은 경우 Node.js, VCS를 미리 설치해야 합니다. Node.js는 Node.js 사이트에서 본인 컴퓨터에 맞는 최신 버전을 받으면 됩니다. 만약 윈도우즈를 쓰고 있다면 WindowsInstaller를 클릭하여 다운로드합니다.
VSC가 없는 경우 Visual Studio Code 사이트에서 마찬가지로 본인 컴퓨터에 맞는 버전을 받아서 설치합니다. 원하는 위치에 프로젝트 폴더를 생성한 후에 Visual Studio Code 상단에 “File” -> “Open Folder …”를 클릭하여 내가 생성해둔 폴더를 클릭하고 “폴더 선택”을 누르면 됩니다.
Next.js
Next.js는 React로 구축된 정적 및 서버 렌더링 애플리케이션을 위한 대중적이고 가벼운 프레임워크입니다. 여기에는 즉시 사용 가능한 스타일 지정 및 라우팅 솔루션이 포함되며 Node.js를 서버 환경으로 사용한다고 가정합니다.