인프런 커뮤니티 질문&답변
작성한 질문수
문법 질문
작성
·
199
2
return (
<div style={{width:'75%', margin:'3rem auto'}}>
<div style={{textAlign:'center'}}>
<h2>Let's travel around <Icon type="rocket"/></h2>
</div>
{/* filter */}
{/* Check Box */}
<CheckBox list={continents}
handleFilters ={filters=>handleFilters(filters,"continents")}
/>
{/* Radio Box */}
\client\src\components\views\LandingPage\LandingPage.js
handleFilters ={filters=>handleFilters(filters,"continents")}
이 부분에 대한 문법이 잘 이해가 가질 않네요.
이 코드에 대해서 조금 설명을 해주실 수 있을까요??
코드 전문은 아래와 같습니다.
import React,{useEffect,useState} from 'react'
import { FaCode } from "react-icons/fa";
import axios from "axios"
import {Icon, Col, Card,Row } from 'antd';
import Meta from 'antd/lib/card/Meta'
import ImageSlider from '../Utils/ImageSlider'
import CheckBox from "./Sections/CheckBox"
import continents from './Sections/Datas'
function LandingPage() {
const [products, setproducts] = useState([]);
const [Skip, setSkip] = useState(0);
const [Limit, setLimit] = useState(4);
const [PostSize, setPostSize] = useState(4);
const [Filters, setFilters] = useState({
continents : [],
price :[]
});
useEffect(() => {
let body = {
skip : Skip,
limit : Limit
}
getProducts(body);
}, [])
const getProducts = (body)=>{
axios.post('/api/product/products', body)
.then(response=>{
if(response.data.success){
if(body.loadMore){
setproducts([...products,...response.data.productInfo]);
}else{
setproducts(response.data.productInfo);
}
console.log("response.data.PostSize" + response.data.postSize);
setPostSize(response.data.postSize);
}else{
alert('상품정보들을 가져오지 못했습니다. ')
}
})
}
const renderCards = products.map((product,index)=>{
return <Col lg={6} md={8} xs={24} key={index} >
<Card
key={index}
cover={<ImageSlider images={product.images}/>}
>
<Meta
title={product.title}
description={`$${product.price}`}
/>
</Card>
</Col>
})
const loadMoreHandler = (e)=>{
let skip = Skip + Limit;
let body = {
skip : skip,
limit : Limit,
loadMore:true
}
getProducts(body);
setSkip(skip);
}
const showFilterResults = (filters)=>{
let skip = Skip + Limit;
let body = {
// db에서 처음부터 가져와야 하니까
skip : 0,
limit : Limit,
filters : filters
}
getProducts(body);
setSkip(0);
}
const handleFilters= (filters,category)=>{
const newFilters = {...Filters}
newFilters[category] = filters ;
showFilterResults(newFilters);
}
return (
<div style={{width:'75%', margin:'3rem auto'}}>
<div style={{textAlign:'center'}}>
<h2>Let's travel around <Icon type="rocket"/></h2>
</div>
{/* filter */}
{/* Check Box */}
<CheckBox list={continents}
handleFilters ={filters=>handleFilters(filters,"continents")}
/>
{/* Radio Box */}
{/* search */}
{/* Cards */}
<Row gutter={[16,16]}>
{renderCards}
</Row>
<br/>
{PostSize>=Limit &&
<div style={{display:'flex', margin:'3rem auto', justifyContent:'center'}}>
<button onClick={loadMoreHandler}>더보기</button>
</div>
}
</div>
)
}
export default LandingPage
좋은 강의 감사드립니다.
답변 2
3
John Ahn
지식공유자
이부분이 많이 헤깔리실수 있을것같아요 !
우선
1. 체크 박스를 클릭을 하면은
props.handleFilters(newChecked)
이 부분을 통해서 체크된 것들의 정보가 부모 컴포넌트로 업데이트가 됩니다.
2. 그 업데이트된 정보가
<CheckBox
list={continents}
handleFilters={filters => handleFilters(filters, "continents")}
/>
여기에 filters 로 가는거에요 ~ 그래서 이 filters 옆에 continents를 넣어주는건 price와 구별해주기위해서 입니다.
1번에 보이는 newChecked가 2번에 보이는 filters 라고 보시면 됩니다 ^^
이해안되는것 더 질문 주세요 ~!! ^^
0
궁금했는데 마침 있네요!
자식 컴퍼넌트 정보를 부모컴퍼넌트에서 받아오는부분이 항상 헷갈리는거같아요
설명해주신부분 읽어보면 음 그렇구나 해도
막상 코드부분을보면 다시 또 헷갈리는느낌 ㅠ