React 란? + React 프로젝트 생성하기

728x90

React란 무엇인가?

리액트는 페이스북에서 만든 JavaScript 라이브러리 입니다.

프론트엔드 3대장이라고 불리는 React, Vue, Angular 중에서도 단연 1대장이 아닌가 싶습니다.

그만큼 생태계도 넓고 Facebook이 만들었기 때문에 커뮤니티도 굉장히 활성화 되어 있습니다.

제가 자주 사용하는 Nuxt.js는 Vue.js 기반이며, Vue나 React나 모두 Virtual DOM을 사용합니다.

Nuxt로 프로젝트를 진행할 때 가장 아쉬웠던 부분이 커뮤니티 부분인데요.

한글자료도 부족하고 stackoverflow 형님들이 작성한 글들을 해석하며 공부했던게 많이 까다로웠습니다.

(~~그래서 React의 Next로 진행했어야 했나 후회를 조금 했습니다.~~)

그에 비해 React의 경우 방대한 생태계를 가지고 있어 자료 찾기가 좀 더 수월했습니다.

잠시 살짝 비교를 해보려고 Github Star 갯수와 npm install 다운로드 수를 확인해봤습니다.

참고로 기준 날짜는 2021-05-13입니다.

React의 Github Star는 168,278입니다.

Vue.js의 Github Star는 183,233입니다.

?? 제 예상과는 조금 다른 결과여서 조금 놀랐습니다.ㅋㅋ

Vue가 Github Star는 조금 많더군요.

이번엔 React의 npm 다운로드 수 입니다.

Vue의 npm 다운로드 수 입니다.

이건 차이가 좀 많이 나긴 하네요.

뭐 재미로 찾아본거라 이정도 까지만 적겠습니다.

출처 : https://commons.wikimedia.org/wiki/File:React-icon.svg

위키백과에서는 React를 아래와 같이 정의하고 있습니다.

컴퓨팅에서 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

네 그렇습니다. React는 라이브러리입니다. 재사용 가능한 UI를 생성하는 것을 도와주며, SPA나 RN으로 모바일 앱으로도 만들 수 있습니다.

React의 특징

JSX

React는 Vue처럼 template을 사용하지 않습니다.

React 공식페이지에서는 아래와 같이 설명하고 있습니다.

JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.

React에서 JSX 사용이 필수는 아닙니다. 그러나 권장을 하고 있으니 그에 따라야 하지 않을까 싶습니다.

JSX란 무엇인가를 보여드리기 위해 프로젝트를 생성하면 초기에 기본으로 제공되는 App.js의 내용을 가져왔습니다.

맛보기랄까요..

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

컴포넌트 기반

React는 화면에 보이는 View를 여러개의 Component를 조합해서 만듭니다.

한 페이지를 여러개의 Component로 만들기 때문에 관리하기에 편리합니다.

이 Component들은 각 각 분리되어 있기 때문에 재사용성이 높으며, 애플리케이션이 복잡해진다 하더라도 유지보수에 상당한 강점을 보입니다.

class App extends Component {
  render() {
    return (
      <Layout>
        <Header />
        <Contents>
        </Contents>
        <Footer />
      </Layout>
    );
  }
}

위 와 같이 Component들을 분리하여 사용이 가능합니다.

넓은 생태계

위에도 언급했듯이 저는 이 넓은 생태계가 너무 큰 장점이라고 생각합니다. 개발을 하다보면 저같은 주니어 개발자는 오류가 나지 않을수가 없는데 커뮤니티도 방대하고 자료도 많으면 많은 선배 개발자들의 노하우를 얻을 수 있기 때문입니다. 그럼 당연히 개발 소요 시간도 줄어들겠죠?

큰 규모의 애플리케이션일수록 React

적은 규모의 애플리케이션의 경우 저는 Vue도 상당히 좋다고 생각합니다.

template 기반이라 러닝커브도 낮고 생산성도 좋습니다. 다만 큰 규모로 갈수록 template 기반이 가독성도 떨어지며 유지보수도 더 힘들어 집니다.

React는 JavaScrip 기반의 Component를 사용하기 때문에 규모가 커질수록 유지보수도 더 수월하며, 재사용성도 더 커지고, 구성하기도 쉽다고 합니다. (제가 깊이 해본게 아니라 아직까지는 체감으로 느끼지는 못했습니다.)

React 프로젝트 생성하기

일단 Node.js가 필요합니다.

저는 이미 설치되어 있으니 pass, 아직 설치가 안되어 있으시면 이 곳에서 설치하시면 됩니다.

npx

npx는 npm 5.2.0버전 이상이라면 이미 설치되어 있습니다. npm을 좀 더 편하게 사용하기 위해 탄생했다고 생각하시면 됩니다. (자세한 설명은 다음에 작성하겠습니다!)

위 명령어를 통해 npx가 설치된 경로를 확인할 수 있습니다.

$ npx create-react-app {app 이름}

위 명령어로 실행하게 되면 설치가 시작됩니다.

위 메시지가 찍히면 완료된 겁니다.

설치한 루트에 가서 IntelliJ로 열어보면 아래와 같은 프로젝트 구조를 볼 수 있습니다.

이제 터미널에서 npm start로 실행 후 localhost:3000으로 접속해보면 정상적으로 설치된 것을 확인할 수 있습니다.

리액트에 대한 간단한 특징들과 프로젝트 생성하는 법을 작성했습니다.

이 후에는 React로 간단한 앱을 만들어 보는게 좋을 것 같아 관련 글로 작성하도록 하겠습니다!

Dev Day