[React.js] 간단한 시계 만들기 (1)

이번에는 React를 사용하여 간단한 시계를 만들어보려고 합니다.

가장 먼저 설치를 안하신 분은 여기 글로 가셔서 설치를 해주시면 되겠습니다!

 

앞에서 언급한대로, index.js는 React에서 사용하는 가상DOM을 렌더링 시켜주는 소스뿐이 없습니다.

 

이 소스를 통하여 React는 같은 경로에 있는 App.js 파일을 호출해오고 그 부분에 document.getElementById라는 DOM 선택자를 통하여 렌더링을 진행하는 간단한 소스입니다. 

 

import는 상단에 기본적으로 제공하는 React / ReactDOM / App.js와 css 파일을 진행하고 있고, serviceWorker는 해당 서비스가 정상적으로 작동하도록 도와주는 역할을 합니다. 지금은 스킵하도록 하겠습니다!

 

App.js

기본적으로 App.js에는 소스가 어떻게 출력되는지 템플릿이 잡혀 있습니다.

정말 좋지만 이 소스는 사용하지 않으려고 합니다. 그저 참고만 하는 것이 좋겠습니다.

 

 

function의 이름은 어떠한 것이 들어가던지 관계가 없습니다. 대신 아래에 export와는 맞춰주어야 정상적으로 렌더링이 가능합니다. 

import의 반대말이 export인 것은 다들 알고 계실겁니다. import는 외부 파일을 읽어와서 소스 내에서 사용할 때 쓰는 고유한 문법 언어이고, export는 이와 반대로 다른 js파일에서 호출된 경우 return을 해주는 것과 같습니다. 마치 자바 언어에서 public 선언을 해주는 것과 같은 이치이죠. 

 

다시 function으로 돌아와보겠습니다. 먼저 내부에는 눈에 익는 div라는 HTML 태그가 들어가있습니다.

그렇습니다. 이 함수는 HTML 컴포넌트 1개를 리턴하고 있습니다. 지금 위의 소스는 div 하나가 들어가 있지만 이제 그 하위레벨로 여러 컴포넌트를 작성할 수 있습니다. 

조금 더 추가를 해보겠습니다. 보통 웹페이지를 개발할 때 header, body, footer의 3가지로 구분을 해서 개발하는 편이기에 소스가 다른 분들이 작성한 것과 다소 차이가 있을 수 있습니다.

 

이제 main의 클래스이름을 가지는 div 아래에 3개의 영역이 형성되었습니다. 정말 쉽네요!

특이하게도 기존에 웹에서 class라고 사용하였던 것을 React DOM Component에서는 className이라는 것으로 대체해서 사용하고 있네요.

 

컴포넌트는 개발자가 커스터마이징 할 수도 있습니다. App이라는 것은 여기서 사용하는 컴포넌트들 중에 하나입니다.

위의 div를 각각의 컴포넌트로 만들면 아래와 같이 가능할 것입니다.

 

header, body, footer component

이제 App 내에서 WatchHeader, WatchBody, WatchFooter의 Component를 사용할 수 있도록 만들었습니다. 

 

참고: https://enyobook.wordpress.com/2016/08/17/export-default%EC%97%90-%EB%8C%80%ED%95%B4/