리엑트 교과서를 정리한 내용입니다.
1.1 React란 무엇인가?
- 페이스북에서 만든 자바스크립트 기반의 UI 컴포넌트 라이브러리.
1.2 React가 해결할 수 있는 문제
- DOM을 매번 새로 생성하기 위해 UI를 함수로 만들었다.
1.3 React의 장점
- 단순한 앱 개발
- 빠른 UI
- 코드량 감소
1.3.1 간결성
- 선언형 스타일 채택
- 순수한 자바스크립트를 이용한 컴포넌트 기반 아키텍쳐
- 강력한 추상화
선언형 스타일 채택
선언형 스타일의 장점은 간단하고 가독성이 좋다. 결과값에 더 집중했다.
뷰에 변경이 발생하는경우 react가 알아서 갱신.
- 명령형 코드 예시
1
2
3
4
5
6var arr =[1,2,3,4,5],
arr2 = []
for (var i=0; i<arr.length; i++){
arr2[i] = arr[i]*2
}
console.log('a',arr2)
결과창1
a [2,4,6,8,10]
- 선언형 코드 예시
1
2
3var arr = [1,2,3,4,5]
arr2 = arr.map(function(v,i){ return v*2 })
console.log('b', arr2)
결과창1
b [2,4,6,8,10]
자바스크립트를 이용한 컴포넌트 기반 아키텍처
코드 재사용이 쉬워 코드를 줄일 수 있다.
- 코드 예시
1
2if (user.session) return React.createElement('a',{hret: '/logout'}, 'Logout')
else return React.createElement('a', {href:'/login'}, 'Login')
강력한 추상화
내부 인터페이스를 숨기고 정규화 과정을 거친 합성 메서드와 속성을 제공한다.
1.3.2 속도와 테스트 용이성
가상 DOM은 자바스크립트 메모리에만 존자한다. 데이터 변경시 가상 DOM을 머저 비교하고 랜더링이 필요한 경우애만 실제 DDM에 랜더링 한다.
필요한 부분반 갱신함.
1.3.3 React의 폭넓은 개발 커뮤니티와 생태계
- React 컴포넌트 목록: 1
[2](http://devarchy.com/react-components)
등등..
1.4 React의 단점
- AngularJS나 Ember같은 기능을 사용하려면 라이브러리를 함꼐 사용해야함
- 다른 프레임워크만큼 성숙하지 않음.-> 핵심 API가 조금씩 바뀜
- 관련 자료가 부족
- 단방향 데이터 바인딩만 제공
- 리액티브 프로그래밍은 아니다.
1.5 웹 애플리케이션에 React적용하기
- UI 라이브러리로 React와 관련된 Reduz나 React Router를 활용한 단일 페이지 애플리케이션 스택의 구성
- MVC의 V를 대체하는 UI라이브러리로 기존 IVX프레임워크와 결합
- jQuery 를 기반으로 서버 측 렌더링을 거친 애플리케이션에서 자동완성 등 일부 기능을 위한 UI컴포넌트로 활용
- 대부분의 로직을 직접처리하는 백엔드에서 서버측 렌더링 탬플릿 라이브러리로 활용
- 백엔드와 프론트엔드서 모두 자바스크립트를 사용하는 경우
- React Native를 UI 라이브러리로 사용한 모바일 앱
- 여러가지 렌더링 대상에 적용할 목적으로 사용하는 UI라이브러리
1.5.1 React 라이브러리와 렌더링 대상
- UI개발이 필요한 환경에 어디든지 사용할 수 있게 만드는중. ReactDOM.rander()를 사용함(여러 환경에서 사용가능)
1.5.2 단일 페이지 애플리케이션과 React
서버보다는 클라이언트(브라우저)에 로직이 더 많은 팻 클라이언트다. SPA는 HTML렌더링, 입력값 겁증, UI변경 등의 기능을 브라우저에서 해결한다.
SPA 방식으로는 MVC아키텍처를 많이 사용하지만 다른 방식도 있음.
1.5.3 React 개발 스택
모델링,스타일라우팅 등에 정해진 방법이 없어 다른 라이브러리를 결합해 사용한다.
(책 56쪽)
- 데이터 모젤링과 백엔드
- 라우팅
- React용 Bootstrap컴포넌트
- 날짜 입력 컴포넌트
- WAI-ARIA정의를 따르는 자동완성컴포넌트
1.6 첫번째 React앱 만들기:Hello World
파일구조
/hello-world
/js
react.js
react-dom.js
index.html
예시 코드는 여기 에서 다운받을 수 있다.
index.html파일 내용1
2
3
4
5
6
7
8
9
10
11
12<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
</script>
</body>
</html>
React 엘리먼트를 생성하려면 React.createElement(clementName, data, child)를 호출한다
- elementName : HTML 태그명’h1’처럼 문자열로 작성하거나 직접 만든 컴포넌트 를래스 객체를 넘겨줄 수 있음
- data: 속성이나 상위컴포넌트에 받는 값으로 null이나{name: Azat} 같은 형태의 데이너
- child: 자식 엘리먼트나 태그 내부에 작성하는 텍스트
1 | var h1 = React.createElement('h1', null, 'Hello world!') //-h1요소를 생성하여 변수에 담음 |
아래처럼 변수에 담지 않고 직접 넣어줄수도 있다.1
2
3
4
5
ReactDOM.render( //h1요소를 ID가 content인 실제 DOM에 랜더링함
React.createElement('h1', null, 'Hello world!')
document.getElementById('content')
)
웹 브라우져에서
Hello world!
객체가 만들어진것을 볼 수 있다.