[TIL] 24/01/19 [최종] Failed to execute 'removeChild' on 'Node'

오늘도 화이팅!

1.  신난당 1 : 조건부 렌더링 에러

Unhandled Runtime Error

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

 

리액트 에러 해결: React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of

이분이랑 같은 문제여서 ; div 로 하나더 감싸주니가 에러는 사라졌다.

혼란한 내 코드 :
tiptap 에디터를 를 렌더링 할때 content가 바로 있었으면 좋겠는데, 

현재 Writepage 컴포넌트의 useEffect 에서 content를 set해주고 있어서, 한동작 느림!
그래서 content가 있을 때 (content&&) 렌더링 해주고 싶었던 것임;;

이게 맞나 모르겠으~

 

div를 감싸지 않으면 수정 완료 시에 수정은 되는데 위와 같은 에러가 발생했다 !
아마도 content를 지워줄 때 ? 

{isEditMode ? (
  content && (
    <div>
      <Tiptap content={content} setContent={setContent} />
    </div>
  )
) : (
  <Tiptap content={content} setContent={setContent} />
)}

어느 똑똑한 분이 차이를 알려주었다.

virtual dom 에는 있는데 real dom에는 없는 차이가 발생하나 보다. (나중에 다시봐야겠다)

[Scroll Magic] Failed to execute removeChild on Node 에러 해결

2.  신난당 2 : 조건부 렌더링 에러

Rendered more hooks than during the previous render.

처음엔  위 코드에서 isEditMode를 <Tiptap> 안에서 처리하려고 했는데 말도 안되는 일이었다~

에러는 아래 블로그와 같은데, 내용은 조금 다르지만 보고 감을 잡긴했다.

Tiptap 안에서 훅도 못쓰고 난리도 아니게 된다 ~ 후후.

역시 아직 명확하게 설명할 수 없으니  좀 더 봐야겠다.

https://velog.io/@sinf/Rendered-more-hooks-than-during-the-previous-render

Rendered more hooks than during the previous render.

---

프로젝트 진행 상황

✓ 각자 남은 부분. . 몇명은 끝났고 몇명은 조금 많음 (토요일까지  해결 필요)

 

---

내 진행 상황 

오늘 한일

1. 수정페이지에 DB에서 불러온 것 보여주기 

- region 읽어는 왔는데 표시가 안됨

- tiptap 에서 읽어오기

2. DB에서 불러온 것이 있을 때 CSS 처리

 

오늘 나머지 공부 (21시~ 달려!)

1. DB에 다시 수정내용 업데이트 해주기

 

회고

1. 원래 아무것도 아닌 이 기능이 DB data 가 복잡한 이유로 너무 어렵당.. ㅠ

2. 위에 tiptap 에러는.. 내가 무지한 탓