1. 자바스크립트 전처리기(javascript preprocessor)를 JSX 문법을 지원하는 Babel로 설정
2. Quick-add로 React, React DOM을 추가

이미 위와 같이 설정해서 실습할 수 있도록 코드펜에 있는

https://codepen.io/kyagrd/pen/QrdXrm

위의 Pen을 fork해서 변경시키면서 tic-tac-toe 인터페이스를 만들어 보자.

React 홈페이지의 튜토리얼 중에서 일부를 실습해 보는 것이다.

코드에서 <Square /> 대신에 <Game />을 렌더링하도록 바꿔보자. 9개의 네모가 3x3으로 렌더링될 것이다.

네모칸 안에 숫자가 출력되도록 아래에 있는 내용을 따라해 보자.

https://reactjs.org/tutorial/tutorial.html#passing-data-through-props

<button> 태그는 리액트 라이브에서 제공하는 태그이다. 리액트에서 제공하는 태그 이외에도 React.Component를 상속한 클래스의 이름(우리 코드에서는 Square, Board, Game)을 JSX 문법을 통해 태그로 쓸 수 있다.

위 코드는 <button> 태그의 속성(props) 중 하나로 value를 지정해 렌더링할 때 거기에 값을 채워넣고 태그의 내용으로 그 똑같은 value 값을 나타나게 한 것이다.

사용자의 동작에 반응하여 동적으로 내용을 바꾸고자 할 때는 문서구조의 일부인 태그의 속성을 계속해서 변경하는 것보다는 컴포턴트에 새로운 상태 변수를 객체를 정의해서 거기에 객체의 상태를 저장하고 그 중에서 필요한 부분을 렌더링하는 것이 바람직하다.

클릭하면 내용이 X로 바뀌도록 아래에 있는 내용을 따라해 보자

https://reactjs.org/tutorial/tutorial.html#an-interactive-component

이제 네모칸 하나가 아니라 게임판 전체를 관리하는 Board에서 상태를 일괄적으로 관리하도록 바꾸어 보자. 왜냐하면 다음 단계에서 X와 O가 번갈아가며 놓아지도록 좀더 게임판처럼 만들어 볼텐데 그렇게 하려면 결국 Board에서 이런 것을 관리해 주어야 되므로, Square 객체 각각에서 상태를 관리하는 것보다 9개의 Square 객체를 렌더링해주는 Board 객체에서 일괄적으로 상태를 관리하는 것이 바람직하다.

여기서부터는 코드를 좀더 많이 변경하니 집중해서 하도록 하자. 일단 Square 객체에서 state를 관리할 필요가 없으므로 2단계에서 했던 변경을 다시 1단계의 상태로 돌려놓고 시작한다.

대신 Board에 state 객체를 만들어서 그 객체 안애 9개짜리 배열을 초기화하여 9개 칸의 상태를 일괄적으로 관리하도록 아래를 따라해 보자.

https://reactjs.org/tutorial/tutorial.html#lifting-state-up

O와 X가 번갈아가며 놓아지도록 Board의 state 객체에 변수를 하나 더 추가해 다음에 X를 놓을 차례인지 O를 넣을 차례인지를 저장하도록 다음을 따라해 보자.

https://reactjs.org/tutorial/tutorial.html#taking-turns

빈칸에만 놓을 수 있도록 추가 검사도 하고 빈칸이 아닌 곳에 놓을 경우 alert로 에러 메시지도 띄워줘보자.

여력이 되는 사람들은 React 홈페이지의 튜토리얼에 나온 다른 내용들도 따라해 보아도 좋다. 그런데 React 같은 어느 정도 큰 라이브러리로 프로그래밍을 하기에 CodePen은 그다지 좋은 환경은 아니다. 일단 복잡한 라이브러리에서 에러 메시지가 길게 나오는 경우에 제대로 출력해 주지를 못한다 (물론 자바스크립트 고수들은 코드펜에서도 에러 출력 폼을 자기들이 스스로 만들어 이벤트 잡아다 뿌리는 자바스크립트 코드를 날코딩해서 막 박아넣기도 하는데 ... 우린 그거 아직 잘 못하니깐).

더 복잡한 것들 특히 React 류의 프론트엔드 라이브러리를 온라인 웹기반 개발환경으로는 요즘 CodeSandBox 같은 걸 많이 쓴다 카더라 (모 IRC 서버의 모 채널에서 jaeholee님이 알려주셨습니다 감사)