React :: React 시작하기

 

React 를 처음 시작하려면, 여러 방법이 있는데 공식 웹사이트에서도 소개하는 CRA (Create React App) 을 사용해보자.

---

React 란 무엇이고, 뭘 알고 있어야 할까?

React 는 페이스북에서 제공하는 JavaScript 기반 UI 라이브러리 이다.

프레임워크가 아니라 라이브러리라서, 그만큼 가볍고 선택지가 넓다.

 

JavaScript 기반이라 JavaScript 를 알면 배우기 쉽다. 반면에 모른다면 좀 애먹을 수 있다.

그런 경우를 위한 대책 - 공식 js 튜토리얼 완독하기 :

developer.mozilla.org/ko/docs/Web/JavaScript/A_re-introduction_to_JavaScript

(완벽한 대책이 되기는 어렵다. 다만 다른 프로그래밍 언어를 알고 있는 사람이라면, 이 정도를 보고 어느정도 커버가 가능할 수도 있겠다. 그렇지만JavaScript 는 Java 와 완전 다르기 때문에 이를 혼동하고 Java 를 아니까 쉬울 것이라는 생각은 금물!)

 

옆에 개발자 도구를 켜두고 직접 해보면서 완독하자. 1~2시간 정도 걸린다.

 

다음으로 React 를 왜 사용하는지, 또 React 를 시작하기 전에 알아두면 좋은 React 의 특징 몇 가지를 알아보자.

 

JSX

과거 페이스북이 PHP 를 개량해 만들었던 XHP 에 기원을 두고 있는 하나의 JavaScript 문법이다

(JavaScript 가 아니다! 하지만 알면 배우기 쉬운..)

이는 나중에 상세히 다루도록 하겠다. 지금은 개념만!

 

Vrtual DOM

React 는 이벤트에 의해 데이터를 관리하는 Model 에 변화가 생기면 Virtual DOM 을 생성하여 실제 DOM 과 비교한 후, 변화가 발생한 부분만 업데이트한다.

이는 상당히 효율적인데, 모든 부분을 새롭게 생성하는 것이 아니라 '변경된 부분'만 찾고 바꾸기 때문이다.

즉, 필요한 곳에만 업데이트한다.

 

Component 기반

React 는 조각을 모아서 전체를 구성하는 방식인데, 그 조각이 Component 라고 생각하면 된다.

재사용하는 코드 낭비 없이, 하나의 Component 를 만들어두고 사용할 부분에 가져와서(import) 사용하기만 하면 된다.

또한 조각으로 관리하므로 코드의 유지 보수가 용이하다.

 

참고로,

이렇게 '조각'으로 나누어서 개발하는 것을 MVC (Model-View-Controller) 패턴, MVVM (Model-View-ViewModel) 패턴이라고 한다. (소프트웨어 디자인 패턴의 일종)

이름에서 알 수 있듯 Model-View-Controller 의 '조각'들이 모여 하나의 소프트웨어를 구상하도록 만드는 방식이다.

- Model: 애플리케이션의 정보(data)

- View: UI (User-Interface) 

- Controller : 데이터와 비즈니스 로직 사이의 상호작용 관리!

 

즉, React 는 View 를 만들도록 도와주는 라이브러리가 되겠다.

그리고 그 단위가 Component 이다.

 

Props  와 State

이 둘은 React 를 다루려면 잘 알고, 잘 설계해서 구성해야 하는 두 요소이다.

어떤 자원을 누가 어디까지 접근 가능한지에 대한 것이다.(ex. 내부 컴포넌트에는 어떤 state, 외부 컴포넌트에서 어떤 Props 를 넘겨줄지 등등..)

 

이 역시 나중에 자세히 다루겠다. 지금은 외부와 내부 컴포넌트의 데이터 라는 정도만 알면 된다.

(처음부터 많은 개념을 보면 머리 아프니까..)

---

이제 드디어 진짜로 React 로 애플리케이션을 만들기를 시작해보자.

Create React App (CRA)

(공식 문서: ko.reactjs.org/docs/create-a-new-react-app.html)

 

CRA 는 React 를 배우기에 간편한 환경으로, 새로운 싱글 페이지 애플리케이션을 만들어준다.

이를 이용하기 위해서는 Node.js 와 npm 이 설치되어 있어야 한다.

(Node.js 설치하기 (https://nodejs.org/ko/download/)

 

그리고 커맨드 창(cmd)을 열고 다음 명령어들을 실행시켜 주자.

npx create-react-app my-app
cd my-app
npm start

명령어를 실행하는 디렉토리에서 my-app 이라는 폴더로 새 react app 을 만들어준다.

그리고 my-app 폴더에서 $ npm start 를 하면 react 가 시작된다.

 

이런 페이지가 뜨면 잘 된 것이다.

 

http://localhost:3000/

🎉React 로 App 을 하나 만들었다!

이제 이걸 가지고 이것저것 해보면서 React 를 배워가자.

 

---

Ref.

React 공식 문서 ko.reactjs.org/docs/create-a-new-react-app.html

.