[리액트] 컴포넌트간 데이터 전송방식

 

 

리액트에서 props를 통해 state를 상위컴포넌트에서 하위컴포넌트로 전달하는 방식은 가장 보편적으로 많이 사용하는 방법이다.

그러나 이러한 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 경우는 주로 상위 컴포넌트가 상태를 관리하고, 그 상태를 하위 컴포넌트에서 활용할 때 사용되어야한다.

 

쇼핑몰 웹 사이트를 리액트로 개발하는 상황에서 예를 들어보면,

 

  function Content(){
 
    function getProducts(category){
        axios
             .get(`product/${category.toLowerCase()}`)
            .then((response) => {
                
                console.log(response.data);
                setProducts(response.data);

            })
            .catch((error)=>{
                console.log(error);
                console.log("에러발생")
            })
    }
     useEffect(()=> {
        getProducts('ALL');
    
    },[]);
    return (
        <>
  <div className='row product-list'>
                {products.map(product => (
                     <div className="col-3 product-card" key = {product.id}>
                     <img src={`/assets/product/${product.image_url}`} alt="Product 1" className="product-image" />
                        <p className="product-name">{product.name}</p>
                        {/* <p className="product-description">{product.description}</p> */}
                        <p className="product-price">₩{product.price.toLocaleString()}</p>
                        <div className='btn'>
                        <Button url="/add" name="구매하기"/>
                        </div>
                    </div>
                      </>
    )

 

쇼핑몰의 어떠한 상품들을 리스트로 출력하는 Content 컴포넌트의 일부이다.

 

특정 상품을 클릭했을때 해당 상품의 상세보기 페이지로 이동하는 기능을 구현해야할때,

컴포넌트간 props를 통한 state 전달 방식을 사용한다면 어떻게될까?

 

 //상위컴포넌트
 const handleProductClick = (product) => {
    navigate('/product-detail', { state: { product } });  // state를 사용해 제품 정보 전달
  };
  
  function ProductDetail() {
  const location = useLocation();  // state를 통해 전달된 데이터 가져오기
  const { product } = location.state || {};  // state로 전달된 제품 정보

  if (!product) {
    return <div>제품 정보를 불러오는 중...</div>;
  }

  return (
    <div className="product-detail">
      <h1>{product.name}</h1>
      <img src={`/assets/product/${product.image_url}`} alt={product.name} />
      <p><strong>가격:</strong> ₩{product.price.toLocaleString()}</p>
      <p><strong>설명:</strong> {product.description}</p>
      <p><strong>카테고리:</strong> {product.category}</p>
      <div>
        <Button url="/add" name="구매하기" />
      </div>
    </div>
  );
}

 

 

Content 컴포넌트가 호출될때, axios를 통해 받아온 product 데이터를 productDetail 컴포넌트에 전달한 예제코드이다.

이러한 방식으로 구현한다면, 페이지 새로 고침 시 상태가 사라져 상세보기 페이지에 아무것도 보이지않는 문제가 발생한다. 페이지가 리로드되면 부모로 부터 전달받은 state도 사라지므로, 초기 상태로 돌아가게 되기 때문이다.

 

즉, 컴포넌트간 props 전달을 통한 state관리는 상위 컴포넌트가 하위 컴포넌트의 상태를 제어하는 상황에서 사용해야 한다.

이러한 경우는 상위 컴포넌트에서 사용자가 선택한 데이터를 하위 컴포넌트에서 공유하거나, 상태가 상위 컴포넌트에 종속되는 경우에 사용해야한다.

 

위의 쇼핑몰 예제와 같은 경우는 제품리스트 <-> 제품상세페이지는 페이지 전환이 이루어지는 상황에서 state를 전달받아 사용한다면 하위컴포넌트가 상위 컴포넌트에 의존하게되는 상황이 발생되므로,

제품 상세페이지에 접근할때에는 서버에 새로 api 요청을 보내 서버로 부터 데이터를 받아 새로운 페이지를 그려야한다.