2018 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
React – 02. 코딩하기 – 컴포넌트

리액트는 컴포넌트를 만드는게 중요하다.
컴포넌트… 막상 이렇게 말하니까 개념적으로 이해하기 어려웠었다.

컴포넌트란 웹 코딩으로 설명하자만, 네비게이션이 있는 영역도 컴포넌트이고 검색 기능이 있는 부분도 컴포넌트다.
ul로 감싸진 목록들도 컴포넌트로 만들 수 있고, 로그인 부분도 컴포넌트로 만든다고 생각하면 된다.

그냥 다 컴포넌트들로 모여져 웹사이트를 만든다 생각한다.

지난 번에(http://naminsik.com/blog/3478) 만든 webpack.config.js 를 열어보면 output : 이란 곳이 있고 public폴더의 bundle.js로 만들어준다는 내용이 있다.  우린 이걸 html안에 불러다 쓰면 되는 것이다.

아무튼 public 폴더안에 index.html 를 만들어 기본 html을 만들고 거기에 위 웹팩에서 만들어질 bundle.js를 불러넣어 놓자.

이렇게 만들어놓으면 웹팩을 통해 번들링되서 bundle.js에 들어올 것이다.

이제 번들링될 코드를 작성해보자.
다시 webpack.config.js 열면 entry : 라고 하고 ./src/index.js 라고 있다.
해당 파일을 아래와 같이 작성해보자.

아주 간단하게 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 App from './component/Appjs';  는 component 디렉토리에 있는 Appjs.js를 불러와서 App 컴포넌트라고 말해주는 것이다.

그리고 App 컴포넌트를 아이디 root인 엘리먼트에 렌더링 한다는 것이다.
어찌보면 App 컴포넌트는 서브 컴포넌트들의 1depth 격이다.  그 안에서 세부적인 컴포넌트들을 만들어보자.

component 폴더안의 Appjs.js 를 아래와 같이 만들자.

이렇게 하면 navigation.js / loginbox.js / bottomad.js 를 임포트하고 Layout 이라는 컴포넌트를 아웃풋하는 js 이다.  이걸 Appjs.js에서 받았던 것이다.

항상 주의 할 것은 return ()안에 들어가는 코드는 꼭 하나의 래퍼로 감싸야한다. div든 컴포넌트든 .. 안그러면 오류 난다.

위에 코드만 봐도 어떤 걸 불러와서 어디에 넣는지 파악이 되니까 컴포넌트의 개념은 이해했으리라 생각한다.

다음은 이제 컴포넌트 안을 어떻게 코딩해서 버튼이나 인풋을 넣고 값을 주고 받고 변경하는지 준비하도록 하겠다.

 

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.