[React] 1. React 개요 및 코드펜(Codepen)을 이용한 React 개발환경 구축

• React 란?

  • UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리이다. React는 Facebook에서 개발한 유저 인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해 준다. 이미 Facebook을 비롯하여 Airbnb, Netflix, Dropbox, Twitter, Evernote, Uber 등의 큰 서비스들에서 React를 사용하고 있다.

• React의 특징 및 장점

  • Component 기반 : 리액트는 모든 것이 Component로 이루어진다. Component는 UI를 구성하는 개별적인 뷰 단위이다. 작은 블록들을 조립하여 성을 만드는 것처럼, 전체 앱은 각 Component들이 결합하여 만들어진다. 캡슐화된(Encapsulated) 각 컴포넌트들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능하다. 이렇게 컴포넌트들을 조립하듯 사용할 수 있어 확장성, 결합성, 재사용성이 증가하며 유지보수가 용이하다는 장점이 있다.

  • 단방향 (Unidirectional) 데이터 흐름 : 리액트에서는 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달할 수 있는데, 데이터를 전달할 때 부모에서 자식에게로만 데이터 전달이 가능하다. 이렇게 데이터 흐름을 단방향으로 제한하여 데이터를 추적하기 쉽고 디버깅이 용이하다는 장점이 있다.

  • Virtual DOM 사용 : React는 JavaScript 객체 형태의 Virtual DOM을 사용한다. React 컴포넌트는 데이터가 업데이트되면 render를 다시 호출하여 새로운 결괏값을 return 하는데, 이 return 값은 바로 실제 DOM에 반영되지 않는다.(브라우저에 바로 렌더링 되지 않는다.) 데이터가 업데이트되면, 전체 UI를 Virtual DOM에 리렌더링 하고, 이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교하여 바뀐 부분만 실제 DOM 에 적용이 된다. 바로 DOM을 변경하지 않고 번거로운 비교 작업을 거치는 이유는 브라우저가 DOM을 해석하고 렌더링 하는 것이 굉장히 비싼 작업이기 때문이다. Virtual DOM은 그 작업을 미리 최적화시켜줄 뿐만 아니라, 컴포넌트 단위로 묶어서 관리할 수 있게 해 준다. 이렇게 선택적으로 유저 인터페이스를 렌더링 하여 최소한의 DOM 처리로 애플리케이션의 성능을 향상시킨다.

 

---

자 그럼 간단한 React 프로젝트를 바로 만들어보자!
리액트는 웹 환경에서 구동할 수 있기 때문에, 로컬 컴퓨터에 개발 환경을 구축하지 않고도 온라인 상에서 소스코드를 테스트해 볼 수 있다.

리액트 프로젝트를 실행 가능한 온라인 편집기로는 codepen (https://codepen.io/), codesendbox (codesandbox.io/) 등이 있다.
내가 수강 중인 동빈나님의 강좌에서는 codepen을 사용했기 때문에 나도 codepen을 사용했다.

 

1. codepan에 접속. create > Pen을 눌러 새 프로젝트를 생성한다.

2. 리액트(React) 개발환경을 구축하기 위해 설정(Settings) 탭을 열어 react와 react-dom 라이브러리를 추가한다. react는 컴포넌트 처리, 즉 View를 만들기 위한 라이브러리이고 react-dom 은 UI를 실제로 웹브라우저에 렌더링 할 때 사용하는 라이브러리이다. JavaScript Preprocessor로는 Babel을 설정한다.

cf. babel은 자바스크립트 컴파일러. 입, 출력 모두 자바스크립트 코드다. ES6, ES7 같은 최신 버전의 자바스크립트 문법이나 JSX를 모든 브라우저가 지원하지 않기 때문에 babel이 브라우저가 해석이 가능한 코드로 변환해준다. 이러한 변환을 '트랜스파일링'이라 부르며 ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다. 즉 Babel은 모든 브라우저 호환이 가능하도록 트랜스파일링을 처리해주는 자바스크립트 컴파일러이다.

3. Hello React! 를 출력하기 위한 html 코드와 javascript 코드를 작성한다.
리액트 라이브러리에서 제공하는 클래스인 React.Component를 상속받아 HelloReact 컴포넌트를 작성한다. 컴포넌트의 render() 함수는 화면에 그릴 dom 객체(element)를 리턴한다. 컴포넌트가 리턴하는 이 dom element를 루트 dom 노드(id가 ‘root’인 div element)에 랜더링 하기 위해 ReactDOM.render() 함수를 호출한다.

• html

  <div id="root"></div>

• js

  class HelloReact extends React.Component {
    render() {
      return (
          <h1>Hello React!</h1>
      )
    }
  }
  ReactDOM.render(<HelloReact/>,document.getElementById('root'))

화면에 Hello React! 가 출력되는 것을 확인할 수 있다.

 

• 참조 강좌 및 블로그 출처

  YouTube 동빈나 [React JS 이론부터 실전까지] 강좌, https://ndb796.tistory.com/202 [안경잡이개발자] / medium.com/@RianCommunity/react의-탄생배경과-특징-4190d47a28f / hyejin-dev.tistory.com/