-
React 기본 : 구구단 프로그램을 통한 React State와 Class Method 개념 이해컴퓨터 알아가기/React 2021. 6. 30. 19:30728x90반응형
본 써머리는 ZeroCho TV의 React 강의를 기본으로 작성하고 있습니다.
React를 배워보고자 하지만 워낙 잘 알지도 못하기때문에 코딩 하나하나 좀 더 파악하고 가는게 목적입니다. 구구단 프로그램을 통해서 코딩 한줄한줄이 어떤 의미인지 알고자 하는게 더 큰 목적이라고 볼 수 있습니다.
React에서 State란 변할수 있는 여지가 있는 것이라고 했습니다. 하나의 Form에 구구단의 답을 입력해서 정답과 오답을 나타낸다고 가정할 때 정답과 오답은 변할 수 있는 상태이므로 State라고 할 수 있겠습니다.
기본적인 <body> 태그를 나타내 보겠습니다.
① 구구단 클래스 Component를 정의하고
② 이 내용을 화면에 그리겠다
라는 기본 틀은 다음과 같습니다.
③ this.state를 통해 바뀌는 부분을 정의해줍니다.
바뀌는 부분을 생각해 보면 아래 그림에서 빨간색이 바뀌는 부분입니다.
총 4군데가 변하는 곳이므로 첫번째, 두번째 숫자는 1 ~ 9까지 random하게 나타내고, 정답을 입력하는 입력창과 정답여부를 나타내는 결과값도 표시를 해줍니다.
다음과 같습니다.
부연 설명을 하자면,
Math.random( )함수는 0 ~ 1 사이의 소수점을 임의로 나타내는 함수이며, Math.random( ) * 9는 결국 1부터 ~ 8까지 소수점을 포함하는 값을 나타냅니다.
Math.ceil( )함수는 정수일때는 자기자신을 나타내나 소수점인 경우 값을 올려 정수를 반환하는 함수입니다. 다음 콘솔을 보면 알 수 있습니다.
④ return( ) 함수에 State를 설명해 줍니다.
JSX 문법을 사용하여 (중괄호 { }를 사용하여) 설명해줍니다.
브라우저로 보면 다음과 같이 나옵니다.
그런데, 정답을 입력하는 입력창은 임의로 숫자가 나오는게 아니라 상태를 수동으로 변하게 하는 것이기 때문에 (값을 입력하는 것이기 때문에) setState를 사용해야 된다고 합니다.
또한, 키보드 입력이 <form> 태그안에 키인이 되지 않습니다. 이는 console창에서 보면 onChange 함수를 사용하라고 에러가 뜹니다.
▶ onChange( ) 함수
input된 숫자를 this.setState로 사용합니다. 그리고 값이 변경될 때 사용되는 onChange( )함수를 사용하여 값이 변경될 때 마다 각각의 동작을 실행시키는 형태로 만들어 줍니다.
상기 코드에서 (e) => this.setState( )함수는 보통 e를 event로 사용하는 경우가 많습니다.
React에서는 상기 onChange( ) 함수가 길기때문에 this로 받아주면서 외부에 onChange( )함수내역을 표시합니다. 다음과 같이 코딩합니다.
상기와 같이 onChange( )함수를 외부에 정의해놓고 태그안에서 연결시키는 방법을 클래스메소드 (class method)라고 합니다.
이제 키인은 되는데 결과값이 나오지 않습니다. 제출을 하기 위해서는 onSubmit함수도 활용해야 겠습니다.
▶ onSubmit( ) 함수
onSubmit( )함수는 <form>태그내에 결과값을 넣고자할때 사용하는 함수입니다. 역시 클래스메소드를 이용하여 <form>태그내에는 <form onSubmit = {this.onSubmit} > 형식으로 변환해 줍니다.
onSubmit = (e) => { } 형식으로 중괄호안에 "정답"과 "오답"을 if문을 통해 정의해 줍니다.
이중에서 preventDefault( )함수를 먼저 선언하는데 이는 버튼을 눌렀을경우 새로운 창이 열리지 않게 해주는 역할을 담당합니다.
클래스메소드를 이용하여 onChange( )함수처럼 외부에 정의하고 render( )함수내에는 this로 받아줍니다.
※ on Submit 내용을 좀 더 자세히 설명하면 다음과 같습니다.
→ if ~ else문을 사용
if A else B 는 A의 로직이 맞으면 A 값을 나타내고 그렇지 않으면 B값을 나타내라라는 뜻입니다.
즉, 첫째값 * 둘째값이 정답이면 순서대로 정답이라는 글이 나타나고 두번째 랜덤값과 세번째 렌덤값이 다시 나타나고 Value값은 없어집니다.
만일 정답이 아니면 오답이라는 글이 나타나고 랜덤값들은 변하지 않고 Value 값은 없어집니다.
아래 브라우저를 보면 첫번째 그림은 구구단 문제출제이고, 두번째 그림은 정답을 입력했을때 화면 세번째 화면은 오답을 입력했을때 화면입니다.
문제출제 모습 
정답과 함께 다른문제가 출제된 모습 
오답일 경우 문제는 변하지 않음 여기까지 공부를 했는데 갑자기 숙제를 내주네요.
예를 들어 2곱하기3에 대한 정답을 입력하면 2 * 3 = 6 정답이라는 글이 나오고 랜덤 숫자는 다른것으로 바뀌게 하는 것은 어떻게 될까요?
기초가 탄탄하지 않지만 해 볼렵니다.
반응형'컴퓨터 알아가기 > React' 카테고리의 다른 글
React 기본 : React Hooks의 개념 (0) 2021.07.05 React 기본 : 함수형 setState, < >태그, Fragment, 함수형 Ref (0) 2021.07.01 React 기본 : React State 개념, JSX문법, Babel (0) 2021.06.29 React 기본 : React Component에 대한 개념 (HTML속성과의 관계 및 State)과 Chrome React 확장 (0) 2021.06.28 React 기본 : React Component에 대한 개념 (React 기본구조) (0) 2021.06.24