React 정리

사상

• A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
• Framework가 아닌 라이브러리
• 클라이언트 측의 아키텍처를 React 를 중심으로 다른 라이브러리를 조합하여 구성
• 컴포넌트 단위 개발 : React는 컴포넌트를 만들어주는 틀을 제공 (재사용성 지향)

장점

• Virtual DOM으로 변경된 부분만 다시 랜더링

1. 데이터가 업데이트되면, 전체 UI 를 Virtual DOM 에 리렌더링 한다.
2. 이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교한다.
3. 바뀐 부분만 실제 DOM 에 적용이 된다.

• 많은 레퍼런스와 커뮤니티
• Facebook, Airbnb, Instagram, NetFlix 등 세계적 기업들이 React 기반으로 개발한 웹애플리케이션으로 서비스 제공
• 풍부한 커뮤니티 형성으로 개발자들간 소통이 이루어지고 있음
• 버전업에 대한 안정성 (현재 2016.12.05 기준 v 15.4.0)
• 페이스북은 React 버전을 v0.14 에서 v15로 껑충 띄웠는데 그 이유는 production 에서 사용해도 된다고 안정성을 약속한다는것을 강조하기 위해
• View 만 담당하므로 기존 웹애플리케이션에 적용의 부담이 적음
• 기존 웹애플리케이션의 환경에 따라 React 와 라이브러리를 조합하여 stack 구성

이슈

• JSX (디자인과 코드가 혼합 되어 있음)

JSX 는 JavaScript 의 확장 문법이다. DOM 엘리먼트들을 만들 때 JavaScript 형식으로 작성해야 하는 것을 XML 과 비슷한 형태로 작성할 수 있게 해준다.

샘플코드

class ShoppingList extends React.Component {
  componentDidMount() {
    // javascript code
  }

  getValue() {
    // javascript code
  }

  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}