- 출처 : 소플의 처음 만난 리액트
# 시계 만들기
- Vscode에서 전 실습 때 만들었던
my-app프로젝트를 엽니다. (사용자폴더에 있을 것) src에chapter_04폴더를 하나 만듭니다.
만든 폴더에
Clock.jsx파일을 새로 만들고 다음과 같이 코드를 작성합니다.
- Clock이라는 이름의 리액트 함수 컴포넌트를 하나 만듭니다.
- Clock 컴포넌트는 현재 시간을 출력하는 아주 간단한 컴포넌트입니다.
다음으로, 만든 컴포넌트를 실제 화면에 렌더링하기 위해서 index.jsx 파일을 수정해야 합니다.
수정한 부분은
setInterval() 함수를 사용해서 1000ms마다 새로운 Clock 컴포넌트를 root div에 렌더링하도록 만든 코드입니다.
이렇게 하면 매초 Clock 컴포넌트의 엘리먼트가 새롭게 생성될 것입니다.
- 강의와 버전이 달라 다르게 작성해야 했습니다
( ∵ ReactDOM을 import할 수 없습니다. )
모든 코드 작성이 끝났으면 이제 실제로 리액트 애플리케이션을 실행해보도록 하겠습니다.
- VsCode 상단 메뉴에서 Terminal>new Terminal을 눌러서 새로운 터미널을 하나 실행시킵니다.
- 이후 npm start 명령어를 실행합니다.
- 그러면 잠시후 웹브라우저 새창이 열리면서 localhost 3000번 포트에 접속되는 것을 볼 수 있습니다.
- 그 후에 개발자 도구를 열어 요소 탭에서 root div를 쭉 펼쳐 보면 매초 시간이 바뀌면서 변경된 부분이 깜빡이는 것을 볼 수 있습니다.
📍정리
React element
- 개념: 리액트를 구성하는 작은 블럭들
- 특징: 불변성
- element Rendering : 만든 컴포넌트를 실제 화면에 렌더링하기 위해서 index.jsx 파일을 수정해야 합니다.
다음시간에는 React의 컴포넌트와 props에 대해 살펴보겠습니다.
🌻