React 팝업창 띄우기(1)

관리자 화면에서 등록한 팝업창을 사용자 화면에서 띄우기 위해

팝업 컴포넌트를 만들어서 작업하던 중 다른 방법이 없을까?

해서 갓글에 검색.

찾아보니 React-Modal이란 라이브러리 발견.

 

여기서 잠깐.

※ Modal 이란?
- 특정 이벤트에서 확인하거나 특정 이벤트를 날려주지 않으면 원래 하던 작업을 계속 이어갈 수 없는 새창.
- 특정 이벤트에서 새창을 띄웠을 때 원래 하던 작업을 계속 이어갈 수 있게 해놓은 것이 모달리스라는 반대 개념도 있음. 

 

이거다 싶어서 Modal을 사용해서 팝업창을 만드는데 불편하거나 안맞는 점들이 있음.

1. 필자는 원래 쓰던 디자인을 Modal에 맞게 변경해야 함.

2. 팝업이 뜨더라도 원래 하던 작업을 계속 할 수 있도록 하고 싶음.

3. 검증이 필요.

4. 보통 react native(모바일)에 많이 사용함.

 

고로 Modal은 잠시 넣어두고 다음에 알람창이나 경고창 만들 때 사용해봐야겠음.

 

서두가 길었지만 다시돌아와 팝업창 띄우기 시작.

 

먼저 팝업창 상태를 관리할 변수를 선언함.

//배열 비구조화 할당
//변수선언 구문
const [popupState, setPopupState] = useState(true);	//팝업 상태
const [popups, setPopups] = useState(null);	//db에서 불러온 팝업 리스트

 

//비동기식 팝업 데이터 불러오는 함수(이 부분은 자유롭게 작성)
   const searchMain = () => {
    actions.searchMain().then((response) => {
      if (response.data.content.length > 0) {	//팝업이 1개 이상일 때
        response.data.content.forEach((popup) => {
          popup.visible = true;	//팝업 1개당 visible : true 추가 > 이유는 밑에 코드에서 설명
        });
        setPopups(response.data.content);	// 팝업 데이터 세팅
      } else {
        setPopupState(false);	//팝업이 없을 때 팝업 상태 false로 설정
      }
    });
  };

 

 //실제 팝업 사용 구문
{popupState ? (		//팝업 상태가 true이면 popup 컴포넌트를 보여줌.
    <Popup popups={popups} setPopups={setPopups} />	//세팅한 팝업 데이터가 필요해서 컴포넌트로 넘겨줌
) : (
    ""
)}

 

팝업을 굳이 컴포넌트로 만든 이유는 재사용성을 높이기 위해서임. 혹시 다른데서도 쓸 수 있으니까!

react의 수많은 장점 중 하나임.

 

//팝업 컴포넌트
{popups	?	//팝업 데이터가 있다면
   popups.map((popup) => (	//map 함수를 사용해 팝업 출력
    <Draggable key={popup.id}>		//react-draggable 라이브러리 밑에서 설명
      <div>
        <div>
          {popup.title}	//팝업 제목
          <Link to="#" onClick={(e) => closePopup(e, popup.id)}>
            <img src="/img/closeBtn.png" alt="닫기" />	//Link 컴포넌트 사용한 닫기 버튼(a태그라고 생각하면 됨)
          </Link>
        </div>
        <div dangerouslySetInnerHTML={{ __html: popup.content }}></div>	//저장된 content 데이터가 html태그라서 참조사이트 참고해서 작성함
      </div>
    </Draggable>
  ))
: null}

 

필자는 className을 모두 제거한 코드라서 구현하실 때 각자 취향에 맞게 css 추가하면 됨.

 

  //팝업 닫기 버튼 클릭 시 함수
  const closePopup = (e, popupId) => {	//팝업 id를 받아서 해당 팝업 닫는 방식
    e.preventDefault();
    let prevPopups = popups;
    let newPopups = [];
    prevPopups.forEach((popup) => {	//모든 팝업 중 받아온 팝업 id와 비교해 일치하면 해당 팝업 visible : false 처리
      if (popup.id === popupId) {
        popup.visible = false;
      }
      newPopups.push(popup);	//처리 완료 후 새로운 배열에 push
    });
    setPopups(newPopups);	//팝업 리스트 상태까지 추가 후 마무리
  };

 

첨 생각은 popupState로 팝업 상태(끄고 켜기)를 관리할려고 했으나,

팝업이 여러개 일때 하나하나 관리를 하기 위해서

각각의 popup 객체에 visible이란 key를 추가하여 관리하였음.

 

이걸로 팝업 띄우기 끝.

 

요즘 해가 짧아져서 퇴근할 때 어두컴컴함.

다들 조심히 퇴근하시길.

 

 

📢참조

https://fomaios.tistory.com/entry/React-Native-Modal-component%EC%9D%98-%EA%B1%B0%EC%9D%98-%EB%AA%A8%EB%93%A0-%EA%B2%83

[React Native] Modal component의 거의 모든 것 (Almost Everything in Modal)

https://webisfree.com/2020-12-30/react%EC%97%90%EC%84%9C-string-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EB%AC%B8%EC%9E%90%EC%97%B4%EB%A1%9C-html-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

React에서 string, 텍스트, 문자열로 html 코드를 추가하는 방법