리액트는 컴포넌트를 만드는게 중요하다.
컴포넌트... 막상 이렇게 말하니까 개념적으로 이해하기 어려웠었다.
컴포넌트란 웹 코딩으로 설명하자만, 네비게이션이 있는 영역도 컴포넌트이고 검색 기능이 있는 부분도 컴포넌트다.
ul로 감싸진 목록들도 컴포넌트로 만들 수 있고, 로그인 부분도 컴포넌트로 만든다고 생각하면 된다.
그냥 다 컴포넌트들로 모여져 웹사이트를 만든다 생각한다.
지난 번에(http://bongsunga.com/blog/3478) 만든 webpack.config.js 를 열어보면 output : 이란 곳이 있고 public폴더의 bundle.js로 만들어준다는 내용이 있다. 우린 이걸 html안에 불러다 쓰면 되는 것이다.
아무튼 public 폴더안에 index.html 를 만들어 기본 html을 만들고 거기에 위 웹팩에서 만들어질 bundle.js를 불러넣어 놓자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
이렇게 만들어놓으면 웹팩을 통해 번들링되서 bundle.js에 들어올 것이다.
이제 번들링될 코드를 작성해보자.
다시 webpack.config.js 열면 entry : 라고 하고 ./src/index.js 라고 있다.
해당 파일을 아래와 같이 작성해보자.
import React from 'react';
import ReactDOM from 'react-dom';
class MynameisComponent extends React.Component {
render(){
return(
<div>
<h1>제목</h1>
<p>내용</p>
</div>
)
}
}
const rootElement = document.getElementById('root');
ReactDOM.render(<MynameisComponent/>, rootElement);
아주 간단하게 MynameisComponent 라는 컴포넌트를 만들어서 id가 root인 곳에 바인딩하는 것이다.
잘보면 return() 안에 html같이 생긴 <div><h1><p>가 있을 것이다. 이건 여기서 html 코드가 아니라 html코드처럼 직관적으로 코딩할 수 있는 JSX 문법이다. 거의 비슷하지만 class="" 대신 className="" 을 쓰거나 label 태그는 for 대신 htmlFor 로 써야한다. JSX 문법의 자세한 설명은 문서 http://facebook.github.io/jsx/ 를 참고하면 된다.
첫줄에 import React from 'react'; 는 리액트 작업을 하는 곳에 항상 써야하고, 두번째 줄에 import ReactDOM from 'react-dom'; 는 DOM에 바인딩하는 js 안에서만 써주면 된다.
이건 이해하기 쉽게 예제로 간단하게 만든 것이고 실제로는 index.js는 여러 컴포넌트들이 있는 js들을 임포트한다.
그 컴포넌트들 안에는 또 세부적인 서브 컴포넌트들을 임포트하고 작업한다.
위에 index.js를 아래처럼 수정하자.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './component/Appjs';
const rootElement = document.getElementById('root');
ReactDOM.render(<App/>, rootElement);
이런 식으로 외부 컴포넌트를 불러와서 임포트 시키고 작업을 하기 시작한다.
import App from './component/Appjs'; 는 component 디렉토리에 있는 Appjs.js를 불러와서 App 컴포넌트라고 말해주는 것이다.
그리고 App 컴포넌트를 아이디 root인 엘리먼트에 렌더링 한다는 것이다.
어찌보면 App 컴포넌트는 서브 컴포넌트들의 1depth 격이다. 그 안에서 세부적인 컴포넌트들을 만들어보자.
component 폴더안의 Appjs.js 를 아래와 같이 만들자.
import React from 'react';
import Depth2_navi from './navigation';
import Depth2_loginbox from './loginbox';
import Depth2_bottomAd from './bottomad';
export default class Layout extends React.Component {
render() {
return(
<div>
<Depth2_navi/>
<Depth2_loginbox/>
<Depth2_bottomAd/>
</div>
);
}
}
이렇게 하면 navigation.js / loginbox.js / bottomad.js 를 임포트하고 Layout 이라는 컴포넌트를 아웃풋하는 js 이다. 이걸 Appjs.js에서 받았던 것이다.
항상 주의 할 것은 return ()안에 들어가는 코드는 꼭 하나의 래퍼로 감싸야한다. div든 컴포넌트든 .. 안그러면 오류 난다.
위에 코드만 봐도 어떤 걸 불러와서 어디에 넣는지 파악이 되니까 컴포넌트의 개념은 이해했으리라 생각한다.
다음은 이제 컴포넌트 안을 어떻게 코딩해서 버튼이나 인풋을 넣고 값을 주고 받고 변경하는지 준비하도록 하겠다.