๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿฟ Project

[SidePJ] React ๋ชจ๋‹ฌ ์˜์—ญ ๋ฐ– ํด๋ฆญ์‹œ ๋‹ซ๊ธฐ

by Tamii 2021. 6. 3.
๋ฐ˜์‘ํ˜•

 

 

 

๐Ÿ“Œ ์ „์ฒด ๊ตฌ์กฐ

PayModalWrapper ๊ฐ€ RoomPayModal์„ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ์ƒํƒœ

๋™์ž‘ : ์ˆ™์†Œ๋ฅผ ๋ˆ„๋ฅด๋ฉด ๋ชจ๋‹ฌ์ฐฝ์ด ๋œจ๊ณ  ๋ชจ๋‹ฌ์ฐฝ ์™ธ์˜ ์˜์—ญ ํด๋ฆญ ์‹œ ๋ชจ๋‹ฌ์ฐฝ์ด ๋‹ซํžŒ๋‹ค. 

 

 

๐Ÿ“Œ ์ฝ”๋“œ 

handlePayModalOff  ํ•จ์ˆ˜๋กœ  ๋ชจ๋‹ฌ ์™ธ ์˜์—ญ ํด๋ฆญ ์‹œ ๋‹ซํžˆ๋Š” ํด๋ฆญ์ด๋ฒคํŠธ๋ฅผ ์ œ์–ดํ•  ์˜ˆ์ • 

 

return ๋ถ€๋ถ„

  return (
    <ReservationMainDiv>
      <AvailableRoom
        setIsPayModalClicked={setIsPayModalClicked}
        roomData={roomData}
      />
      <RoomMap roomData={roomData} />
      {isPayModalClicked && (
        <PayModalWrapper
          className="paymodalWrapper"
          onClick={(e) => handlePayModalOff(e)}
        >
          <RoomPayModal />
        </PayModalWrapper>
      )}
    </ReservationMainDiv>
  );

 

handlePayModalOff 

