프로그래밍 공부 일기

2020년 6월 22일 Progate Lv.144
React III
모달 (팝업)에 대해 배웠습니다.

모달 숨기기

모달은 클릭에 의해 표시/비표시가 바뀐다. 그래서, 모달이 표시되어 있는지 어떤지의 정보를 state로 한다.
isModalOpen이라는 진위치형의 state를 준비해, true이면 표시, false이면 비표시로 한다. 즉, true일 때는 모달의 JSX가 존재하고, false일 때는 모달의 JSX는 존재하지 않게 한다.

lesson.js (state 정의)

class Lesson extends React.Component{
  constructor(props){
    super(props);
    this.props={isModalOpen:false}
  };
...

JSX 및 변수

JSX는 변수에 대입해, {変数名} 로 표시할 수 있다.

sample.js

render(){
  let text=<p>Hello Reacr</p>
  return(
    <div>
      <h1>Hello World</h1>
      {text}
    </div>
  );
}

변수 text에 대입한 JSX를 표시하고 있다.

JSX와 if 문

isModalOpen이 true일 때만 표시한다. 변수 모드를 준비하여 조건 분기를 수행합니다.

Lesson.js

render()[
  let modal;
  if(this.state.isModalOpen){  //isModalOpenがtrueのときに実行される
    modai= //modalのJSX部分
  }
  return(
    ...
    <div>
      <p>{this.props.name}<p/>
      {modal}  //変数modalに代入されたJSXが表示される。
    </div>
   ...

모달 표시

Lessonjs (state를 변경하는 메소드 작성)

handleClickLesson(){
  this.setState({isModal:true});

Lessonjs (메소드를 호출하는 onClick 이벤트 설정)

//画像をクリックしたときにモーダルを表示
<img src={this.props.image} 
     {onClick={()=> {this.handleClickLesson()} } />

모달 숨기기

"트위닝"버튼을 클릭하면 모달을 닫습니다.

Lessonjs (state를 변경하는 메소드 작성)

handleClickClose(){
  this.setState({isModal:false});

Lessonjs (메소드를 호출하는 onClick 이벤트 설정)

//画像をクリックしたときにモーダルを表示
<img src={this.props.image} 
     {onClick={()=> {this.handleClickClose()} } />

테스트 코드

Lesson.js

import React from 'react';

class Lesson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }

  handleClickLesson() {
    this.setState({isModalOpen: true});
  }

  handleClickClose(){
    this.setState({isModalOpen:false});
  }

  render() {
    let modal;
    if (this.state.isModalOpen) {
      modal = (
        <div className='modal'>
          <div className='modal-inner'>
            <div className='modal-header'></div>
            <div className='modal-introduction'>
              <h2>{this.props.name}</h2>
              <p>{this.props.introduction}</p>
            </div>
            <button
              className='modal-close-btn'
              onClick={()=>{this.handleClickClose()}}
            >
              とじる
            </button>
          </div>
        </div>
      );
    }

    return (
      <div className='lesson-card'>
        <div
          className='lesson-item'
          onClick={() => {this.handleClickLesson()}}
        >
          <p>{this.props.name}</p>
          <img src={this.props.image} />
        </div>
        {modal}
      </div>
    );
  }
}

export default Lesson;