[React] 모달창 만들기 (feat. 코딩애플 리액트 강의)

박윤혜·2023년 10월 18일

Back To Basic

목록 보기

17/23

오늘의 고민 소스

버튼을 클릭했을 때 모달창이 뜨고 다시 버튼을 클릭했을 때 모달창이 사라지게 하려면 어떻게 해야 할까? 🤔

들어가기 전에

자바스크립트로 작성 시 변수에 값을 저장하고 재사용할 때마다, 즉 변수 값이 바뀔 때마다 html을 직접 렌더링 해줘야 했다.
ex. document.getElementById('box').innerText = ~~

하지만 리액트에는 html 재렌더링 과정을 자동적으로 실행하는 state가 있다! 그만큼 코드 효율성이 좋아지는 이점이 있는 동시에 주의할 사항도 생긴다. 바로 값을 변경하려고 할 때 접근 방식이 달라져야 한다는 거다. 이젠 직접 html 요소에 접근할 필요가 없다.

대신 스위치 On/Off 하듯 state를 어떻게 변경할지 고민해야 한다. 지금 하려는 작업은 툴킷, 사이드바, 팝업창, 버튼 등의 구현 작업과 본질적으로 똑같다. 클릭하면 특정 component를 보여주고, 다시 클릭하면 그 component가 사라진다. 자바스크립트의 toggleClass 활용법과 유사하다고 느꼈다.

차근차근 문제를 해결해보자.

단계 쪼개기

1. 버튼을 클릭하면 Modal이 보이게

Modal component부터 만들자.

// app.js
function Modal(){
    return (
    <div className="box">
      <h4>Title</h4>
      <p>Contents</p>
      <span>Date</span>
    </div>
    )
}

/* app.css */
.box {
  width: 250px;
  height: 200px;
  background-color: antiquewhite;
  text-align: left;
  margin: 10px;
  padding: 15px;
}

div에 간단한 속성을 넣어주어 위 움짤 같은 베이지 색 박스로 만들었다.

🔍 button을 클릭하면 Modal이 보인다는 게 어떤 의미일까?

초기화면엔 Modal이 보이지 않아야 한다.
- 보이지 않았다가 보이는 상태로 바뀌는 것이므로 state도 이용해준다.
- state의 초기값은 보여짐(true)과 보이지 않음(false) 중 후자!
button에 onClick 이벤트를 걸어준다.
- modal이 true가 되었을 때만 보여주고, 그렇지 않으면 보여주지 않는다.
- 즉 요소를 삽입할 곳에 조건식을 달아줘야 한다.
- if문은 JSX에서 사용할 수 없으므로 삼항 조건 연산자를 사용한다.

// app.js

function app() {
  const [modal, setModal] = useState(false);
  
  return (
    // 버튼을 클릭하면 modal이 true로 바뀐다.
   <button onClick={setModal(true)}>Modal Switch</button>

	// modal이 true일 때만 component를 보여준다.
      {
        modal === true ? <Modal /> : null
      }
        
    </div>

   )
}

여기까지 완성! 삼항 조건 연산자만 쓸 수 있단 점을 강의에서 듣고 해결할 수 있었다.

난관은 그 다음..

2. 다시 클릭하면 Modal이 사라지게

강의는 들었어도 프로그래밍 경험이 거의 없어선지 조건을 파악하고 적용하는 데에 오래 걸렸다. (1시간......) 답지를 너무너무 열어보고 싶었지만, 최소 하루는 고민해 보라는 말을 읽고 꾹 참았다.

아오 그냥 속시원하게 답 볼까? 마음이 근질거릴 때

마인드 세팅하기
ex. 모달은 여러모로 쓰이는 곳이 많으니까 첫 단추를 제대로 꿰어줘야 다른 곳에도 적용할 수 있다. 모두 다 내 힘으로 해결할 훗날을 위해 지금은 스스로 생각하기!

수강생/공부 후기 구경
혼자 고민하고, 구글링 해보고, 하루 지나고 다시 해보며 실력이 늘었다는 심금 울리는 경험담이 꼭 있다. 그 결과를 위해서는 지금을 견디자.

