React 학습 중 하위 컴포넌트에서 props가 전달이 안되는 문제

[gnsdl106 (정수리)]

공식문서를 읽어보고 간단한 게시판을 만들고 있습니다.

게시판에서 ‘저장하였습니다’ 같은 안내 창을 하나의 alert로 관리하고 싶어서

alert 컴포넌트를 만들어서 사용하려고 하는데 잘 안되서 글을 올리게 되었습니다.

글 작성 후 submit 시 제목이 있을 경우에만 리스트 포함 및 Alert_C 컴포넌트에

데이터를 보내는데 Alert_C에서는 아무것도 안찍히고 그렇다고 에러도 출력되지 않아

해결하는데 어려움이 있습니다. 해결하기 위해서는 어떤방식으로 접근해야할까요?

Board.js
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import AlertC from "./Alert_C";

export default function Board(props) {
  let test;
  return (
    <>
      <Form
        onSubmit={(e) => {
          e.preventDefault();
          if (props.title !== "") {
            test = <AlertC message="등록되었습니다" state={true} />;
            props.listHandler({ title: props.title, content: props.content });
          } else {
          }
        }}
      >...
     </Form>
     {test}
</>

Alert_C.js
import Button from "react-bootstrap/Button";
import Alert from "react-bootstrap/Alert";
import { useState } from "react";

export default function AlertC(props) {
  console.log(props);//미출력
  const [show, setShow] = useState(false);

  return (
    <Alert show={show} variant="success">
      <p>{props.message}</p>
      <div className="d-flex justify-content-ed">
        <Button variant="secondary" onClick={() => setShow(false)}>
          닫기
        </Button>
      </div>
    </Alert>
  );
}

[codejong (코드종)]

Board가 랜더링 될 때 실행되는 let test 는 매번 새롭게 선언되며 값을 따로 지정하지 않았으므로 Board는 매번 test가 null인 상태로 랜더링을 마치게
됩니다.
onSubmit의 인자로 넘기는 함수는 랜더링 시마다 새롭게
생성되는데 이 함수가 실행될 때는 함수가 선언된 위피에서의 test의 값을 변경하게 됩니다(클로저).
이 test의 변경은 랜더링을 유발하지 않으며 다른 방법으로 랜더링을 다시 한다고 해도 위에서 설명한 이유로 매번 null입니다.

Modal을 목적으로 Alert를 만드신 것으로 보이는데 리액트에서 Modal을 다루는 패턴을 참고해보시기 바랍니다.

Modal - Ant Design