티스토리 뷰
React:
리액트 교과서 1장(리액트 살펴보기)
이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다.
|시작하기에 앞서
리액트란 무엇인지, 왜 리액트를 쓰는지 또한 어떠한 특징이 있는지, 그리고 어떠한 장단점을 갖고 있는지 파악해보자.
|React란 무엇인가?
> 리액트는 UI 컴포넌트 라이브러리
특별한 템플릿언어가 아닌 자바스크립트를 이용해 만든다.
이러한 컴포넌트들은 시각적 표현과 동작을 구현하는 논리를 모두 담고있다.
컴포넌트 기반의 아키텍쳐는 일반적으로 일체형 ui에 비해, 재사용과 유지보수 확장이 용이하다.
리액트의 접근법은 새로운것이 아니다. 컴포넌트로ui를 구성하는 방법을 사용한지는 오래되었지만, 리액트는 최초로 템플릿 없이 순수하게 자바스크립트만으로 이것을 가능하게 했다. 그리고 이 방법이 유지보수와 재사용,확장에 더 용이하다는 사실도 입증했다고 한다.
|React가 해결할 수 있는 문제
> UI를 함수로 만들었다.그리고 데이터를 전달하고 호풀하며 뷰를 렌더링하므로, 뷰를 예측할 수 있었다.
지난 몇년간 복잡한 웹 ui로 구성된 프론트엔드 애플리케이션을 개발하고 관리하는데 어려움을 겪고 있었다.
데이터가 변경될때마다 뷰를 변경하고 관리하는 것은 매우 어려운 일이었다.
|React의 장점
> 단순한 앱 개발
순수자바스크립트로 만든 컴포넌트 기반 아키텍쳐
선언형 스타일
강력하고 개발자 친화적 dom 추상화 제공
> 빠른 ui
가상 dom 채택
헤드리스 브라우저를 사용하지 않고 테스트 가능
> 코드량 감소
수많은 라이브러리와 컴포넌트
- 뷰를 자동으로 갱신
- 복잡도를 줄여줌
- 코드에 대한 이해도와 가독성을 높일 수 있음
- ex) map함수
- 명령형 스타일은 과정에 집중한데에 비해, 선언형 스타일은 결괏값에 좀더 집중 (지역변수가 줄고, 논리가 단순해짐)
- 뷰를 갱신해야 할때 빛을 발함, 이것을 inner state 변화라고 부름. (리액트는 상태변경에 따라 뷰를 갱신)
- jquery를 사용한다면 갱신과정을 명령형으로 작성해야 하지만 react를 사용하면 명시적으로 뷰를 변경하려고 노력할 필요 x -> 상태가 변경되면 뷰가 자동으로 갱신 되기 때문
- Angular js는 자동으로 뷰를 갱신하기도 함(양방향 데이터 바인딩을 이용하기 때문
- jquey를 사용하면 dom 조작에 많은 노력을 들여야 함 , angular는 양방향 데이터 바인딩을 사용하므로 기능이 늘어나면 뷰가 갱신되는것을 통제하기 어려움 -> 그 중간점이 react
- 순수한 자바스크립트로 구현한 컴포넌트 기반 아키텍쳐는 React 이전에는 없었음
- angular는 자바스크립트와 템플릿이 분리되어있음
- 프로젝트 하나 또는 컴포넌트 하나를 위한 작업이라면 html과 자바스크립트를 분리하지 않는 방식이 개발자에게 더 합리적 (요즘 웹애플리케이션은 복잡도가 증가하면서 javascript가 하는 역할이 증가했음 -> html과 자바스크립트 분리 or 통합에 대한 고민생김)
- 템플릿의 문제점은 개발자가 다른언어를 배워야 하는데, 리액트는 순수한 자바스크립트이므로 새로운 언어를 배울 필요가 없음
- 템플릿은 데이터에 관련된 로직과 데이터를 렌더링하는 방식이 분리되어있음 but 리액트는 자바스크립트와 마크업을 한곳에 둠.
- map은 리액트와 매우 잘어울림
- 내부의 인터페이스는 숨기고, 정규화 과정을 거친 합성메서드와 속성을 제공 ex) onClick 이벤트가 발생하면, 이벤트 핸들러는 브라우저 원본이벤트 객체 대신 이 원본객체를 감싼 합성 이벤트 객체를 전달 받음.
- 서버측 렌더링 기능
> 속도와 테스트 용이성
리액트의 가상 dom은 자바스크립트 메모리에 존재한다.
헤드리스 브라우저없이도 단위테스트 수행 가능 -> jest를 사용하면 명령줄에서 바로 react 컴포넌트를 테스트 가능
> 리액트의 폭넓은 개발 커뮤니티와 생태계
가장 큰 장점이지 아닐까 생각한다 ㅎㅎ(커뮤니티의 중요성을 크게 생각하는 나로써)
- 리액트 컴포넌트
https://github.com/brillout/awesome-react-components
- 구글머티리얼 디자인명세에 따라 구현한 리액트 컴포넌트
https://github.com/mui-org/material-ui
- 리액트 컴포넌트 모음
https://react.rocks/
- ..etc 무수히 많다.
|React의 단점
- redux나 react-router같은 라이브러리와 함께 사용해야한다.
- 다른프레임워크만큼 성숙하지않다. -> 계속 업데이트 되며 핵심api가 바뀌는중
- 단방향 데이터 바인딩만 제공한다.
- 리액티프 프로그래밍은 아니다. (리액티브 프로그래밍 예 -> RxJS)
|웹 애플리케이션에 React 적용하기
단일페이지 애플리케이션 아키텍쳐는 서버보다는 클라이언트, 즉 브라우저 측에 로지깅 더많은 팻 클라이언트이다. SPA는 렌더링, 입력값 검증, ui변경 등의 기능을 브라우저에서 해결한다.
SPA방식은 UI렌더링을 대부분 브라우저 상에서 해결한다. 모든렌더링을 서버에서 해결하는 전통적인 방식과는 달리 spa에서는 데이터만 주고 받는다(여기서 말하는 렌더링이란 템플릿으로 HTML을 생성하는것을 의미한다.)
개발 스택에는 JSX가 있는데, JSX가 React와 잘어울리는 이유는 코드구현과 가독성 면에서 더 편리하기 때문이다. 리액트에서 element역할을 한다고 보면된다.
JSX? https://reactjs.org/docs/introducing-jsx.html
| React 앱 만들기
React.createElement(elementName,data,child)
- elementName : 문자열로 작성하거나, 직접 만든 컴포넌트 객체를 넘겨줄수있다.
- data: 속성이나 상위 컴포넌트에 받는 값이다.
- child: 자식엘리먼트나 태그내부에 작성하는 텍스트이다.
React 엘리먼트를 <body>에 직접 렌더링하지 않는 이유는 다른 라이브러리나 <body>를 조작하는 브라우저 확장 프로그램과 충돌하는것을 방지하기 위해서이다.
아래에서 h1으로 정의한 elementName은 실제 DOM노드는 아니고, React h1 컴포넌트의 인스턴스이다. 다른이름으로 바꿔도 된다.
<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">
var h1 = React.createElement('h1', null, 'Hello world!')
ReactDOM.render(
h1,
document.getElementById('content')
)
// Usage without the h1 variable
// ReactDOM.render(
// React.createElement('h1', null, 'Hello world!'),
// document.getElementById('content')
// )
</script>
</body>
</html>|마치며
요약
- 리액트는 선언적, 뷰또는 UI의 레이어의 역할을 한다.
- React 컴포넌트는 클래스로 생성하고 필수적인 render메서도를 포함한다.
- React 컴포넌트는 재사용할 수 있고, 불가변 속성을 전달받아 접근 할 수 있다.
리액트로 개발을 하고있지만, 선언형에 관련한 내용이나 어렴풋이 잡혀있던 리액트의 특징들을 잡을 수 있었던것 같다.리액트로 서비스를 개발해내는 퍼포먼스도 중요하지만 위와 같은 기본 개념들, 그리고 리액트를 어떨때쓰는지, 어떠한 장점이 있는지 파악하고 쓴다면 더 quality가 좋은 웹앱을 구현할 수 있을것이다.
'Front end > React' 카테고리의 다른 글
| React- 리액트 교과서 3장 학습내역 (JSX) (0) | 2018.06.24 |
|---|---|
| React- 리액트 교과서 2장 학습내역(리액트 첫걸음) (0) | 2018.06.20 |
| React - 리액트에서 mount 와 render의 차이 (0) | 2018.06.09 |
| React -Redux saga (takeEvery함수와 take) (0) | 2018.06.01 |
| React - (Redux state)props변화에따른 saga와 componentWillReceiveProps()에 대한 생각 및 활용 (0) | 2018.05.28 |