[React&Redux]리액트란?

이제까지 리액트를 아무렇지 않게 써왔다.

뷰를 위한 것 컴포넌트를 작성하는 것.

어떤 코드가 어떤 라이브러리가 어떤 역할을 하는지 생각 해본 적 없이.

컴포넌트를 생성하기 위한 코드이다.

const App = function(){
    return <div>Hi!</div>;
}

App이란 상수값은 함수이며

return으로 JSX문법으로 Hi!를 리턴할 것이다.

이것은 React의 역할이 아닌 babel과 webpack의 역할이다.

자 그럼 이것을 렌더링 하기 위해서 리액트가 필요할 것이다.

import React from 'react';

React.render(App);

react라이브러리를 불러온다. 이 때 경로가 없이 불러오는 것은 모두 node_modules에 위치하는 것이다.

위의 코드를 실행하면 에러가 발생한다.

이유는 React는 React를 이해하고 생성 관리하며 JSX를 이해하는 것이지 DOM에 출력하기 위한 라이브러리가 아니기 때문이라고 한다.

import ReactDOM from 'react-dom';

ReactDOM.render(App);

고로 다음과 같이 ReactDOM을 추가하고 다시 렌더링하면

인스턴스를 render하라는 오류가 난다.

App을 클래스라고 봤을 때,

JSX는 이를 인스턴스화 하기 위해 다음과 같이 사용한다.

ReactDOM.render(<App />);

이제 새로운 에러가 발생하는데

렌더링 하는데 App은 타겟 컨테이너가 아니라고 한다.

타겟 컨테이너는 결국 root가 될 곳

컴포넌트가 어디에 위치하는지 지정하라는 것이다.

render메소드는 두번째 파라미터로 컴포넌트의 위치를 지정해 줄 수 있다.

ReactDOM.render(<App />, document.querySelector('.container'));

이로써 실행 될 것이다.

MoonSupport