[React 기본] React 소개 및 개발 환경 세팅

• 이 글은 오픈튜토리얼스 생활코딩 리액트 입문수업(2022년 개정판)을 수강하고 복습 목적으로 정리하기 위해 작성된 글입니다.
• 강의 영상이 담긴 유튜브 재생목록은 아래 링크에서 확인 가능합니다.

 

React 2022 개정판

 

React

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

  즉, 리액트는 사용자가 정의한 태그를 재사용 및 공유가 가능하게하여 보다 효율적으로 UI를 생성하도록 돕는 라이브러리이다. 리액트에서 컴포넌트 생성은 클래스를 이용한 방식과 함수를 이용한 방식 이 두가지가 있는데, 최근엔 함수를 사용한 방식이 선호되고 있다.

 

개발 환경 세팅

  리액트 개발환경은 다양한 방법으로 세팅할 수 있다. 나는 지금 듣고 있는 오픈 튜토리얼스의 생활코딩 리액트 강의와 동일하게 터미널에 npx create-react-app my-app 명령어를 사용해 설치하려한다. (리액트 앱 생성을 위한 다양한 방법을 확인하고 싶다면 아래 링크로 들어가시면 됩니다.)

 

새로운 React 앱 만들기 – React

  react docs에서 소개된 다양한 방법 중 Next.js와 관련된 방법도 있는데 이는 추후에 Next.js를 공부한뒤 알아보자.

 

 

  npx 명령어 사용을 위해선 node.js가 필요하고 node.js가 이미 설치되어 있다면 바로 터미널에 명령어를 입력해 설치를 진행하면 된다. 이때 터미널에서 디렉토리를 설정한 뒤 my-app에 현재 위치를 나타내는 .을 입력하거나 아니면 직접 path를 입력하면 된다. 설치가 끝나면 아래와 같이 몇가지 명령어에 대한 소개가 출력된다.

 

npx create-react-app . 실행결과

 

 

  npm start 명령어를 실행하면 특정 포트에 리액트 개발환경이 실행된다. 포트번호 3000에서 기본적으로 리액트 개발을 위한 서버가 생성되며 브라우저에 아래와 같은 화면이 출력되는 것과 개발환경이 설치된 경로에 아래와 같이 파일들이 생성된 것을 확인 가능하다. 다음 글에서는 이러한 파일들을 수정하는 법에 대해 정리해야겠다.

 

리액트 개발환경 설치 결과