React

07. 동적 모달창 만들기

망재이 2024. 9. 11. 22:28

서론

저번에 만들어놓은 모달창 레이아웃을 이용해서 동적 모달창 생성 방법에 대해 배웠다. 게시글을 누르면 상세페이지가 뜨도록 만들어주려고 한다.

 

 

본론

동적 UI 생성 step

 

동적 UI를 생성하기 위해서는 3가지 단계만 거쳐주면 된다.

 

1. html / css로 미리 UI 디자인 생성

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

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

 

 

본격적으로 모달창 띄우기

 

step.1 html과 css는 이미 작성을 해놨으므로 그대로 진행하도록 하겠다.

 

step.2 UI의 현재 상태를 state로 저장해야한다. 모달의 현재 상태를 표현하는 건 어떤 방식이든 상관없으므로 나는 직관적으로 'close', 'open' 글자로 표현하였다. 0, 1 혹은 true, false 등으로 표현해줘도 좋을 것 같다.

 

step.3 state에 따라 UI의 상태를 변경해줘야 하는데 이를 코드로 풀어서 설명하면 modal이 open이면 모달창을 보여주고, close면 모달창을 보여주지 않는다.

function App() {
return (
  let [modal, setModal] = useState('close');
      {
        if (state가 open이면) <Modal/>
        그렇지 않다면 ''
      }
  );
}

 

그런데 우리가 흔히 아는 if문을 이렇게 작성해주면 오류가 발생할 것이다. 왜냐하면 현재 우리는 JSX를 사용하고 있기 때문이다. JSX에서는 if문을 사용할 때 if(조건식) {실행문}의 형태가 아니라 삼항 연산자를 사용해줘야 한다.

 

 

삼항연산자?

 

간단하게 조건식 ? true일 때 실행문 : false일 때 실행문;의 형태로 해당 문법을 통해 조건문을 써야 한다. 위에 작성한 if문을 삼항연산자로 표현한다면 아래와 같다.

{
	state가 open이면 ? <Modal/>을 띄우고 : close면 띄우지 않기
}

 

 

모달창 코드 짜보기

 

자, 그렇다면 모달창 코드를 삼항연산자를 이용해서 짜보도록 하겠다. modal이 open이면 모달창을 보여주고 그렇지 않다면 아무것도 실행하지 말아야 하므로 null 혹은 ''를 써주면 된다.

function App() {
return (
  let [modal, setModal] = useState('close');
      {
        state == 'open' ? <Modal/> : null
      }
  );
}

 

이제 모달창을 띄우기 위한 기본적인 설정은 끝이 났다. 실제 하고자 하는 것은 제목을 클릭했을 때 모달창이 뜨도록 해야하니 앞서 배웠던 onClick과 state 변경함수를 이용해서 코드를 짜보도록 하겠다.

function App() {
return (
  let [modal, setModal] = useState('close');
  
        <div className="list" onClick={() => {
          setModal('open');
      }}>
  
      {/* 모달 상세페이지 컴포넌트 생성(조건문 사용) */}
      {
        modal == 'open' ? <Modal/> : null
      }
  );
}

 

state 변경함수를 이용해서 제목을 누를시 state의 값을 close에서 open으로 변경하도록 코드를 짜봤다. 이제 제목을 클릭하면 아래와 같이 모달창이 뜨는 것을 볼 수 있다.

 

 

정리

1. html과 css를 이용해서 원하는 디자인 완성

2. state를 이용해 동적으로 변경하고 싶은 부분의 상태를 저장

3. state에 따라서 UI가 어떻게 바뀔지 변경함수를 이용해 저장

더보기

** 실습

버튼을 눌렀을 때 모달창이 켜지도록만 생성해봤는데, 한번더 누르면 모달창이 사라지도록 만들려면 어떻게 하면 좋을까?조건문을 사용해주면 간단하게 만들 수 있다. 여기서는 자바스크립트 함수를 생성하는 것으로 if문을 사용해서 만들어도 문제 없이 실행이 된다. 제목을 클릭했을 때 modal의 값을 확인하고 open이면 state값을 close로, close면 state값을 open으로 변경해준다. 
function App() {
return (
  let [modal, setModal] = useState('close');
  
      {/* 제목 클릭시 상세 모달 생성, 꺼짐 */}
      <h4 onClick={() => {
        if(modal == 'open') {
          setModal('close');
        } else {
          setModal('open');
        }
      }}>{title[0]}</h4>
  
      {/* 모달 상세페이지 컴포넌트 생성(조건문 사용) */}
      {
        modal == 'open' ? <Modal/> : null
      }
  );
}

 

728x90