const ReservationMain = () => {

  const [isPayModalClicked, setIsPayModalClicked] = useState(false);

  const handlePayModalOff = (e) => {

    const clicked = e.target.closest('.paymodal');

    if (clicked) return;
    
    else {
      setIsPayModalClicked(false);
    }
  };

โ– isPayModalClikced , setIsPayModalClicked   : useState๋กœ ๋ชจ๋‹ฌ click ์—ฌ๋ถ€ boolean ๊ด€๋ฆฌ

โ– cliked : 'paymodal'์ด๋ผ๋Š” class์ด๋ฆ„์„ ๊ฐ€์ง„ ์š”์†Œ๋ฅผ ์„ ํƒ 

โš ๏ธ ์—ฌ๊ธฐ์„œ closest๋Š” ์ž์‹ ๋ถ€ํ„ฐ ๋ถ€๋ชจ ์š”์†Œ ๋‹จ์œ„๋กœ ์ถœ๋ฐœํ•ด , ๊ฐ ์š”์†Œ๊ฐ€ ์ง€์ •ํ•œ ์„ ํƒ์ž์— ๋งŒ์กฑํ•  ๋•Œ๊นŒ์ง€ ํƒ์ƒ‰ํ•œ๋‹ค (Jenny ์ถœ์ฒ˜

 

๋”ฐ๋กœ ์ด๋ฒคํŠธ ์บก์ณ๋ง ๋ฒ„๋ธ”๋ง ์ง€์ •์„ ์•ˆํ•ด์คฌ์Œ์œผ๋กœ ๋ฒ„๋ธ”๋ง์œผ๋กœ ์ง„ํ–‰์ด ๋˜๊ณ  ( ํด๋ฆญํ•œ ์š”์†Œ -> ์ƒ์œ„๋กœ)

๋ชจ๋‹ฌ์„ ํด๋ฆญํ–ˆ์„ ์‹œ : cliked์— <RoomPayModal> className= 'paymodal'์ด ๋“ค์–ด๊ฐ  ( ์ž์‹ ๋ถ€ํ„ฐ ๋ถ€๋ชจ๋กœ ํƒ์ƒ‰ํ•˜๋‹ˆ) 

๋ชจ๋‹ฌ ์™ธ ์˜์—ญ ํด๋ฆญ ์‹œ : cliked์— <payModalWrapper>๊ฐ€ ๋“ค์–ด๊ฐ 

-> cliked๊ฐ€ ์กด์žฌํ•˜๋ฉด  : return ๋ชจ๋‹ฌ ๊ทธ๋Œ€๋กœ

-> cliked null์ด๋ฉด  : false  ๋ชจ๋‹ฌ close

 

ํ•จ์ˆ˜์™€ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ†ตํ•ด ๋ชจ๋‹ฌ์˜์—ญ์˜ ๋‹ซํž˜์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. 

 

RoomMapPayModal 

const RoomMapPayModal = () => {

  return (
    <RoomMapPayModalDiv className="paymodal">

์ฐธ๊ณ ๋กœ className์€ RoomMapPayModal ์ปดํฌ๋„ŒํŠธ์—  ์ง€์ •ํ•ด๋†จ๋‹ค.

 

 

 

๐Ÿ“Œ ์‚ฝ์งˆ๊ธฐ 

 const handlePayModalOff = (e) => {
   
    if (e.target !== e.currentTarget) return;
    
    else setIsPayModalClicked(false);
    }
  };

 

์ฒ˜์Œ์—” ์ด๋ ‡๊ฒŒ e.target ์ด e.currentTarget ์ฆ‰ ๋‚ด๊ฐ€ ์ด๋ฒคํŠธ๋ฅผ ๊ฑด element , ๋‚ด๊ฐ€ ํด๋ฆญ ํ•œ element ๋ฅผ ๋น„๊ตํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•ด๋ƒˆ๋Š”๋ฐ .

์ด ํŒจํ„ด์ด explorer์—์„œ ๋™์ž‘์ด ์•ˆ๋œ๋‹ค๊ณ  ํ•ด์„œ ์•„์ง๊นŒ์ง„ ์œ„ํ—˜ํ•˜๋‹ค๊ณ  ํ•œ๋‹ค.. (์ต์Šคํ”Œ๋กœ๋Ÿฌ....

(์ƒ) ๋ชจ๋‹ฌ ์™ธ ํด๋ฆญ์‹œ  (ํ•˜) ๋ชจ๋‹ฌ ์˜์—ญ ํด๋ฆญ ์‹œ

 

 

๊ทธ ์™ธ ๋ฐ”๊นฅ ์˜์—ญ์— ๊ฒ€์ •์ƒ‰ ๋ง‰์„ ์”Œ์šด ํšจ๊ณผ๊ฐ€ ์—†์„ ๋•Œ ์œ ์šฉํ•œ useRef ์‚ฌ์šฉ๊ธฐ๋Š” https://rrecoder.tistory.com/141?category=950210์ด ๊ฒŒ์‹œ๊ธ€์„ ์ฐธ๊ณ ํ•ด ์ฃผ์‹œ๊ธธ! 

 

 

 

 

๐Ÿ“Œ ์ „์ฒด ์ฝ”๋“œ

const ReservationMain = () => {
  const [roomData, setRoomData] = useState();
  const [isPayModalClicked, setIsPayModalClicked] = useState(false);

  useEffect(() => {
    const fetchData = API.get.room();
    fetchData.then((res) => setRoomData(res));
  }, []);

  const handlePayModalOff = (e) => {

    const clicked = e.target.closest('.paymodal');

    if (clicked) return;
    
    else {
      setIsPayModalClicked(false);
    }
  };

  return (
    <ReservationMainDiv>
      <AvailableRoom
        setIsPayModalClicked={setIsPayModalClicked}
        roomData={roomData}
      />
      <RoomMap roomData={roomData} />
      {isPayModalClicked && (
        <PayModalWrapper
          className="paymodalWrapper"
          onClick={(e) => handlePayModalOff(e)}
        >
          <RoomPayModal />
        </PayModalWrapper>
      )}
    </ReservationMainDiv>
  );
};

๋Œ“๊ธ€