9.3.1 useImperativeHandle을 사용하지 않은 실용예제

예제 설명

자식 컴포넌트의 태그 요소들을 부모 컴포넌트에서 제어하기위한 예제를 작성하였습니다.

모달창 안에 있는 각각의 상자들을 모달창 외부에서 버튼을 통해 색상을 넣어주는 예제입니다.

useImperativeHandle을 사용하지 않은 예제


// App.jsx
import { useState } from "react";
import CustomModal from "./CustomModal";

function App() {
  const [open, setOpen] = useState(false);
  const [isTomato, setIsTomdato] = useState(false);
  const [isPink, setIsPink] = useState(false);
  const [isSky, setIsSky] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <button
        onClick={() => {
          setIsPink(true);
        }}
      >
        Pink Btn
      </button>
      <button
        onClick={() => {
          setIsSky(true);
        }}
      >
        Skyblue Btn
      </button>
      <button
        onClick={() => {
          setIsTomdato(true);
        }}
      >
        Tomato Btn
      </button>
      <CustomModal
        isOpen={open}
        onClose={() => {
          setOpen(false);
          setIsPink(false);
          setIsSky(false);
          setIsTomdato(false);
        }}
        isPink={isPink}
        isSky={isSky}
        isTomato={isTomato}
      />
    </>
  );
}
export default App;

App.jsx

자식 컴포넌트의 DOM에 직접 접근이 불가능하니, 상태값을 생성하여 자식 컴포넌트에 props 값으로 넘겨줍니다.

각 div 태그의 색상을 결정하기 위한 세개의 상태값, 모달창을 여닫을 하나의 상태값을 생성하여 전달합니다.


// CustomModal.jsx
import React, { useRef } from "react";
import { useEffect } from "react";

const CustomModal = ({ isOpen, onClose, isPink, isSky, isTomato }) => {
  const closeRef = useRef();
  const pinkRef = useRef();
  const skyblueRef = useRef();
  const tomatoRef = useRef();
  useEffect(() => {
    if (isPink) {
      pinkRef.current.style = "width:50px; height:50px; background:pink;";
    }
    if (isSky) {
      skyblueRef.current.style = "width:50px; height:50px; background:skyblue;";
    }
    if (isTomato) {
      tomatoRef.current.style = "width:50px; height:50px; background:tomato;";
    }
  }, [isPink, isSky, isTomato]);

  if (!isOpen) return null;
  return (
    <div>
      <br />
      <button ref={closeRef} onClick={onClose}>
        &times;
      </button>
      <h1>Color Change</h1>
      <div>
        <div ref={pinkRef}>color1</div>
        <div ref={skyblueRef}>color2</div>
        <div ref={tomatoRef}>color3</div>
      </div>
    </div>
  );
};

export default CustomModal;

CustomModal.jsx

CustomModal 컴포넌트에서는 각 div태그에 접근하기 위한 Ref를 생성해줍니다.

props로 넘겨받은 각 상태값이 true로 바뀔 경우, Ref를 통해 해당 DOM에 접근하여 스타일을 바꿔줍니다.

위 코드는 부모컴포넌트에서 useState를 내려주어 자식컴포넌트 안에서 특정 태그에 영향을 주는 방법입니다. 하지만 다음에 나올 예제처럼 useImperativeHandle을 사용한다면, 부모에서 직접 자식컴포넌트의 태그에 접근할 수 있습니다.