[StephenGrider 강의] 모던 리액트와 리덕스 - 개발환경 설정

프로젝트를 실행하기 위한 도구들을 설치해야 하는데, 

우선 노드 패키지 매니저(NPM)를 사용하여 프로젝트를 실행한다.

npm 설치로 프로젝트의 의존성(프로젝트를 구성하여 작동시는 여러 패키지들)을 관리할 수 있게 된다.

 

npm install

 

 

 

 

보일러플레이트 패키지를 시작하고 로컬 서버를 실행시킨다.

 

npm start

 

이 패키지 안에는 자바스크립트 파일을 포함해 여러 파일들이 있는데, 

바벨과 웹팩이 이 모든 것들을 합치고, ES5로 변환시켜 브라우저에서 작동되게끔 만든다.

그리고 이 모든 파일들을 볼 수 있는 로컬서버를 이용할 수 있게 해준다.

 

아래와 같이, 컴파일이 끝난 전체 패키지를 볼 수 있다.

 

<npm start 실행 후>

 

위의 코드에서 보다시피, 이 패키지는 로컬서버 localhost:8080으로 들어갈 수 있다.

 

 

 

 

 

프로젝트의 index.html을 들어가면 bundle.js라는 script 태그가 있는데,

이 파일은 전체 어플리케이션의 컴파일된 자바스크립트이다.

 

 

 

 

기존의 저장소 src 폴더에 여러 자바스크립트 파일들을 볼 수 있는데,

 

 

이 파일들을 웹팩과 바벨이 하나의 파일로 합쳐 bundle.js이라는 하나의 파일로 이용할 수 있게 만든 것이다 !

 

로컬서버이자 웹서버인 localhost:8080을 방문할 때마다 이 index.html 파일이 실제로 작동하게 된다.

 

 

이 보일러 플레이트 패키지를 돌리고 있는 개발 서버는 기존의 자바스크립트 파일들을 하나로 합쳐 브라우저에 반영하도록 도와주고 있는 것이다. 그래서 파일 내용을 변경할 때마다, 저장 후 새로고침을 하면 새로이 변경된 내용을 화면에서 바로 바로 볼 수 있게 되는 것이다.

 

다시 한번 반복해 말하자면, src 폴더 아래에 작성되어있는 혹은 작성하는 모든 소스 코드들이 웹팩과 바벨에 의해 하나의 파일로 합쳐져 index.html 파일 내의 script 태그로 연결되어 브라우저로 전송, 렌더링되는 것이다.

 

 

 

 

 

리액트는 웹 브라우저에 보여지는 HTML을 만드는 자바스크립트 라이브러리이다.

리액트의 컴포넌트라고 불려지는 단위는 소스코드의 일부인 단위로,

HTML을 생성하는 기능을 하는 자바스크립트 함수의 모음집(collection)이다.

 

컴포넌트를 생성하면 자동으로 HTML 문서에 삽입되는게 아니고, 

페이지에 보이게 하기 위해서는 DOM 안에 넣어줘야 한다.

 

 

 

 

 

위의 HTML처럼 보이는 연두색 점선 박스 부분이 JSX인데,

부분적인 템플릿 혹은 변형된 자바스크립트로, 자바스크립트 안에서 HTML처럼 보이는 소스코드를 사용할 수 있게 한다.

 

위의 App이라는 컴포넌트가 JSX를 반환하고 있다.

 

이렇게 컴포넌트를 생성했다고 해서 브라우저에서 보이는 것이 아니라,

이 컴포넌트를 페이지에 넣어야 볼 수 있게 되는 것이다.

 

 

ES6(에 도입된)의 const에 담긴 JSX를 브라우저는 해석할 수 없다.

이를 위해 보일러플레이트 패키지의 목적이기도 한,

웹팩과 바벨 같은 패키지로 JSX를 바닐라(순수) 자바스크립트로 변환하여 브라우저가 이해할 수 있게 만드는 것이다.

 

