React 기본 : 끝말잇기 프로그램 만들기 (WordRelay.jsx 파일 만들기)

본 내용은 ZeroCho TV의 무료 웹강좌를 기본으로 정리하고 있는 React 내용입니다. 

 

 

Webpack의 Build도 성공하였으니 다양한 프로그램을 따라 공부하면서 나만의 실력을 키울 첫번째 과정입니다. 여러가지 Package중에서 중요한 역할을 담당하고 있는 webpack.config.js 파일에서 약간 더 보충이 되어야 할 내용이 있어 첨가합니다. 

 

---

 

▒ webpack.config.js 파일의 구성요소

 

지난시간까지는 입력 entry >> module >> output 의 순서로 기억 했습니다. 

여기서 좀 더 추가할 부분은 프로그램에 필요한 플러그인이 필요한데 그러기 위해서는 entry >> module >> plugins >> output으로 기억해 놓는게 기본이라고 합니다. 

 

아울러 module에서 다양한 브라우저 환경을 적용시키는 역할을 하는 곳이 @babel/preset-env 였는데 일정량의 target을 설정해 줘야 빌드하는데에 따른 시간이 절약될 수 있습니다. 따라서 다음과 같이 배열안에 배열로 한국에서 5% 이상 쉐어가 있는 브라우저에게만 지원하도록 만들어 줍니다. (물론, 해당 조건은 임의로 바꿀 수 있습니다. 검색에서 react browserlist를 찾으면 됩니다. )

 

 

---

 

▒ WordRelay.jsx 파일 프로그래밍

 

지난 시간까지는 WordRelay.jsx 파일의 내용을 text로 문제가 없는지 확인만 하였습니다. 이제 이 곳에서 끝말잇기라는 프로그램을 따라서 해보도록 하겠습니다. 

 

바뀌는 부분은 항상 state라고 했으니 word, value, result는 기본적으로 state가 되겠습니다. 

 

1. 기본틀 갖추기 

 

state에 들어가는 내용들을 rendering시키는 기본 형태는 다음과 같습니다. 사실 초기 구구단 프로그램 따라할때와 같은 포맷입니다. 

 

 

 

2. 참조되는 함수 정의 (Class Method)

 

기본틀이 참조하는 항목들이 어떤 함수로 되어있는지 정의를 해줍니다. state를 제외한 this.으로 붙은 항목을 함수화 시킵니다. 

 

① Class Method를 이용하여 함수화 되는 항목은 onSubmitForm, onRefInput, onChangeInput 입니다. 

 

 

 

② onChange에서 setState 설정

 

state가 있는곳의 결과 값은 setState로 항상 받도록 합니다. 

 

 

 

③ onSubmitForm에 끝말잇기 로직만들기

 

if... else문을 이용하여 끝말잇기 로직을 만들어 프로그래밍을 하는 곳입니다. 

 

 

 

 

설명을 곁들이자면,

 

단어의 맨마지막 글자(this.state.word.legnth-1)가 입력하는 단어의 첫번째 글자(this.state.value[0])와 같다면 setState의 결과는 Good Job을 나타내고 입력한 value가 word로 나타내어 지고 value값은 다시 공란으로 놔두라는 의미가 첫번째 if문에 대한 해석이고 

 

그렇지 않으면 (else) 결과 result는 Try Again이고 value 상태는 공란으로 바뀌는 프로그램입니다. 

 

이제, 다음 시간에 본 프로그램을 wevpack으로 빌드해서 에러가 있는지 있으면 수정을 하고 없으면 프로그램이 잘 작동되는지 확인해 보도록 하겠습니다.