React 소개 및 작동 원리 (React는 왜 빠르며 각광받는 기술인가)

React란?

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

• 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발

• 페이스북, 인스타그램 등 넓게 사용되는 중

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

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

React 컴포넌트는 render()라는 메서드를 이용하여 데이터를 입력받아 화면에 표시할 내용을 반환하는 역할을 한다. 컴포넌트로 전달된 데이터는 render()안에서 this.props를 통해 접근이 가능하다.

작동 원리

• react는 거기에 쓰는 모든 요소를 생선한다는 것이다.

• javascript와 함께 그것들을 만들고 HTML로 밀어넣는다.

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

  처럼 비어있는 div에

  ReactDOM.render(<App />, document.getElementById('root'));

  같은 구문을 통해서 root라는 id를 가진 div에 React의 요소를 밀어넣는다.(root라고 되어있는 id는 변경가능하다.)

• React로 만들어진 파일을 소스코드 확인해보면 대부분 앞선 root라는 id를 가진 비어있는 div만 보이는 index.html파일이다. 이것이 React가 빠른이유인데, React는 소스코드에 처음부터 HTML을 넣지않고 HTML에서 HTML을 추가하거나 제거하는 법을 알고있다.

• 비어있는 HTML을 먼저 로드하고 그 뒤에 React가 Component에 작성해뒀던 것들을 밀어넣게 된다.

마치며

React를 본격적으로 다루기전에 간단하게 작동원리에 대하여 알아보았다. 굉장히 치밀하게 잘 짜여져있는 방식으로 되어있는만큼 정확하게 개념을 파악하지 못하면 결국 코드를 따라만하게 되고 그렇게 된다면 제로베이스부터 시작하는 개발프로젝트에선 아무 힘을 쓰지 못하게된다. component라는 개념도 굉장히 흥미로웠다. 보여지는 HTML코드는 그저 틀이었을뿐 핵심은 React가 불러온 component라는 것이 JAVA에서의 class의 개념의 떠올랐다.(기초의 중요성을 다시 한 번 느꼈다.)