[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (4)

[ 오늘의 작업 과정 ]

- 게임이 종료 되었을 때 나오는 다시 하기 모달창 미리 만들어두기

---

 css로 모달창은 미리 만들었고 게임이 종료되었을 때 모달창이 나오도록 해야하지만 아직 게임 종료 상황 코드를 짜지 않아서 임시로 오목판을 클릭했을 때 모달창이 나오도록 해서 정상적으로 나오나 테스트 했다.

 Modal 컴포넌트를 따로 만들어 앞서 미리 UI 디자인한 코드를 넣고 useState() 함수로 UI의 상태를 담을 state를 만들어 true이면 Modal 컴포넌트가 나오고 false면 null 값이 되도록 했다. 아래 코드이다. 

function Game2() {
  var [modal, setModal] = useState(false); // 다시하기 모달창

  return (
    <>
      {/* 다시 하기 모달창 */}
      {modal ? <Modal/> : null}

      {/* 오목판 */}
      <table className="tb2" onClick={() => {
        return setModal(true)
      }}>
    ... 생략
      </table>
    </>
  );
}

function Modal(){
  return (
    <>
      <div style={{background: "white", width: "190px",height: "145px",borderRadius: "10px",padding: "20px", position: "absolute",margin: "20% 33%"}}>
        <p style={{ marginBottom: "40px", fontSize: "17px" }}>🏆️ 흰 돌 승리! </p>
        <button style={{  marginBottom: "30px", border: "none",height: "35px",background: "#3369fe", color: "#eee", borderRadius: "5px"}}
        >다시 하기</button>
      </div>
    </>
  )
}

 

[ Trouble - Shooting ]

 - 문제 : 다음 단계로 모달창이 뜬 후 다시 하기 버튼을 누르면 모달창이 사라지도록 하기 위해 자식 컴포넌트인 Modal에서 버튼을 눌렀을 때 setModal(false)값이 되도록 코드를 짰지만 에러가 났다. 

 

- 해결 : 찾아보니 props 값은 자식 컴포넌트 내부에서 변경할 수 없다는 사실을 알게 되었다. 넘겨 받은 그대로 사용해야 한다. (ㄴ부모 컴포넌트에서 set~이런식으로 쓸 수 있다.)

 부모 컴포넌트에서 다시 하기 버튼 상태를 조작해야 해서 resetBtn 함수를 만들어 버튼을 누르면 setModal(false)가 되도록 해 modal 상태가 null로 바뀌도록 했다.  이제 이 state를 자식 컴포넌트인 Modal로 전해주기 위해 부모 컴포넌트에서 자식 컴포넌트를 사용하는 부분인 삼항 연산자 부분에서 resetBtn 함수를 넣고 자식 컴포넌트에서는 props로 이 상태를 전송 받도록 했다.

 var [modal, setModal] = useState(false); // 다시하기 모달창

const resetBtn = () => {
    // "다시 하기" 버튼 클릭 시 modal 값을 false로 변경
    setModal(false);
  };

  return (
    <>
      {/* 다시 하기 모달창 */}
      {modal ? <Modal reset={resetBtn}/> : null}

      {/* 오목판 */}

      <table className="tb2" onClick={() => {
        return setModal(true)
      }}>
  ... 생략
      </table>
    </>
  );
}

function Modal(props){
  return (
    <>
  ... 생략
        <button style={{  marginBottom: "30px", border: "none",height: "35px",background: "#3369fe", color: "#eee", borderRadius: "5px"}}
                onClick={props.reset}>다시 하기</button>
      </div>
    </>
  )
}

 

정상적으로 동작한다.