[Error] <div> cannot appear as a descendant of <p>

아래 블로그를 통해 해결책을 얻을 수 있었다.

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. 해결하기

---

<div>는 <p>의 하위 항목으로 나타날 수 없습니다.

ToolTip 기능 구현 후 위와 같은 오류 해결 과정에서 알게 된 새로운 개념을 정리해보았다.

 

핵심은 "<div> cannot appear as a descendant of <p> / 태그 안에는 태그가 들어올 수 없다." 이 부분인 것 같았다.

<p> 태그는 inline-block 속성이고, <div> 태그는 block 속성이기 때문에 inline-block 속성 안에 block 속성 태그를 넣었기 때문에 위와 같은 오류가 발생했던 것이다.

 

이를 바탕으로 코드를 살펴보니 부모 a 태그에 display: inline-block 속성을 부여하고, 자식에 div 태그를 넣었기 때문에 오류가 발생했다는 걸 깨닫고 <div> 태그를 <p> 태그로 수정해보았다.

  return (
    <ToolTipCSS
      className="toolTip"
      type={type}
      toolTip={toolTip}
      // toolTip 클릭 유무에 따라 toolTip 활성화 유무가 바뀐다.
      onClick={() => {
        toolTipHandler(type);
      }}
      {...styles}
    >
      <span className="tooltip-i">{content}</span>
      <div className="tooltip-content">
        <span
          className="tooltip-subContent"
          dangerouslySetInnerHTML={{ __html: subContent }}
        />
      </div>
    </ToolTipCSS>
  );
};

const ToolTipCSS = styled.a`
  cursor: pointer;
  width: 15px;
  height: 15px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #e1e1e1;
  border-radius: 500px;
  box-sizing: border-box;
  top: ${(props) => (props.top ? props.top : "0px")};
  left: ${(props) => (props.left ? props.left : "0px")};
  right: ${(props) => (props.right ? props.right : "0px")};
  text-align: center;
  position: ${(props) => (props.position ? props.position : "absolute")};
  display: inline-block;
  margin: 0 auto;
  margin-left: ${(props) => (props.marginL ? props.marginL : "0px")};

  .tooltip-i {
    font: normal normal 600 10px/15px Pretendard;
    letter-spacing: -0.25px;
    color: #a1a1aa;
    display: block;
  }

  .tooltip-content {
    visibility: ${(props) => (props.toolTip ? "visible" : "hidden")};
    width: ${(props) => (props.width ? props.width : "fit-content")};
    height: ${(props) => (props.height ? props.height : "40px")};
    text-align: left;
    position: absolute;
    z-index: 1;
    top: 100%;
    margin-top: 5px;
    background: ${(props) =>
      props.type === "home"
        ? "#F7F7F7 0% 0% no-repeat padding-box;"
        : "#ffffff 0% 0% no-repeat padding-box;"};
    border: ${(props) =>
      props.type === "home" ? "border: none;" : "1px solid #101a36;"};
    border-radius: 6px;
    font: ${(props) => (props.font ? props.font : "none")};
    padding: 5px 8px;
    position: absolute;
    z-index: 66;
  }

  .tooltip-subContent {
    font: ${(props) =>
      props.type === "home"
        ? "normal normal normal 12px/16px Pretendard;"
        : "normal normal 600 12px/16px Pretendard;"};
    letter-spacing: 0px;
    color: ${(props) => (props.type === "home" ? "#888888" : "#101a36")};
    margin-bottom: 0px;
    display: block;
  }

  &:hover .tooltip-content {
    visibility: visible;
  }
`;

---

<div> 태그를 <p> 태그로 바꿨더니 이번에는 <p> 태그 안에는 <p> 태그를 넣을 수 없다는 오류가 발생했다..

이로써 새로운 사실을 하나 더 알게 되었다.

---

최종적으로 <p> 태그 안에 inline 속성에 <span>을 넣었다.

---

결론

block 👉 inline-block 👉 inline순으로 부모, 자식을 이룰 수 있고 역순으로 사용 시 오류가 발생한다.

 

태그	속성
<div>	block
<p>	inline-block
<span>	inline