[React] 클릭하면 동작하는 UI (모달창) 만들어보기

💡 실습 포인트!

• 오늘은 클릭하면 동작하는 UI, 그 중에서 모달창을 구현해보았다.
• 강의에서 모달창을 디자인해놓고 클릭했을 때 모달창을 여는 방법을 알려주신 후, 과제로 버튼을 한 번 더 눌렀을 때 닫히게 해보라고 하셨다.
• 나는 오늘 활용했던 삼항 연산자를 가지고 코드를 작성했고, 강사님은 느낌표(!) 기호만을 가지고 더 쉽게 만드는 방법을 알려주셨다.
• 느낌표(!) 기호의 쓰임을 잘 알고 있다고 생각했는데, 아는 것과 잘 활용하는 것은 별개의 문제임을 다시금 깨달았다...ㅎㅎ

---

💜 상세페이지 겸 모달창 UI 만들기

🤍 HTML 및 CSS 코드 작성하기

• HTML

<div className="modal">
  <h2>제목</h2>
  <p>날짜</p>
  <p>상세내용</p>
</div>

• CSS

.modal {
	margin-top: 20px;
	padding: 20px;
	background-color: #eee;
}

---

🤍 HTML 를 Component 로 만들기

• 앞에서와 같이 html 태그들을 그대로 넣어도 되지만, React 에서는 복잡한 html 태그를 하나의 단어로 치환해서 넣을 수 있는 문법을 제공하고 있다.
• 이러한 문법을 Component 라고 하는데, 이를 이용하면 함수나 변수를 만들 때처럼 하나의 단어로 치환해서 원하는 위치에 넣어줄 수 있다.

function 컴포넌트명(){
  return (
    <>
      <div>내용1</div>
      <div>내용2</div>
      <div>내용3</div>
    </>
  )
}

• Component 를 만드는 방법은 다음과 같다.
  • function 을 이용해서 함수를 하나 만들어준다.
  • 해당 함수의 return() 안에 원하는 HTML 태그들을 담아준다.
  • HTML 태그가 들어가야 하는 위치에 Component 명을 태그의 형태로 넣어준다. (ex. <Modal />)

• Component 로 만들 때는 주의해야할 점이 몇 가지 있다.
  • Component 이름의 첫 글자는 대문자를 사용한다.
  • return () 안에는 하나의 div 태그로 묶어준다.
    (의미 없는 div 태그를 사용해서 묶어주고 싶지 않다면 <></> 로 묶어도 된다.)
  • Component 위치는 다른 Component 들과 나란히 배치해주어야 한다.
    (보통 Component 용 function 안에 Component 용 function 을 만들지는 않는다.)

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

• 이제 기존에 작성했던 html 태그들을 가지고 Modal 이라는 Component 로 만들어주었다. 

---

💜 클릭하면 동작하는 UI (모달창) 만들어보기

🤍 삼항 연산자 알아보기

// 삼항 연산자
조건식 ? 조건식이 참일 경우 실행할 코드 : 조건식이 거짓일 경우 실행할 코드

• 일반적으로 특정 조건에 맞춰 HTML 을 보이게 혹은 보이지 않게 하려면 if 문을 사용하면 된다.
• 하지만, React 의 경우 중괄호 내에서 if 문을 사용할 수 없으므로 위와 같이 삼항 연산자를 활용해야 한다.

---

🤍 '모달창 열기' 버튼 기능 만들기

• 먼저 코드를 어떻게 구성할지 생각해본다.
  • 맨처음에는 모달창 UI 가 보이지 않도록 state 초기값을 설정한다.
  • state 가 바뀌면 모달창 UI 를 보여준다.
  • "모달창 열기" 버튼을 클릭하면 state 가 true 로 바뀌게 한다.

let [modal, setModal] = useState(false);

• 먼저 모달창 UI 의 상태정보를 저장할 state 를 하나 만든다.
• 보통 경우의 수가 두 가지로 나뉘는 경우에는 true/false 라는 자료형을 이용한다.
• 처음에는 모달창 UI 가 보이지 않기를 원하므로 state 초기값을 false 로 설정해주고, state 가 true 로 바뀌면 모달창 UI 가 보이도록 설정해줄 것이다.

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

• 이제 삼항 연산자를 활용해서 조건문을 만들어주었다.
• modal state 가 true 라면 Modal Component 를 보여주고, false 라면 아무것도 보여주지 않는다.
• 참고로 React 에서 텅빈 HTML 을 의미하는 코드는 null 이라는 자료형이다.

 

 

function App() {

  let [modal, setModal] = useState(false);

  return (
    <div>
      <button onClick={ ()=>{ setModal(true) } }>모달창 열기</button>
      {modal === true ? <Modal /> : null}
    </div>
  );
}

 

• 이제 상태를 변화시켜줄 매개체인 '모달창 열기' 버튼을 넣어주었다.
• onClick 속성을 추가하여 '모달창 열기' 버튼을 클릭했을 때 modal 의 상태가 true 가 되도록 해주었다.

---

🤍 브라우저에서 '모달창 열기' 버튼 클릭하여 확인해보기

• 작성한 코드를 적용한 후 브라우저에서 '모달창 열기' 버튼을 클릭해보면 위와 같이 모달창이 잘 보이는 것을 확인할 수 있다.
• 하지만 위에서 작성한 코드는 모달창을 열 수는 있지만 닫을 수 없다는 단점이 있다.
• 따라서 버튼을 한 번 더 클릭했을 때 모달창이 닫힐 수 있게끔 코드 수정이 필요하다.

---

💜 클릭하면 동작하는 UI (모달창) 업그레이드하기

🤍 '모달창 여닫기' 버튼 기능 만들기

• 이번에는 '모달창 여닫기' 라고 버튼을 변경한 후, 한 번 클릭하면 모달창이 열리고 한 번 더 클릭하면 모달창이 닫히도록 기능을 수정해보았다.
• onClick 속성만 수정을 해주면 되는 부분이라 어렵지는 않다고 생각했는데 강사님의 코드를 보니 머리를 한 대 맞은 것 같았다.

// 내가 작성했던 코드
<button onClick={ ()=>{ modal === false ? setModal(true) : setModal(false) } }>모달창 여닫기</button>

• 나는 오늘 공부한 삼항 연산자를 사용했다.
• modal 의 true/false 여부에 따라 setModal(true) 나 setModal(false) 를 해주는 1차원적인 방식이었다.
• 다만 작성하면서도 setModal() 이라는 부분의 코드가 중복이라 더 줄일 수는 없을까 생각하기는 했다.

// 강사님이 작성하신 코드
<button onClick={ ()=>{ setModal(!modal) } }>모달창 여닫기</button>

• 강사님의 코드는 그런 내 생각을 단번에 해결해주었다.
• state 인 modal 자체가 true/false 의 값을 저장하고 있다는 점을 활용하여 아예 setModal() 함수 안에 modal 을 넣었다.
• 그리고 false 일 때는 true 로, true 일 때는 false 로 바뀌도록 느낌표(!) 기호를 마치 토글키처럼 활용한 점이 인상깊었다.

---

🤍 브라우저에서 '모달창 여닫기' 버튼 클릭하여 확인해보기

• 이제 코드를 적용해보면 모달창 여닫기 버튼을 클릭할 때마다, 모달창 여닫기가 가능함을 확인할 수 있다.