콜백함수를 활용하여 상위컴포넌트로 값을 전달해보자

React로 쇼핑몰을 만들다가 특정 코드가 로그인, 회원가입 페이지에서 동일하게 사용되어서 컴포넌트화를 하고 코드를 수정을 하였습니다

이미지에 보면 구매회원 로그인과 판매회원 로그인의 두 버튼이 각각의 페이지에서 동일하게 사용되었는데 각 버튼을 클릭할때마다 useState를 활용해 BUYER 혹은 SELLER로 상태를 변경해주었습니다.

  const [buyerClicked, setBuyerClicked] = useState(true);
  const [sellerClicked, setSellerClicked] = useState(false);
  const [buyerOrSeller, setBuyerOrSeller] = useState("BUYER");

  const data = {
      id: userId.current.value,
      pw: userPw.current.value,
      type: buyerOrSeller,
  };

  const handleBuyerClick = () => {
    setBuyerClicked(true);
    setSellerClicked(false);
    setBuyerOrSeller("BUYER");
  };

  const handleSellerClick = () => {
    setBuyerClicked(false);
    setSellerClicked(true);
    setBuyerOrSeller("SELLER");
  };

  <StyledLoginBtnWrapper>
     <StyledBuyerLoginBtn clicked={buyerClicked} onClick={handleBuyerClick}>
         구매회원 로그인
     </StyledBuyerLoginBtn>
     <StyledSellerLoginBtn clicked={sellerClicked} onClick={handleSellerClick}>
         판매회원 로그인
     </StyledSellerLoginBtn>
  </StyledLoginBtnWrapper>

기존의 코드는 위와 같이 작성이 되어있었는데 data에 type으로 buyerOrSeller를 전달해주어 구매회원이냐 판매회원이냐에 따라 로그인이 되게 구현을 하였습니다. 그러나 코드를 컴포넌트화 하면서 SELLER혹은 BUYER의 상태값을 부모컴포넌트로 전달을 해야했는데 여기서 "아 어떻게해야하지?" 라는 문제에 직면하였습니다. 검색을 통해 알아본결과 콜백함수를 사용하면 된다고 합니다. 그럼 콜백함수를 사용하여 수정한 코드를 아래에 보여드리겠습니다.

  const [buyerClicked, setBuyerClicked] = useState(true);
  const [buyerOrSeller, setBuyerOrSeller] = useState("BUYER");
  const [sellerClicked, setSellerClicked] = useState(false);

  const handleBuyerClick = () => {
    setBuyerClicked(true);
    setSellerClicked(false);
    setBuyerOrSeller("BUYER");
    onRoleChange("BUYER");
  };

  const handleSellerClick = () => {
    setBuyerClicked(false);
    setSellerClicked(true);
    setBuyerOrSeller("SELLER");
    onRoleChange("SELLER");
  };

  return (
    <StyledLoginOrSignupBtnWrapper>
      <StyledBuyerBtn clicked={buyerClicked} onClick={handleBuyerClick}>
        {singupOrLoginBuyer}
      </StyledBuyerBtn>
      <StyledSellerBtn clicked={sellerClicked} onClick={handleSellerClick}>
        {singupOrLoginSeller}
      </StyledSellerBtn>
    </StyledLoginOrSignupBtnWrapper>
  );

위의 코드를 보시면 onRoleChange라는 콜백함수를 활용해 클릭이 됐을때 바뀐 값을 전달해주고 있습니다.

부모 컴포넌트에서는

  const [role, setRole] = useState("BUYER");

  const handleRoleChange = (newRole) => {
    setRole(newRole);
    console.log(newRole);
  };

  const data = {
      id: userId.current.value,
      pw: userPw.current.value,
      type: role,
  };

위와 같이 handleRoldChange라는 함수를 선언해주어 LoginOrSignupBtn컴포넌트로 부터 바뀐값을 useState를 활용해 상태를 저장하여 data의 type으로 전달해주고 있습니다.

콜백함수를 활용해 값을 전달하는 방법을 간단하게 정리하자면,

1. 상위 컴포넌트에서 콜백 함수를 정의합니다. 이 함수는 하위 컴포넌트로 전달될 것입니다.
2. 하위 컴포넌트에서 콜백 함수를 호출합니다. 필요한 인수를 전달하여 호출할 수 있습니다.
3. 컴포넌트에서 호출된 콜백 함수는 상위 컴포넌트에서 정의한 함수를 실행합니다. 이를 통해 상위 컴포넌트로 값을 전달하거나 원하는 로직을 수행할 수 있습니다.

이렇게 하여 콜백함수를 활용하여 상위컴포넌트로 값을 전달해보았습니다! 물론 내 머리에서 나온 코드는 아니지만 코드를 활용해보면서 "아~ 이런 방법도 있구나~" 생각하며 전에는 이게 뭔 소리야 싶었겠지만 그래도 요새는 전보다 코드에 대한 이해도는 높아진거 같습니다. (아마도? ㅋ)

콜백함수를 처음알게 되었을 때 내가 콜백함수를 코드를 작성하면서 쓸 수 있을까? 하는 생각을 했었는데 뭐 물론 제 머리에서 콜백함수 써야지! 하면서 직접 짠 코드는 아니지만 그래도 검색을 통해 콜백함수를 활용하여 코드를 작성해보니 뭔가 오 이런느낌인가? 하는 기분이 들었습니다. 허허