여기에서 JSX를 사용하는 이유는 이것이 변환되 실제 HTML을 만들어내고,

이 컴포넌트를 렌더링할 때(HTML 페이지에 올릴때) DOM에 삽입되도록 하기 때문이다.

 

궁극적인 목적으로 다시 이야기하면, 자바스크립트 코드를 HTML로 만들기 위한 것이라는 이야기이다.

 

 

 

https://babeljs.io/repl/

Babel · The compiler for next generation JavaScript

 

 

위의 사이트에 들어가 리액트에서 작성했던 JSX 문법으로 작성된 코드를 왼쪽 창에 붙여넣어본다면,

오른쪽 창에는 바닐라 자바스크립트로 변환되어 있는 것을 확인할 수 있다. 

이와 같이, 바벨은 일반적인 브라우저가 이해할 수 없는 ES6 자바스크립트나 라이브러리들을 이해할 수 있는 바닐라 자바스크립트, ES5 자바스크립트로 변환시켜 브라우저가 해석할 수 있도록 해주는 것이다 !

 

 

 

JSX 문법으로 작성된 것이 오른쪽의 바닐라 자바스크립트보다 좀 더 직관적이고, 한 눈에 const App의 역할을 파악할 수 있다는 것을 볼 수 있다.

 

 

 

위와 같이 중첩되는 구조에서는 더욱 더 JSX 문법의 편의성 또는 가독성을 느낄 수 있을 것이다. 

 

 

 

 

라이브러리 react와 라이브러리 react-dom을 node_modules 폴더 안에서 확인할 수 있는데,

react(코어 리액트 라이브러리)는 리액트 컴포넌트가 어떻게 렌더링 되는지 알고, 어떻게 컴포넌트들을 모으는지 등을 아는 즉, 컴포넌트를 생성하고 관리하지만,

실제로 DOM과 상호작용하며 컴포넌트를 가져와 DOM에 삽입하여 렌더링하는 라이브러리는 react-dom이다.

 

 

 

 

 

아래와 같이 코드를 작성해 App 컴포넌트를 렌더링시키려고 할 때, 다음과 같은 에러가 나타남을 볼 수 있다.

 

 

 

 

이유인즉슨, App은 함수를 담은 상수로 App 자체로는 클래스이며,

이 클래스를 통해 생성되는 인스턴스는 <App />(<App></App> 안에 아무것도 없을 때 작성방)이다.

즉, 위 코드에서는 ReactDOM.render를 통해 클래스인 App을 전달한 것이다. 

컴포넌트들은 DOM에 렌더링되기 전에 인스턴스화해서 다시 말해 인스턴스를 전달해야하는데,

클래스를 전달해 에러가 생긴 것이다. 

 

 

 

바벨이 작성된 JSX를 어떻게 트랜스파일시키는지 확인해보면 

div JSX 태그를 작성시 실제로는 요소를 생성하는 createElement 함수를 호출하는 것으로 작성되는 것을 볼 수 있다.

 

다시 말해보면, 위의 JSX로 작성된 div 컴포넌트의 이름 자체인 div는 클래스인 것이고,

JSX 안에서 사용이 될 때, 즉 태그로 <> 사용이 될 때 이 클래스는 인스턴스로 바뀌게 되는 것이다. div => <div />

 

리액트돔의 렌더함수의 인자로 이름 즉 클래스를 넣게 되면, 렌더링에 사용되는 인스턴스가 아니기 때문에 에러가 나게 되고 이를 인스턴스화 즉, 태그를 붙이게 되면 에러가 해결된다.  

 

 

 

 

 

 

또 다른 에러, "Target container is not a DOM"은 컴포넌트를 렌더링해줘야 하는 위치를 컴포넌트 인스턴스 다음의 인수(두번째 인수)로 넣어주지 않아서이므로, 아이디나 클래스로 표현된 이름을 나타내어 위치를 알려준다.