강의 다시 보기
분명 배운 내용에 해결 방법이 담겨있다. 필기하지 말고 눈과 귀를 열에 온 신경을 집중 해본다.

관련 키워드 구글링
공식문서의 설명과 예시를 보는 게 좋은 것 같다. 개인 블로그 글은 대놓고 답 코드가 있는 경우가 다반사라서..

막혔던 지점

setModal과 modal에 다른 값이 담기는 줄
state를 선언할 때 배열의 두번째 변수는 전자의 값을 바꿔주는 함수를 담은 것이다. 이 경우엔 setModal이 modal값을 바꿔주는 함수다. 곧 setModal(true)를 입력하는 순간 modal 값도 true! 이걸 헷갈려서 오래 삽질했다.
그럼 어느 부분을 건드려야 하지?
강의에서 조건식이라는 힌트는 얻었는데.. 1번을 해결하며 작성한 조건식은 Modal 보여주기/안 보이기에 대한 내용이었다. 그런데 Modal이 on이었을 때와 off일 때를 구분해서 조건식을 넣어주려면 onClick 부분을 수정해야 할 것 같은데?
onClick의 setModal을 어떻게 바꿀까?
modal===true ? <Modal /> : null과 형태는 거의 동일하다.
다만 클릭할 때 / 모달이 true면 / 모달을 false로 값을 바꿔주고 / 그렇지 않으면 모달을 true로 바꾼다. 즉 setModal 함수 안에 조건식을, 조건의 참과 거짓 실행문에 setModal(false)와 setModal(true)를 넣어줘야겠는데?

해결

머리를 쥐어 뜯는 고민 끝에 답을 냈다.

// button과 조건식 부분만 작성

   <button onClick={
    ()=>{modal === true ? setModal(false) : setModal(true)}
    }>Modal Switch</button>

   {
     modal === true ? <Modal /> : null
   }

onClick={ 함수 }
1) 외부에 함수를 작성한 후 해당 함수명을 적거나
2) onClick={ ()=>{} } 로 작성한다. 물론 내부 함수를 재사용 할 것 같으면 기명함수로 적는 게 좋음!

작성하고 보니 얼떨떨했다. 분명 사고의 흐름을 거쳐 나온 결과였으나, 이게 왜 되는가 하면서 다시 코드를 되짚어보며 정리했다.

이보다 더 쉬운 방법이 있었으니..

드디어 열어 본 답지에는 modal === true ? setModal(false) : setModal(true) 를 아주 간단히 만드는 방법이 있었다.

   <button onClick={setModal(!modal)}>Modal Switch</button>
                 
   {
   	   modal === true ? <Modal /> : null
   }

모달은 기본적으로 on/off를 딸깍이는 거다. 이걸 if문의 참/거짓으로 로직화한 건데 참과 거짓에서 건드리는 부분이 동일(setModal)하고 그 결과값이 true/false라면, not 논리 연산자를 활용하기 좋다.

그래서setModal(!modal) 이거 하나로 저 조건식을 간결하게 표현할 수 있다.

소감

강의가 핵심을 간결하게 전달해주면 재밌듯이 코드도 간결하게 핵심만 전달할 수 있게 짜는 재미가 있는 것 같다. 리액트가 재밌는 건지 강사 분이 재밌는 건지..
블로그 쓰면서 거의 처음으로 내 스스로 생각하고 생각의 흐름을 풀어 썼다! 👏
하루동안 고민하라기에 그럼 오늘 더 들으려던 강의는..? 겨우 1개 듣고 말아야 하나..? 내일 옆자리 사람에게 물어볼까...? 근데 그럼 답을 내가 찾은 게 아니잖아..? 별별 생각하다가 오늘 해결하면 다음 강의 듣고 계획대로 더 할 수 있네. 그럼 해보자! 는 마음으로 고쳐먹었다. 훗날의 나를 위해서도 기억하고 싶은 다짐.
고민은 손으로 직접 써보는 게 직빵인 것 같다. 손으로 코드 짜보니 재밌기도 하고.