ReactJS TabPanel시 useEffect의 실행 순서 미보장
추천0 비추천 0
페이지 정보
작성자 Palaoo
작성일 2023-06-02 22:13 조회 335회
댓글 0건
제품 버전 : 5.20231.888
컨트롤 이름 : TabPanel
본문
관련링크
프로젝트 적용할지 알아보고 있는 중입니다.
리액트를 사용하고 있는데요.
useEffect는 마운트 된 후의 실행을 보장하고 있는데,
<Tab> 안에 html element가 마운트 되기 전에
useEffect가 실행되는 기현상을 보이고 있습니다.
때문에 <Child> 안의 <div>를 못찾는 오류가 발생하고 있습니다.
const Parent = () => {
useEffect(() => {
console.log(document.getElementById("childDiv")); // null
}, []);
return (
<TabPanel>
<Tab>
<Child />
</Tab>
</TabPanel>
);
};
const Child = () => {
return <div id="childDiv"></div>;
};
Child 안에서 useEffect를 사용해도 같은 오류가 발생합니다.
반면에 <Child>를 Tab을 안쓰는 다른곳에서 사용해보면 childDiv가 잘 찾아집니다.
댓글목록
등록된 댓글이 없습니다.
1 답변
