[React 기초] 끝말잇기 게임 React로 만들기

바로 지난시간 끝말잇기 게임에 대한 자바스크립트로 과거 공부한 것을 복습해 보았습니다. 이제 이 부분을 React Hooks로 만들어 볼 차례입니다. 지금 참고하고 있는 강좌에서는 좀 더 간단한 예제로 진행을 해서 스스로 만들어 본 자바스크립트를 React로 적용하는 과정에서 많은 시행착오를 겪었내요. 시행착오를 다시 겪지 않기위해 이 곳에 정리해 봅니다. 

 

▒ React 끝말잇기 게임 

 

1. 함수 콤포너트 변수 설정

 

초보자로서 React를 한다는 것은 어떤 변수가 사용될지에 90%이상 성공확률이 있다고 볼 수 있습니다. 자바스크립트에 사용되었던 변수가 그대로 변수로 된다면 더할 나위 없겠지만 그렇지가 않다는 겁니다. 

 

지난번 자바스크립트로 만든 결과물은 아래와 같았습니다.

 

 

위 그림을 기준으로 고민을 해 보면 

각각의 숫자는 <div>태그와 <input>태그 <button>태그가 반영이 되는 곳으로 React의 render(  ) 함수내에 적용될 그림입니다. 총 7개의 영역으로 나뉩니다. 

 

이제 React에서 사용될 변수를 확인해야 하는데 변수로 잡는다는 것은 state를 확인하는 과정입니다. state는 어떠한 반응에 의해 변하는 상태를 말하는데 위 그림에서 주황색 사각형이 변하는 state입니다. 따라서 총 5개의 변수가 필요합니다. 

 

 

 

참고로 그림에서 표현되는 CSS는 나중에 적용되어도 되기때문에 여기서는 다루지 않겠습니다. 

 

2. HTML 영역 : 7개의 <div>영역내 5개의 state 변수 적용

 

render(  ) 함수내 HTML 영역을 설계해야 합니다. 이 곳은 최종적으로 id가 root인 최초 <div>태그에 그려지는 곳으로 외부 함수로 사용될 부분도 이곳에서 설정합니다. 

 

 

 

상기 코드에서 변수로 설정된 내용 5개가 전부 반영이 되었는데 word 대신 lastWordColor(  )라는 함수가 객체로 변수 자리에 반영이 되었습니다. 이는 끝말에 다른 색을 표시하기 위한 함수로 만일 색을 지정하지 않았다면 기존의 변수인 word가 사용되었을 겁니다. 

 

각각의 함수에 대해 이야기 나눠 보죠. 

 

3. addEventLisner와 같은 반응형 함수 작성

 

자바스크립트에서는 input을 할때 value의 변화가 있었고 이에 따른 button에서 onClick함수를 통해 반응형 콜백함수(addEventListner)를 사용하였는데 지금 만들고 있는 React에서 함수로 처리하면 됩니다. 

 

① <form>태그에 반영 함수 

 

<form> 태그 안에는 <input>태그와 <button>태그를 지정해 봅니다. 먼저 <input>태그는 직접 단어를 입력하는 곳으로 e.target.value가 사용되는 곳이죠. 

 

set변수명을 사용하는 것은 알고 있겠죠.

 

 

 

 

 

보통 입력하고 결과를 확인하는 경우 button에서 클릭하는데 엔터키를 사용해도 되는 함수를 다음과 같이 만들어 줍니다. 이는 입력한 단어를 form에서 제출(submit)할때 같이 연동 시킵니다. 

 

 

 

이제 <form>태그에 submit할때 사용하는 함수를 작성하는데 이 곳이 결국 main이겠죠. 모든 프로그램이 반영이 되는 곳이니까요. 

 

 

 

다른 부분은 이해가 될 것으로 보고 단어 끝 색깔을 바꾸는 함수를 lastWordColor(  )로 반영을 하였고 순서가 바뀌는 함수를 updateOrder(  ) 함수로 반영을 하였습니다. 

 

② last WordColor(  ) 함수

 

이는 기존에 설명한 것 처럼 두글자 단어의 끝 색깔에 변화를 주는 함수입니다. slice(  ) 함수로 맨 끝단어를 선택하고 자바스크립트의 css 반영 툴을 이용해서 다음과 같이 만듭니다. 

 

 

 

이는 자바스크립트에서 JSX문법으로 가는 과정인데 JS에서 innerHTML 삽입하는 일반적인 문구를 함수안에서 return시킬때 사용하는 dangerouslySetInnerHTML을 사용하였습니다. 

 

③ updateOrder(  ) 함수 

 

순서를 바꾸어주는 함수입니다. 

기준이 되는 것은 order변수에 최초 시작을 '1'로 반영을 하고 나머지 수를 구한 값에 순서를 늘려가는 과정입니다. 즉, 다시 참가자수를 넘게 되면 1로 돌아오는 구조이지요. 

 

 

 

물론 지금 적용한 함수들은 생각해 볼 내용이 많고 공부해야 할 부분도 많습니다. 이러한 원리를 이해하는데도 많은 시간과  노력이 필요하구요. 

 

4. 전체 코드 

 

이제 전체코드를 공유하도록 하겠습니다.