8. 모달, 이벤트버블링 방지

 

평소에는 보여지지 않다가 무엇을 누르면 보여지는 창

 

모달처럼 동적인 UI 만드는 과정

1. html 과 css 로 미리 디자인 완성
2. UI의 현재 상태를 state로 저장
3. state 에 따라 UI가 어떻게 보일지 조건 작성

 

---

 

 1. html 과 css 로 미리 디자인 완성 

// App.js

function Modal(){
  return (
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

 

/* App.css*/

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}

 

 

 2. UI의 현재 상태를 state로 저장 

 

// App.js

function App() {
    ...
    let [modal, setModal] = useState(false);
    ...
}

 

state 는 작명 아무렇게 가능하지만 state 변경 함수는 set 어쩌구 로 작명하는 것이 일반적이다.

 

모달은 화면에 보여지거나 안 보여지거나 이 두 상태밖에 없기 때문에 이에 대한 상태를 useState의 괄호 안에 작성해주면 된다.

 

일단 안보일 때는 false, 보일때는 true로 지정할 예정.0과 1 혹은 '닫힘'과 '열림' 등과 같이 형식은 자유롭게 가능하다. 

 

 

 3.  state 에 따라 UI가 어떻게 보일지 조건 작성 

 

html 파일이기 때문에 if 문이 아닌 삼항연산자를 사용해야한다. 

 

// App.js

function App() {
    ...
    <h4 onClick={()=>{ setModal(true) }}>모달 띄울래?</h4>
    ...
    {modal == true ? <Modal/> : null}
}

 

state의 상태를 변경하기 때문에 setModal 을 사용해야 한다.

 

만약 한 번 더 누르면 모달 창이 사라지도록 구현하려면 아래와 같이 삼항연산자를 사용하면 된다.

// App.js

function App() {
    ...
    <h4 onClick={()=>{ 
        modal==false ? setModal(true) : setModal(false); 
    }}>모달 띄울래?</h4>
    ...
    {modal == true ? <Modal/> : null}
}

 

---

 이벤트 버블링 

 

일단 먼저 좋아요 버튼만 3번 눌러보자

 

 

이렇게 원치않게 모달창도 켜졌다가 꺼진다. 먼저 코드를 살펴보면  좋아요를 누르면 span 태그의 상위태그에 h4 태그와 div 태그가 있기 때문이다. 

이러한 현상을   이벤트버블링 이라고한다.

 

{
    title.map(function(a, i){
        return (
            <div className="list" key={i}>
                <h4 onClick={()=>{modal == false ? setModal(true) : setModal(false); setChangeTitle(i) }}>
                    { a }
                    <span onClick={()=>{
                        let num=[...like];
                        num[i] = num[i]+1
                        setLike(num);
                    }}>👍</span> {like[i]}
                </h4>
                <p>언젠가 발행</p>
            </div>
        )
    })
}

 

 

상위 html 로 퍼지는 이벤트버블링을 막고 싶다면 span 태그  e.Propagation()  을 사용한다.

 

<span onClick={(e)=>{ e.stopPropagation(); let num=[...like]; num[i] = num[i]+1 setLike(num); }}>👍</span>