React

JavaScript의 Library의 하나로서 사용자 인터페이스를 만들기 위해 Facebook에서 만들었다.

설명

웹사이트를 구성할때는 HTML, CSS, JavaScript 이 3가지로 구성하게 된다. 하지만 3가지의 순수한 기능으로만 만들기에는 불편한 점이 많고, 다양한 개발을 하는데 어려움이 있어 많은 라이브러리와 프레임워크가 생겼다. 예를 들면 Jquery, VueJS, SCSS 등등 이러한 라이브러리와 프레임워크 중 하나가 ReactJS인 것이다.

특징

• JSX문법
  리액트에서 사용하는 문법이다. 확장자를 .jsx로 만들어주면 알아서 babel이 읽어준다. (.js로 해도 읽어준다.)
  우리가 흔히쓰는 HTML방식으로 코딩을 하면 babel이 알아서 리액트형식에 맞게 수정을 해주는 것이다.
  
  위의 그림처럼 div에 'hello'하나만 넣었는데도 긴 코드 생성된다.
  이 말은 JSX문법을 쓰지 않으면 우리가 저 긴 코드를 하나하나 작성했어야 된다는 말이다.ㄷㄷ

• Component
  리액트는 전부 component로 이루어져있다. 그럼 component란 무엇인가?
  컴포넌트는 div, span 태그와 같이 브라우저에서 인지할 수 있는 태그를 말한다. div는 이미 역할이 정해진 컴포넌트이지만 리액트에서는 이러한 태그를 개발자 마음대로 설정할 수 있는 것이다.
  
  이렇게 컴포넌트를 만들어주어
  
  이렇게 태그로 사용하면 'Hello'라는 문자를 출력해 줄것이다.

• 상태를 가지고 있다.
  리액트는 상태(state)를 가지고 있다. 그 상태가 변화할때마다 rerendering해주어 리액트에서 실시간으로 보여준다. 리액트는 단방향 데이터 흐름이라서 데이터를 추적하기 쉽다. 부모-컴포넌트가 가지고 있는 state를 자식-컴포넌트에게 넘져주어 자식-컴포넌트에서는 props로 받으면 된다.
  

• Virtual DOM
  리액트의 가장 큰 특징이라고 할 수 있다.
  리액트는 업데이가 되면 Virtual DOM에 rerendering을 하고, 실제 DOM과 Virtual DOM을 비교하여 바뀐 부분만 실제 DOM에 적용된다.
  실제 DOM을 처리하는 것은 비용이 많이 들고 오래걸릴 수 있기 때문에 Virtual DOM을 사용하여 빠르게 변화하는 사이트를 볼 수 있다.

다음에는 React를 만들어보자