React 기본 : React Webpack 기본설정하기(2)와 Module 시스템 이해하기

본 강의는 ZeroCho TV의 무료강의를 기본으로 하고 있습니다. 

 

지난시간에는 React를 사용하는데 있어서 webpack의 가장 기본적인 틀을 공부해 보있습니다. 즉, 대부분의 React에서 사용하는 create-react-app 자동기능을 수동으로 하나씩 세팅해 나가면서 React webpack에 대한 기본개념을 잡고 있습니다. 

 

오늘은 좀 더 구체적으로 설정을 해 보도록 하겠습니다. 

 

아래는 npm으로 설치를 한 기본구조였습니다. 

 

 

 

▶ client.jsx에 ReactDom 렌더링 선언

 

React와 ReactDom을 불러온 client.jsx에 Component 렌더링 정의를 다음과 같이 합니다. 

 

 

구구단 작성시 html에서와 비슷한 모습을 하고 있습니다. 

 

이제부터는 필요한 파일을 만들면서 연관된 파일들끼리 연결함으로써 전체를 모듈시스템으로 만들면서 진행해 보겠습니다. 

 

▶ Component 파일 별도만들기

 

사실 ReactDom.render(  )가 표시된 client.jsx에서 Class 형 Component를 만들어서 사용할 수 있으나 수많은 Component를 다 적용할 수 없습니다. 따라서, 별도 파일을 만들고 해당 파일에서 필요한 부분만 불러와서 사용하는 파일간 Module화를 시키는 방법이 React의 가장 큰 장점입니다. 

 

즉, 분리가 필요한 각각의 Component를 정의하는 파일(WordRelay.jsx)을 만들고 다음과 같이 씁니다. 

 

 

위 그림을 잠깐 설명하면,

 

Class Component명은 WordRelay 입니다. React를 npm에서 const를 이용하여 불러왔고 WordRelay라는 Component명으로 module을 export합니다. 해당 export는 다시 client.jsx에서 상대경로로 다음과 같이 받아줍니다. 

 

 

즉, WordRelay 파일의 내용중 필요한 Component인 WordRelay에 관련된 내용을 불러와서 렌더링하는 상호간의 모듈시스템을 적용하는 겁니다. 

 

 

 

▶ 활용할 파일을 하나로 합치기 (Webpack)

 

이전까지 코딩의 효율성을 위해 WordRelay.jsx에서 Component를 만들고 client.jsx에서 필요한 Component만 불러와서 실행하는 개념은 이해가 됩니다만, 실제 웹에서 표현되는 모든 내용은 index.html에서 이루어집니다. 

 

내용을 보면 

 

 

app.js라는 파일에서 하나로 묶어져서 웹에 표현이 되는데 이를 위한 작업이 Webpack작업입니다. 처음에 만들어놓은 파일인 webpack.config.js 파일을 이용합니다. 

 

즉, client.jsx와 WordRelay.jsx 두개의 파일(입력을 담당)을 app.js파일(출력을 담당)로 만드는게 웹팩의 가장 중요한 작업입니다. webpack.config.js파일에서 가장 중요한 입력과 출력을 정의합니다. 

 

특히, app.js파일이 위치한 곳은 dist라는 폴더에 있다고 정의하였으니 dist라는 폴더를 만들고 출력에 해당하는 위치를 지정하는 명령어를 사용합니다. 

 

다음 webpack.config.js 파일의 내용을 가지고 좀 더 설명을 하겠습니다.

 

 

상기 그림에서 최초 webpack.config.js 파일은 module.exports = {   }; 만 프레임을 잡았습니다. 이 중괄호안에 내용을 채운것입니다. 

 

name, mode, devtool은 중요한 항목이 아니고 단지 개발자가 내용을 확인하기 위해 써 놓은 메모라고 보면됩니다. 중요한 내용은 ①번부터 ④번까지 번호를 기재하였습니다. 

 

①번 : 설명드린바와 같이 app.js 파일 하나로 출력이 되게 만드는 과정입니다. 

path: path.join(__dirname, dist)는 Node 명령어입니다. 현재폴더(__dirname)의 하위폴더인 dist로 위치 지정하는 명령어입니다. 파일이름은 index.html에 나타내었듯이 app.js로 만들어줍니다. 

 

②번 : Node의 path 명령어를 사용하기 위해 npm에서 불러옵니다. 

 

③번 : 입력이 되어지는 항목입니다. 입력은 client.jsx와 WordRelay.jsx 두 파일이 관여가 되는데 WordRealy.jsx 파일은 이미 client.jsx에서 불러왔기 때문에 중복으로 불러올 필요가 없이 client.jsx만 불러옵니다. 

특히 jsx 확장자를 빼고 파일명만 기재를 하였는데 ④번의 resolve 라는 명령어를 통해 확장자를 미리 지정합니다. 

 

 

▶ Webpack 만들기

 

다음시간에는 webpack.config.js 파일에 정의된 내역을 통해 터미널창에서 'webpack'이라는 명령어를 통해 웹팩을 빌드해 보도록 하지요.