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

지난 글에서 Component를 만드는 방법을 알아보았다면 이번 글에서는 본격적으로 JavaScript가 어떻게 적용되는지 살펴보려고 합니다.

 

가장 먼저 WatchBody부분에 div를 하나 추가하여 시계가 들어갈 위치를 설정합니다.

 

 

클래스명을 js-clock으로 추가한 후 위의 div를 선택할 수 있는 선택자를 생성합니다. 

 

이제 선택자를 추가하였다면 스크립트에서 시간에 해당하는 함수를 넣어주어야 합니다.

이전에 JavaScript의 기본 문법에서 확인할 수 있듯이 document.querySelector는 아래와 같습니다.

 

querySelector(".className") : 클래스명이 className으로 정의된 태그를 선택

( == getElementByClassName와 같은 역할)

querySelector("tag") : 태그명이 tag인것을 순차적으로 선택

 

근데 문제는 위와 같이 선택자를 하여 생성을 하여도 null이 출력됩니다.

원인은 바로 React의 특성때문인데요, 아직 화면에 렌더링이 되지 않은 상태에서 선택을 하기 때문입니다.

즉, index.js의 ReactDOM.render() 함수가 호출된 후에 선택자가 작동되기 때문입니다.

 

먼저 작동이 되게 하기 위해서는 index.js 파일로 다시 넘어와서 같은 소스를 작성해줍니다.

 

이후에 아래와 같이 소스를 작성해줍니다.

 

시간을 출력하는 함수

위에 작성된대로 화면에 출력을 하게 되면 현재 시간이 매 1초마다 리프레쉬되면서 출력되는 것을 확인할 수 있습니다.

getTime 함수를 확인하면 함수가 호출될때마다 new Date()로 새로운 생성자를 호출하여 그 시간을 가져오는 변수들을 아래에 선언하고 innerText를 통하여 위에서 선택자로 생성한 태그 내에 set하는 것을 확인할 수 있습니다.

 

setInterval 함수는 특정 함수를 특정 시간 단위(ms)로 호출하도록 만드는 함수입니다. 

 

하지만 여기서는 문제가 있는 것이 현재 시간(시,분,초)중 10의 자리가 아닌 1의 자리인 경우 아래와 같이 이상하게 출력됩니다.

그래서 이 부분을 삼항연산자를 통하여 변경해주려 합니다.

clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;

이렇게 한 줄로 되어 있어 조금 복잡하게 느껴질 수도 있지만, 이런 방식을 자주 사용하여 간편하게 함수를 작성해주는 것이 꿀팁입니다.

위의 내용은 hours를 기준으로 체크하자면, 값이 10 미만인 경우 String 객체 앞에 0을 붙여 호출하겠다는 의미이며 minutes와 seconds의 변수도 마찬가지로 적용하게 됩니다. 함수로 설정하여 호출하면 아래와 같을 것입니다.

 

이렇게 출력하면 0초인 경우에도 화면에 `00`으로 뿌려주도록 설정할 수 있습니다. 

하지만 이렇게 index.js에 작성하게 되면 너무 중구난방하게 소스가 작성되어 일반적으로 JavaScript를 사용하는 것과 크게 차이가 없습니다.

 

이 부분을 간략화 시키는 것을 다음에 작성해보도록 하겠습니다.

 

임시 최종 소스