[React]React 시작하기

React 란?

유저 인터페이스를 만드는 데 사용되는 오픈 소스 자바스크립트 라이브러리이며, 페이스북에서 개발하였다. 프론트엔드 개발자 사이에서 많은 인기를 얻고있다. > React 공식 문서

React 의 특징

• Component 단위 작성

  Component는 UI를 구성하는 개별적인 뷰 단위로서, UI 개발을 레고라고 한다면, 컴포넌트는 레고의 블록역할이다. 필요한 컴포넌트 블록을 생성하고 조힙해가며 완성된 UI를 만들어가는 과정이 컴포넌트의 역할이라 보면된다. 이러한 컴포넌트는 생산성을 높이고 유지 보수를 용이하게 한다.

• JSX

  JSX(Javascript + XML)는 자바스크립트에 대한 확장 구문으로써, 리액트에서 element(요소)를 제공해준다. 자세한 내용은 React 공식 문서(JSX 소개) 를 참조하자.

• Virtual DOM

  유저 인터랙션에 의해 상태 변화가 일어나면 브라우저 작동 완리에 의해 랜더링 과정을 반복하게 된다. Virtual DOM은 이러한 과정에 의해 발생하는 비효율을 최소화하기 위해 탄생했다.

  Virtual DOM은 유저 인터랙션에 의해 View에 발생한 변화에 대하여 어떤 게 바뀌었는지, 어떤 게 바뀌지 않았는지 자동으로 파악하여 필요한 DOM 트리만 업데이트할 수 있게 해준다.

React 프로젝트 만들기

• NVM으로 노드 버전을 관리

  • NVM(Node Version Manager)을 왜 써야할까?

    nvm은 컴퓨터에 node를 설치하는 툴이며 Node.js의 버전 관리자이다.

  • nvm 설치 확인하기

    nvm --version

  • nvm으로 Node.js 설치하기

    노드 공식 사이트에서 안정적인 버전(LTS)을 확인해보고 LTS 버전을 설치한다.

    아래 명령어를 입력해서 node.js를 설치

    nvm install [설치할 버전]

    설치가 끝났다면 터미널에 아래 명령어를 입력해서 잘 설치 되었는 지 확인할 수 있다.

    nvm ls # nvm으로 설치한 노드 버전 리스트 확인 명령어
    node -v # 노드 버전 확인 명렁어

    아래 명령어를 입력해 사용할 노드 버전을 바꿀 수 있다.

    nvm use [사용할 노드 버전]

• npm으로 yarn을 설치해보자

  • NPM(Node Package Manager)은 무수히 많은 third-party 패키지를 활용할 수 있게 해준다. (비슷한 친구로는 yarn이 있다.)

    NPM과 yarn은 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"입니다. (누군가 만들어놓은 패키지를 가져다 쓸 수 있도록 도와줌)

    npm은 노드를 설치하면 함께 설치되서 따로 설치하지 않아도 된다.

  • npm으로 yarn을 설치하기

    아래 명령어를 입력해서 yarn을 설치해보자.

    # npm으로 패키지를 설치할 때는 아래 명령어를 사용
    # 옵션은 필요한 경우에만 적어준다.
    # npm install [옵션] [설치할 패키지 이름]
    
    npm install -g yarn 
    
    # 이 명령어는 "npm으로 yarn을 컴퓨터 전체에 설치한다"는 뜻
    # -g 옵션은 컴퓨터 전체에서 쓸 수 있게 한다는 뜻

    잘 설치되었다면 아래처럼 yarn -v 명령어로 yarn의 버전을 확인
    

  • yarn으로 패키지를 설치할 때는?

    yarn으로 패키지를 설치할 때는 아래 명령어를 사용하며 명령어가 조금 더 직관적이다.

    yarn add [옵션] [설치할 패키지 이름]

• CRA(create-react-app)으로 시작하는 리액트

  • yarn으로 CRA를 설치

    # 옵션 global은 전역에 이 패키지를 깔겠다는 뜻
    yarn add global create-react-app

  • CRA?

    CRA(Create React App)는 웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지이다.

  • 리액트 프로젝트 만들기

    yarn create react-app [프로젝트 이름]

  • 아래 명령어를 입력해서리액트 앱을 실행

    cd [프로젝트 이름] # 프로젝트 폴더로 이동
    yarn start

• 리액트 생성 시
  폴더는 소문자로 시작하는 카멜케이스를 사용 !
  JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용 !