1. React 살펴보기

1. React 살펴보기

기존 템플릿 엔진의 재사용 불편함을 개선하기 위해 Facebook에서 개발한 라이브러리

Templete Language	React
재사용 힘듬	재사용이 쉬움
도메인 특정 언어 사용	사용 X

1.1 React란 무엇인가?

React : UI Component Library

여러 컴포넌트로 UI를 구성하는 방식

Component-Based Architecture (CBA)

1.2 React가 해결할 수 있는 문제

복잡한 UI로 구성된 프론트엔드 애플리케이션을 개발하고 관리하는 데 어려웠음.

'우리는 한 가지 문제를 해결하기 위해 React를 만들었습니다. 우리가 해결하고자 한 문제는 시간에 따라 변화하는 데이터를 다루는 거대한 애플리케이션의 개발입니다.' in React 공식 사이트

UI의 함수화. 뷰를 렌더링하여 예측 가능.

1.3 React의 장점

• 단순한 앱 개발
  • React는 순수 자바스크립트로 만든 컴포넌트 기반의 아키텍쳐
• 빠른 UI
  • 가상 DOM 채택으로 인한 뛰어난 성능
• 코드량 감소

1.3.1 간결성

• 선언형 스타일 채택

  • 뷰를 자동으로 갱신

  • 복잡도 감소, 가독성 증가

    ex)

    var profile = {account: '4543'}
    var profileDeep = {account: {number: 4543 }}
    console.log(getNestedValueImperatively(profile, 'account') === '4543')
    console.log(getNestedValueImperatively(profileDeep, 'account.number') === 4543)
    
    // 명령형 스타일
    var getNestedValueImperatively = function getNestedValueImperatively (object, propertyName) {
      var currentObject = object
      var propertyNamesList = propertyName.split('.')
      var maxNestedLevel = propertyNamesList.length
      var currentNestedLevel
    
      for(currentNestedLevel = 0; currentNestedLevel < maxNestedLevel; currentNestedLevel++) {
          if(!currentObject || typeof currentObject === 'undefined') return undefined
          currentObject = currentObject[propertyNamesList[currentNestedLevel]]
      }
      return currentObject
    }
    
    // 선언형 스타일
    var getValue = function getValue(object, propertyName) {
      return typeof object === 'undefined' ? undefined : object[propertyName]
    }
    
    var getNestedValueDeclaratively = function getNestedValueDeclaratively(object, propertyName) {
      return propertyName.split('.').reduce(getValue, object)
    }
    
    console.log(getNestedValueDeclaratively({bar: 'baz'}, 'bar') === 'baz')
    console.log(getNestedValueDeclaratively({bar: {baz: 1 }}, 'bar.baz') === 1)
    

  • 선언형의 이점은 뷰를 갱신할 때 즉, 내부 상태 변화에서 빛을 발한다.

• 순수한 자바스크립트로 만든 컴포넌트 기반의 아키텍쳐

  • 도메인 특정 언어를 사용하지 않음.
  • 한 가지 기능을 개발하기 위해 기술을 분리하지 않음.

• 강력한 추상화

  이벤트 발생 시 원본 이벤트 객체를 감싼 합성 이벤트 객체를 전달 받음.

  • 브라우저 종류에 관계없이 항상 같은 이벤트 객체를 받음.
  • 서버측 랜더링 ; DOM 추상화

1.3.2 속도와 테스트 용이성

React는 꼭 필요한 부분만 갱신하여 내부 상태(가상 DOM)와 뷰(실제 DOM)를 같게 만든다.

1.4 React의 단점

• 모든 기능을 갖춘 프레임워크가 아님
  • Redux나 React Router같은 라이브러리를 함께 사용 해야 함.
• React는 단방향 데이터 바인딩만 제공한다.
  • 복잡한 앱에서 복잡도를 줄이는 데 도움을 줌.

1.5 웹 애플리케이션에 React 적용하기

• UI 라이브러리로 React와 관련된 Redux나 React Router를 활용한 단일 페이지 애플리케이션 스택의 구성
• MVC의 V를 대체하는 UI 라이브러리로 기존 MVC 프레임워크와의 결합
• jQuery를 기반으로 서버 측 렌더링을 거친 애플리케이션에서 자동완성 등 일부 기능을 위한 UI 컴포넌트로 활용
• 대부분의 로직을 직접 처리하는 전통적인 방식의 백엔드에서 서버 측 렌더링 템플릿 라이브러리로 활용
• 백엔드와 프론트엔드에서 모두 자바스크립트를 사용하는 경우(express-react-views를 활용한 Express.js 백엔드를 예로 들 수 있다.)
• React Native를 UI 라이브러리로 사용한 모바일 앱
• 여러 가지 렌더링 대상에 적용할 목적으로 사용하는 UI 라이브러리

1.5.1 React 라이브러리와 렌더링 대상

• 웹 개발에 React를 사용할 때는 react와 react-dom을 사용해야 한다.
• React는 거의 항상 JSX와 함께 사용된다.

1.5.2 단일 페이지 애플리케이션과 React

팻 클라이언트(fat client || thick client) ; 브라우저 측에 로직이 더 많음.

[ 일반적인 SPA 아키텍처 ]

1. 사용자가 새로운 페이지를 열기 위해 브라우저에 URL 입력.
2. 브라우저가 URL 요청을 서버로 전송
3. 서버는 응답으로 HTML, CSS, 자바스크립트 파일 같은 정적 자원을 보냄. 대부분 HTML은 최소한의 기본 구조만 담고 있음.
4. 자바스크립트 로드 후 추가로 AJAX나 XHR 요청을 보내 서버에서 데이터 호출
5. 데이터는 JSON, XML 등의 포맷으로 받음.
6. SPA에 데이터가 전달되면 사용자 인터페이스를 구성하는 HTML을 렌더링. SPA는 템플릿에 전달받은 데이터를 밀어넣고 브라우저 상에서 UI를 렌더링
7. 브라우저 렌더링 완료
8. 웹 페이지 확인

1.5.3 React 개발 스택

• 데이터 모델링과 백엔드
  • RefluxJS
  • Redux
  • Meteor
  • Flux
• 라우팅
  • React Router
• React용 Bootstrap 컴포넌트
  • React-Bootstrap

요약

• React는 선언적이며, 뷰 또는 UI 레이어의 역할만 한다.
• React는 ReactDOM.render() 메서드를 통해 컴포넌트를 실제로 사용한다.
• react 컴포넌트는 클래스로 생성하고 필수적인 render() 메서드를 포함한다.
• React 컴포넌트는 재사용할 수 있고, 불가변 속성을 전달받아서 this.props.NAME으로 접근할 수 있다.