[React 기초] React 간단 예제 - 구구단 게임 : Hooks 및 CSS 적용

지난시간까지 만들어 본 구구단 게임관련 CSS를 적용하여 좀 더 시각적으로 만들어 보는 연습을 해 보겠습니다. 

아직까지는 HTML 구문에서 React를 사용하기 때문에 <style>태그를 이용하여 만들 수 있습니다. 

 

<style>에서 중점으로 생각했던 포인트는 

 

① 구구단 게임이 나오는 영역과 바탕영역을 구분해 보고 싶었고

② 3항 연산자를 사용하여 정답일경우 Green색으로 오답일 경우 Red색으로 구분

 

이 주된 목적으로 다음과 같이 작성할 수 있을 것 같습니다. 

 

먼저 id가 root인 <div>태그를 id를 하나더 만들어 구분해 줍니다. 

 

 

이제 <style>태그를 만들어 봅니다. 이는 개인별 취향이 다른 분야로 각자 만들어 보길 권장합니다. 

그리고 3항 연산자가 적용될 <div>태그는 id가 result인 곳에서 class이름을 정답과 오답을 구분해서 만들어 봅니다. 

 

 

 

웹에서 결과를 한번 보겠습니다. 

 

 

 

전체 코드는 다음과 같습니다. 

 

 

 

이제 React의 원시적 방법에 대해 공부해 보았으니 많은 사람들이 사용하는 웹팩을 공부하면서 강좌를 따라 가보도록 하겠습니다.