Git이 설치되어있는 환경이라고 가정하고 작성하였습니다 :)
1. Node.js 다운로드
Node.js 다운로드 로 들어가 빨간박스를 클릭한 후 다운로드를 마친다.
다운로드가 잘 되었는지 확인하기 위해 cmd(윈도우)에서 node -version을 입력하여 버전을 확인한다.
2. React CDN 링크 추가 (스캐폴딩 없이 사용하는 방식)
에디터에 새 파일을 만든 후, React 홈페이지 > 문서 > CDN 링크에서 빨간박스 안 링크를 복사한다.
- CDN : Content Delivery Network
<title> 태그 아래에 붙여넣는다.
3. BABEL 링크 추가
BABEL홈페이지 > Setup > In the browser ( BABEL 링크 )에서 아래 파란표시의 링크만 가져와 CDN링크 아래에 붙여준다.
<script> 태그의 속성으로 type="text/babel"을 추가해준다.
- BABEL은 아래 사진과 같이 JSX를 순수 React 코드로 변환시켜주는 역할을 한다.
4. JSX문법으로 HTML태그 생성하는 과정
<div id="root"></div> 안에 <h1> 태그를 생성해보자.
h1변수를 JSX 방식으로 선언할 때는 실제 html에 들어갈 태그형식을 그대로 작성해주면 된다. 그리고 .render() 메소드를 사용하여 h1변수를 root변수 안에 생성되도록 작성해주면 끝!
- ReactDom.render : 선택된 요소를 React DOM에 추가하여 화면에 렌더링되도록 하는 함수
콘솔창을 통해 h1태그가 실제로 생성된 것을 볼 수 있다.
- 실제로 보이진 않지만, 위와같이 간단하게 작성된 JSX문법은 BABEL이 순수 리액트 문법으로 변환시킨다. 변환된 결과 :
- 그리고 이 순수 리액트로 변환된 것을 리액트 라이브러리가 순수 자바스크립트로 다시 한번 변환시켜 최종 반영한다. 결과 :
5. 시간 추출하기
- 순수 자바스크립트 방식
<body>
<div id="root"></div>
<script>
const $root = document.getElementById('root');
setInterval(function(){
const now = new Date();
const hh = now.getHours();//시
const mm = now.getMinutes();//분
const ss = now.getSeconds();//초
$root.innerHTML = `<h1>${hh}:${mm}:${ss}</h1>`;
},1000);
</script>
</body>1초마다 초단위가 변하는 것을 브라우저와 콘솔창을 통해서 확인할 수 있다.
- 순수 리액트 방식
<body>
<div id="root"></div>
<script type="text/babel">
const $root = document.querySelector('#root')
setInterval(function () {
const now = new Date()
const hh = now.getHours()
const mm = now.getMinutes()
const ss = now.getSeconds()
const $h1 = <h1>{hh} : {mm} : {ss}</h1>
ReactDOM.render($h1, $root);
}, 1000);
</script>
</body>리액트 방식을 이용하면 h1태그 전체가 아닌 '초' 단위만 새로고침되도록 할 수 있다. 간단해 보이지만 이 작은 작업이 트래픽과 관련되어 있어 동시접속자가 많은 홈페이지의 경우 트래픽을 최대한 낮추기 위해 이러한 기술을 많이 사용한다.
가치와 의미를 쫓는 개발자 되기✨