리액트 질문..! 도와주세요 ㅜㅠ

Question

export default function Home() { const postInfo = useSelector((state: RootState) => state.postInfo); const dispatch = useDispatch(); const [ scrollPosition, setScrollPosition ] = useState(0); const carouselRef = useRef(null); useEffect(() => { const getReviewsInfo = async () => { console.log("api 통신중"); const response = await axios.get(`${origin_URL}/review/topReviews`); dispatch(setPostInfo(response.data)); }; console.log("1"); getReviewsInfo(); }, []); useEffect(() => { console.log("scrollWidth 변경"); console.log("2", carouselRef.current?.scrollWidth); }, [carouselRef.current?.scrollWidth]); const handlePrevClick = () => { if (scrollPosition <= 0) return; if (carouselRef.current) { const newScrollPosition = scrollPosition - carouselRef.current.clientWidth; setScrollPosition(newScrollPosition); }; }; const handleNextClick = () => { if (carouselRef.current) { if (scrollPosition >= carouselRef.current.clientWidth * 3) return; const newScrollPosition = scrollPosition + carouselRef.current.clientWidth; setScrollPosition(newScrollPosition); }; }; console.log("리렌더링 발생", postInfo, carouselRef.current?.clientWidth, carouselRef.current?.scrollWidth); return ( {postInfo.map((post, index) => ( ))} = carouselRef.current.scrollWidth - carouselRef.current.clientWidth ? "disable" : "enable" : "disable"} onClick={handleNextClick} /> ) }이런 컴포넌트가 있습니다. 이걸 실행시키면 콘솔창에는 다음과 같이 출력되는데요. 리렌더링 발생 [ ] undefined undefined 1 api 통신중 scrollWidth 변경 2 800 dispatch 리렌더링 발생 [ 길이가 20인 배열 ] 800 800 scrollWidth 변경 2 3200 리렌더링 발생 [ 길이가 20인 배열 ] 800 3200 여기서 "리렌더링 발생" 부분은 코드에서 보시다시피 첫번째 useEffect 훅에 의해 서버로부터 받아온 데이터로 postInfo 를 업데이트 하면서 리렌더링이 되었기 때문인데, 보시면 리렌더링 발생이 한번 더 출력되잖아요? 왜 리렌더링이 한번 더 발생하는 것인지를 모르겠습니다. postInfo를 업데이트 하는 부분은 첫번째 useEffect 훅에서의 dispatch 부분 하나뿐인데 말이죠.(참고로 콘솔 결과에서 "dispatch"는 postInfo 슬라이스를 다음과 같이 정의해서 리듀서때문에 나오는 것입니다)const initialState: PostObject[] = []; const postInfoSlice = createSlice({ name: 'postInfo', initialState, reducers: { setPostInfo: (state, action: PayloadAction) => { console.log("dispatch"); return action.payload; } } });콘솔 결과를 보면 dispatch가 출력되고 "리렌더링 발생 ~" 문장의 postInfo가 [길이가 20인 배열] 인 것으로 보아 서버에서 받아온 데이터로 postInfo를 잘 업데이트 한 것 같은데 왜인지 Carousel 컴포넌트의 scrollWidth가 800입니다. postInfo의 데이터대로 Carousel 하위에 Post 컴포넌트들이 배치되었으면 3200이어야 하는데 말입니다.그리고 그 다음에 scrollWidth가 3200으로 변경되더니 리렌더링이 발생했다는 메시지가 한번 더 뜹니다. scrollWidth도 3200이라고 나오구요.이게 왜 그런지 도저히 모르겠습니다 ㅠㅠ제가 추측하기로는 scrollWidth가 최초 렌더링 시에는 undefined 인건 최초 렌더링 시 scrollWidth를 콘솔에 출력하는 시점에서는 Carousel 컴포넌트가 브라우저에 렌더링 되기도 전인 시점이라 undefined인 것 같고, 800이 되는건 Carousel 컴포넌트는 렌더링이 되서 존재하지만 하위에 서버로부터 받아온 데이터로 Post 컴포넌트가 배치되지는 않아서, 즉 내용물은 없고 Carousel 컴포넌트 껍데기만 있는 시점이어서 Carousel의 width인 800으로 나오는 것 같습니다.그리고 서버에서 받아온 데이터로 postInfo가 업데이트되고 그걸로 Carousel 하위에 Post 컴포넌트들이 쭉 배치되어서 scrollWidth가 3200으로 되는게 아닌가 싶었습니다.그런데 콘솔 결과물에서 첫번째 리렌더링 때 postInfo가 이미 20개의 요소를 가진 배열인 것을 보니 postInfo가 업데이트되기 전이어서 Carousel의 scrollWidth가 800인것도 아닌 것 같고, 리렌더링이 왜 두번 발생하는지도 모르겠습니다.그렇게 고민하다가 Home 컴포넌트에서 Carousel 하위 내용을 싹 다 주석처리 해봤습니다. {/* {postInfo.map((post, index) => ( ))} */} 그리고 실행해보니 리렌더링이 한번만 되더군요. 콘솔이 이렇게 나옵니다. 리렌더링 발생 [ ] undefined undefined 1 api 통신중 scrollWidth 변경 2 800 dispatch 리렌더링 발생 [ 길이가 20인 배열 ] 800 800 scrollWidth 변경 2 800이걸로 보아 리렌더링이 두번 되는건 Carousel 하위에 Post 컴포넌트들을 추가하는것이 원인인 것 같기는 한데, 도무지 이유를 모르겠네요...그냥 넘어가도 지장은 없긴 한데 왜 이렇게 되는건지 납득이 안돼서 너무 궁금합니다. 혹시 왜이런지 알려주실 분 계신가요...

kenu,전독시 · Answer

이 Lifecycle이 도움이 되면 좋겠습니다.https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/렌더링 잘못 타면 한 번 더, 또는 무한 루프를 유발 할 수도 있어서요.

리액트 질문..! 도와주세요 ㅜㅠ

1개의 답변

#redux-toolkit 목록