React 시작하기 (Intellij설치)

떡ol·2023년 8월 21일

React란

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 자바스크립트를 기반으로 움직이는 라이브러리이며 node.js에서 작동하기 때문에 node.js와 npm을 필요로 합니다.

node.js: 자바스크립트를 내장되어있는 브라우저 기반으로만 동작 시키기에는 아쉬운 언어(?)라고 생각한 개발자들이 독립된 어플리케이션 기반으로 돌아가게 만든 플랫폼입니다. 서버로 많이 사용됩니다.
npm : node.js를 독립 어플리케이션으로 만들어놓고 보니 수많은 라이브러리들이 생기겠죠?
그런 사용자 라이브러리를 꺼내서쓸수 있게 만들어놓은 하나에 라이브러리 커뮤니티입니다. 마치 gradle, maven 같네요.

React는 node.js로 만들어진 하나의 라이브러리라고 생각하면 될거같습니다. npm에 create-react-app으로 라이브러리가 등록되어있으니 가져다 쓰면 되는것 같구요...

React 특징

주요 특징으로는 5가지로 나눠져있습니다.

1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.
Augular.js와는 달리 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다.

2. Component 기반 구조

React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만듭니다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다. html을 만들다 보면 header, container, footer등으로 나뉘고 따로 관리할 수 있게 파일도 여러개를 만들어두죠? 이런 코드파일들을 더 동기적으로 쪼개서 관리가 가능하다는 이야기입니다.

3. Virtual DOM

먼저, DOM은 Document Object Model의 약자입니다.
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 합니다.

4. Props and State

Props
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.
쉽게 읽기 전용 데이터라고 생각하면 될 것 같습니다! 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.
State
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.

5. JSX

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

Intellij에서 시작하기

음, 일단 알아본바로는 Comunity버전에서는 불가능할 거 같습니다. 어떻게든 해볼려고했는데 안된다고하네요... 유료버전이 필요합니다. ~~그래서 VS쓰나봅니다.~~

우선 node.js 사이트에서 LTS버전을 다운로드 받습니다. ( https://nodejs.org/ko/download )

그리고 Intellij에서 React로 파일을 만들어주시면 됩니다. 설치 중에 경로문제나 버전문제가 발생할 수 있습니다. node.js 나 npm의 설치 상태를 확인해보세요. 또는 터미널창에서 npm install -g 해서 재설치 해보세요.

//설치되어있는지 확인하기
node -v
npm -v

프로젝트가 완성이 되면 package.json이라는 파일이 생성됩니다.
이게 node.js를 실행하는 핵심 파일입니다.
파일에 scripts안에 있는 것들이 명령을 실행하게 합니다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },