0/ React

2017-12-07

react

어썸 리액트! 💙

리액트 공식 사이트로 들어가면 부제목으로 이런 글이 있다.
A JavaScript library for building user interfaces
UI 작업을 위한 자바스크립트 라이브러리!

사용자가 서비스를 접하면서 만나게되는 여러 상황에 빠르게 대응할 수 있고, 다양한 UI 트리거를 빠르게 만들 수 있도록 나온 라이브러리가 아닌가 한다. 그만큼 개발에도 사용자 경험을 많이 신경쓰고 있다는 점에서, UI와 인터렉션은 정말 화두 오브 화두. 상태관리를 손쉽게 할 수 있다는 점때문에 개발자가 UX를 고민할 시간이 더 생긴다는 점에서 리액트를 선호한다. 최근에는 앵귤러를 입문하고 있는데, 비슷한 패턴으로 상태관리를 한다고 느껴지긴했지만, 아직 어려운 개념들이 많고.. 그래서 아직 리액트와의 차이점은 잘 모르겠다.

리액트 탄생배경
리액트의 특징

1. 리액트 탄생배경

front 영역을 제어하기 위해서는 자바스크립트로 DOM을 컨트롤 하면 된다. 이는 다양한 인터렉션 기능들을 구현할 수 있게 해주지만 이 DOM이라는 것을 조작하기에는 여간 까다로운게 아니다.(바닐라로 간단 기능을 짜본사람은 무슨 느낌인지..) 이런 까다로운 DOM을 쉽고 효율적으로 다루기 위해 Jquery 라이브러리가 나왔다. But, 제이커리는 여러가지 이슈를 갖고 있었다.

SPA 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크인 Angular가 등장하면서 구조화된 프론트엔드 환경을 제시했다. 이런 상황에서 Facebook에서 React가 등장하게 된다. React는 에어비엔비, 넷플릭스, 드랍박스, 트위터 등에서 사용하고 있다. 리엑트는 자바스크립트 라이브러리이며, 라우터와 같이 웹을 만들 때 필요한 도구들을 포함되어 있지 않다. (앵귤러는 포함되어있음) 필요한 도구들이 없는 대신? 가볍다. 그리고 빠르게 배울수 있다는 점!

2. 리액트의 특징

React 공식 사이트에서 말하는 특징

1. Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.

직관적
리액트는 인터렉티브 UI를 어려움없이 만들 수 있습니다. 당신의 어플리케이션의 각각의 상태를 위해 간단한 view들을 디자인을 해보십시요. 리액트는 데이터가 변할때 해당 컴포넌트를 효과적으로 업데이트하고 렌더링 할 수 있습니다. 직관적인 view들은 디버깅하기 더 쉽게, 더 잘 예측할 수 있도록 해줍니다!

2. Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

컴포넌트 단위.
자체 상태를 관리하는 캡슐화된 컴포넌트를 만들어서 복잡한 UI를 만들 수 있도록 구성해보세요. 템플릿 대신 자바스크립트로 작성된 컴포넌트 로직을 통해 여러분은 풍부한 데이터를 쉽게 전달하고, DOM에서 상태를 유지할 수 있습니다.

3. Learn Once, Write Anywhere

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native.

한번배우고, 어디서나 쓰십쇼! 우리는 여러분의 기술 스택의 나머지 부분에 대해서 가정하지 않았으므로 여러분은 기존 코드를 다시 작성하지 않고, React에서 새로운 기능을 개발할 수 있습니다. React는 React Native를 사용하여 Node나 모바일 앱을 사용하여 서버에서 렌더링할 수 있습니다.

2-1. Component

component는 UI를 구성하는 개별적은 View 단위이다. 이 단위들이 레고 블럭처럼 조합되어서 최종 결과물을 만들어낸다. 이는 앵귤러도 같은 개념이다. Component의 강력한 특징은 재사용이 가능하다. 틀을 만들어 놓고 여러 컴포넌트로 갖고가서 사용이 가능하다는 것.
리덕스 창시자 Dan Abramov는 React의 목표가 성능보다는 유지가능한 앱을 만드는 것!이라고 설명했다고 한다.

2-2. JSX

JSX는 React에서 사용하기 위해서 새로 만들어진 자바스크립트 문법이다.
React는 작성한 코드를 컴파일하는 과정을 꼭 거쳐야한다. 때문에 리액트에서는 Babel을 사용하고 있다.

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode)

return 내부의 형태와 ReactDom.render의 첫번째 인자는 JSX문법이다. 이를 자바스크립트로 컴파일을 하기위해 Babel을 사용하는 것이다. 자바스크립트로 컴파일 후의 모습은 아래와 같다.

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

React는 Babel과 같은 트랜스파일러를 꼭 사용해야하기 때문에 Webpack등을 사용해야하는데, 왜 구지 이런 셋팅을 하면서까지 JSX를 사용하는 걸까. 위처럼 작성해도 되지만, 공식사이트에서 말한 첫번째 특징인 직관적인(Declarative) 개발을 할 수 있도록 하기 위해 JSX를 사용한다. JSX를 보면 html마크업과 거의 같다고 볼 수 있다. 어떤 결과물이 나올지 이해가 된 상태에서 개발하기 때문에 예측가능 개발을 할 수 있도록 해주며, 개발의 피로도를 상당히 줄여준다.

2-3. Vitual DOM

DOM은 웹의 핵심으로, 말 그대로 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서이다. 이 DOM을 다루는 것이 힘들다는 것은.. 바닐라로 짜보면 알 수 있다. 정확히는 DOM 조작이 전체 동작을 비효율적으로 만드는게 아니라, 그 이후에 일어나는 일 때문에 작업이 더뎌지는 거라고 한다. DOM에 변화가 생기면, 렌더트리를 재생성하고(모든 요소의 스타일이 다시 계산된다.) 레이아웃을 만들고, 페인팅을 하는 과정을 반복한다. 그만큼 DOM을 쉽게 다룰 수 있는 부분은 개발자들의 숙제였고, 그러던 중에 Jquery가 탄생하게 된것이다.

class HelloMessage extends React.Component {
  render() {
     return (
        <div>
          <div>Hello {this.props.name}</div>
          <div>I am {this.state.chatName}</div>
       </div>
    );
  }
}

React 컴포넌트는 render를 다시 호출하여 새로운 결과 값을 return한다. 그런데 이 리턴값은 바로 DOM에 반영되지 않는다! 즉 렌더링이 되지 않는다는 말인데, react는 return값을 갖고 새로운 Virtual DOM을 만든다.. 그리고, 현재 브라우저에 보여지고 있는 진짜 DOM과 비교하여 어떤 부분이 달라졌는지 찾아낸다. 달리진 부분을 발견하면 그 부분만! 바뀐 그 부분만 진짜 DOM에 반영한다. 그리고 브라우저는 이 DOM을 해석하고 유저에게 새로운 화면을 그려준다. 즉, 브라우저 내에서 발생하는 연산의 양을 줄이면서 실제 DOM을 조작하는 것보다 성능이 개선이 된다.

가상돔을 만든 이유는, 직접 DOM을 조작하는 리소스가 많으 드는 행위를 하지않고, DOM을 조작하는 과정을 최적화시켜주고, 컴포넌트 단위로 묶어서 관리할 수 있도록 해준다. 컴포넌트 단위의 개발을 구현하기 위해 보다 효율적인 DOM 조작 방식을 도입한 것이다.

필오의 개발 docs ✨✊

01_DevTIL ✍React