질문입니다.

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

데이터베이스에서 가져온 상품 정보들을 화면에서 보여주기[삭제 예정]

작성

187

강의를 하시면서 가끔 너무 빠르게 잡아줄 때는 이렇게 문제를 해결한다는 이야기를 하시는데 자주 등장하는 것 같네요.

위 코드(위의 이미지, 아래에는 풀 코드를 첨부함) 에서는 props.user.cartDetail이 잡히지도 않았는데 렌더링이 되었다는 것으로 이해를 했는데 그러면 안 잡힌 상태에서 렌더링이 되면 페이지에서는 그 부분이 안보여야 되는 것 아닌가요??

그려지지 않은 부분에서 리액트에서 탐지를 해서 렌더링 못한 컴포넌트에 대해서 리액트가 리렌더링을 해주는 것인가요?? 자세히 알고싶은데 어렵네요 ㅠ

이것에 대해서 자세히 공부해보고 싶은데 어떤 주제로 검색해야 이런 문제를 공부해볼 수 있을까요?

감사합니다.

import React,{useEffect} from 'react'
import {useDispatch} from 'react-redux'
import {getCartItems} from "../../../_actions/user_actions"
import UserCardBlock from "./sections/UserCardBlock"
function CartPage(props) {
    const dispatch = useDispatch(); 

    useEffect(() => {
        let cartItem = []; 
        if(props.user.userData && props.user.userData.cart){
            if(props.user.userData.cart.length>0){
                props.user.userData.cart.forEach(item=>{
                    cartItem.push(item.id); 
                })
                // 원래는 axios를 해야겠지만 리덕스를 활용해서 해봅시다 .
                // 첫번째 인지는 카트 아이디에 대한 것, 두번쨰는 퀀터티 
                dispatch(getCartItems(cartItem,props.user.userData.cart ))
            }
        }
        // 이것을 넣어줌으로써 렌더링과 관련된 문제를 해결할 수 있다 다시한번 초기화시켜줌 
    }, [props.user.userData])
    return (
        <div style={{width:'85%' ,margin :'3rem auto'}}>
            <UserCardBlock product={props.user.cartDetail && props.user.cartDetail.product}/>
        </div>
    )
}

export default CartPage

redux nodejs react mongodb 웹앱

답변 2

John Ahn

지식공유자

1.props.user.cardDetail && props.user.cardDetail.product 이 부분이 부모 컴포넌트에서 props을 내려주는 부분이잔아요

이 부분에서 결국 저 마지막에 보이는 product 를 가져와야 되잔아요

그런데 아직 prop.user.cardDatil이 없는데 product를 가져오려고 하면

어떤상황이 되냐면

props.user.undefined.product가 되버려서 undefined 에러가 납니다.

그러기에 무조건 props.user.cardDetail이 있을때에만 product를 가져와서 내려보내라고 해주는 것입니다.

2. 이제 CardPage 컴포넌트 자녀 컴포넌트로 이동해볼게요.

우선 props.user.userData && props.user.userData.cart

이 부분에서 마지막 cart라는 정보가 있어야만 아래 부분을 Trigger 시켜줄수가 있어요 안그러면 위에와 같이 undefined

에러가 나게 됩니다.

그런데 여기서 문제는 useEffect 가 작동하는 시점과 cart 정보가 데이터를 가져오는 시점에서 문제가 발생합니다.

만약 cart 정보가 useEffect를 작동하기전에 이미 정보가 있다면 굳이 아래보이는

}, [props.user.userData])

이부분에 props.user.userData 를 안넣어줘도 되고 그냥 [] 이렇게 비워두어도 됩니다.

하지만 속도가 useEffect 작동하는 시간이 더 빠르기에 cart정보가 없으니

if(props.user.userData && props.user.userData.cart){

이 조건에 의하여 아무런 trigger도 발생하지 않게 됩니다.

설명이 잘 이해가 되실지 모르겠네요 ㅠㅠ 더 잘 설명해드려야 하는데 ...

andrewlee

질문자

자세한 설명 감사합니다.

정리하자면,

일반적으로 하나의 JS파일인 컴포넌트가 동작할 때는

useeffect가 먼저 켜진 후, 렌더링이 되는데

이 때 useeffect 내의 로직안에서 준비되지 못한 친구들은 일단은 그냥 넘어가게 된다.

그리고 그 값들이 준비가 된다면 ( [prop.user.userData] 가 제 값을 찾는다면 ) 다시 한번 리 렌더링이 되서

원하는 값을 찾게된다.

제가 이해한 것이 맞는지요? 감사합니다.

인프런 커뮤니티 질문&답변

질문입니다.