1. React란?
리액트는 페이스북에서 제공해주는 frontend 라이브러리이다.
프레임워크가 아닌 라이브러리이기 때문에 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않기 때문에 가볍고 선택의 폭이 넓다. 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주변 개발자가 설계한대로 UI가 만들어져서 사용자에게 보여진다.
2. 왜 React를 사용하는가?
이것을 사용하지 않아도 웹페이지를 만들 수 있지만, 동적인 데이터를 UI에 전달하기에는 적합하지 않다.
리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 쉽게 만들 수 있기 때문에 사용한다.
리액트를 사용하는 경우는 언제가 적합할까. 정적 서버를 만드는 경우라면 html을 사용하는 것이 클라이언트에게 전달하는 것이 단순하고 로딩 속도를 개선할 수 있다. 그러므로 리액트는 '동적인 사이트'를 만들 때 필요하고 어울린다.
사이트의 규모가 커지고 동적인 요소가 많아지면 단순 jQuery나 Javascript로는 모두 관리하는 것이 불가능에 가까워진다. 유지 보수도 어렵고, 비효율적이고 버그를 야기하기 때문에 이 경우는 리액트를 사용하는 편이 좋다.
상태 관리 도구를 이용해 상태를 모아 관리하거나, Compoent가 data에 흘러가 개인화된 웹페이지를 생성하게 되는 방식으로 플로우가 이해하기 쉽고 직관적이다. 유지 보수에도 당연히 용이하다. 프로젝트가 복잡하고 동적일수록 빛을 발한다.
3. React의 특징
1_리액트는 우선 컴포넌트 기반의 라이브러리이다.
UI를 큰 덩어리로 생각한다면 컴포넌트는 그 덩어리를 이루는 아주 작은 요소들이라고 생각하면 된다. 이런 것들을 설계하여 쌓아 올리면 UI가 만들어진다. 이렇게 컴포넌트로 쪼개져 있기 때문에 코드를 파악하기가 쉽다.
2_ 컴포넌트들은 다른 화면에서도 사용할 수 있는 재사용성을 가지고 있어, 똑같은 코드를 반복적으로 입력할 필요가 없다. 훨씬 효율적이다.
3_ 컴포넌트의 종류는 클래스형(stateful)과 함수형(stateless)로 나누어진다.
4. 데이터의 흐름
리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 올려줄 수 없으므로, 부모의 데이터를 바꿔주기 위해서는 state를 이용해야 한다.
5. prop와 state
- prop: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터를 말한다. 읽기 전용 데이터라고 생각하면 된다.
자식 컴포넌트에서 전달받은 props를 변경이 불가능하고 이것을 전달해 준 최상위 부모 컴포넌트만 변경할 수 있다.
- state: 동적인 데이터를 다룰 때 사용한다. 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야할 때 사용한다. state는 클래스형 컴포넌트에서만 사용할 수 있는데 각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근은 불가능하다. 그러나 상위에 있는 state는 변경이 가능한데, 이것을 변경해주는 함수를 props로 받는다면 이것을 변경이 가능하다. (주의할 점: props로 넘겨줄 때에 this의 binding을 신경써줘야한다.)
6. 리액트의 작동 방식
리액트는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면 virtual Dom을 생성한다. 이후에 virtual Dom과 실제 Dom을 비교하고, 변화가 발생한 부분만 업데이트를 한다. virtual Dom을 사용하는 이유는 연산 비용이 적고, 연산 비용이 적어서 성능이 개선되기 때문이다.
7. Component 기반 구조?
앞서 말했듯이 리액트는 UI를 여러 컴포넌트로 쪼개서 만드는데, 한 페이지 안에서도 header와 footer 등 각 부분을 독립된 컴포넌트로 만들고 이것을 조립해서 화면을 구성하는 방식이다. 이것은 큰 장점이다.
어플리케이션이 아무리 복잡해져도 코드의 유지보수가 용이하기 때문이다.
리액트를 잠깐 보여주기 위해 간단한 코드를 보자면, 아래의 코드는 일반 html로 작성한 코드이다.
이 코드를 React로 만들면 아래와 같다.
[HTML]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<title>test</title>
</head>
<body>
<header>
header!
</header>
<div class="all">
contents
</div>
<footer>
footer!
</footer>
</body>
</html>
|
[REACT]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import React, { Component } from "react";
import Header from "./component/Header";
import Footer from "./component/Footer";
import PostList from "./component/PostList";
class App extends Component {
render() {
return(
<div>
<Header />
<PostList />
<Footer />
</div>
)
}
}
export default App;
|
이와 같이 header나 postlist 등은 컴포넌트로 만들고, 이를 조립해서 루트 컴포넌트를 만드는 방식이다.
다른 블로그의 글을 참고해서 코드를 보았는데, 확실히 이렇게 보니 딱 체계화가 되어져 있는 구조가 눈에 딱 들어오기도 하고 깔끔하게 사용할 수 있을 것 같다. 자세한 내용은 리액트를 배워야지 알 것 같다.
+) JSX 문법
JSX는 과거 페이스북이 php를 개량해 만들었던 XHP에 기원을 두고 있는 새로운 javascript의 문법이다. 리액트는 JSX로 짜여진다. js가 아니다. JSX의 특징은 기본적으로 html과 유사하지만 약간의 원칙이 더 존재한다.
[1] 두 개 이상의 element는 무조건 하나의 element로 감싸져야 한다. ex) fragment 태그
[2] class 대신 className을 사용한다.
[3] 스타일 속성은 중괄호{} 안에 객체로 표시하며, 단어 사이의 -를 없애는 대신 camel Case를 사용해 CSS의 properity를 나타낸다.
ex) <div className="container" style={{backgroundColor: "red", fontSize: 16}} />
[4] 모든 태그는 반드시 닫혀 있어야 한다. 일반 html의 경우 input 태그는 닫지 않아도 되지만 JSX에서는 반드시 닫아야 한다는 것을 주의해야 한다.
[5] JSX 안에서 js값을 사용할 때에는 중괄호를 사용한다. 중괄호 안에 변수명을 입력하거나 js 계산식 값 등을 넣을 수 있다.
ex) <div> { age } </div>
* 주석 처리는 {/**/}로 한다.
그럼 React native는 무엇일까?
리액트의 접근 방법을 모바일로 확장한 페이스북의 오픈소스 프로젝트이다.
javascript로 코딩한 React 컴포넌트는 React Native 플랫폼을 거쳐서 IOS나 Android Native로 각각 변환된다.
리액트 네이티브가 하는 일은 js를 사용하여 ios 또는 andorid의 네이티브 엔진에게 메세지를 보내는 것이다.
즉, 연결해주는 다리 역할을 한다고 볼 수 있다. js와 폰의 커뮤니케이션을 쉽게 하기 위해서 만들어진 것이다.
React native는 각각의 휴대폰 운영체제의 코어로 가는 네이티브이기는 하지만, 브릿지로 많은 데이터를 보내면 성능이 느려질수도 있다는 점을 주의해야 한다.
쉽게 말하면, 리액트의 규칙을 이용하여 모바일 어플리케이션을 개발할 수 있다는 말이다.
js로 코딩한 리액트의 컴포넌트는 React Native 플랫폼을 거쳐서 IOS와 Andriod Native 코드로 각각 변환되어 js 하나만으로 앱 제작이 가능하다.
React Native의 장점
1. 플랫폼 별 언어를 몰라도 자바스크립트만을 가지고 앱을 만들 수 있다.
2. 개발 속도가 빠르다.
3. 성능이 좋다(단, 상대적이다.)
4. 리소스가 풍부하다.
React Native의 단점
1. React Native가 제공하는 기능은 한계가 있다.
필요한데 없는 기능이라면 Native로 제작하는 경우가 생길 수 있다. 그렇게 되면 androrid나 IOS를 모두 할 줄 알아야 한다.
2. 영어가 약하면 힘들 수 있다.
한국 커뮤니티는 아직 크게 성장하지 않았다. 질의 응답이 모두 영어로 되어있다.
3. 성능 이슈
크로스 플랫폼 앱의 특징으로, 아직까지 완전히 native를 대체할 수는 없다. 로직이 복잡해지거나 뷰 스택이 높게 쌓이면 속도가 느려질 수 있다.
'ire0546 > BASIC' 카테고리의 다른 글
| GitHub Branch 만들기 (0) | 2020.03.10 |
|---|---|
| Docker Basic (0) | 2020.02.14 |
