문법 질문

Question

return ( < div style = { { width : '75%' , margin : '3rem auto' } } > < div style = { { textAlign : 'center' } } > < h2 > Let's travel around < Icon type = "rocket" /> { /* 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 } ` } /> }) 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" /> { /* filter */ } { /* Check Box */ } < CheckBox list = { continents } handleFilters = { filters => handleFilters ( filters , "continents" ) } /> { /* Radio Box */ } { /* search */ } { /* Cards */ } < Row gutter = { [ 16 , 16 ] } > { renderCards } < br /> { PostSize >= Limit && < div style = { { display : 'flex' , margin : '3rem auto' , justifyContent : 'center' } } > < button onClick = { loadMoreHandler } > 더보기 } ) } export default LandingPage 좋은 강의 감사드립니다.

John Ahn · Answer

이부분이 많이 헤깔리실수 있을것같아요 ! 우선 1. 체크 박스를 클릭을 하면은 props . handleFilters (newChecked) 이 부분을 통해서 체크된 것들의 정보가 부모 컴포넌트로 업데이트가 됩니다. 2. 그 업데이트된 정보가 < CheckBox list = { continents } handleFilters = { filters => handleFilters (filters , " continents " ) } /> 여기에 filters 로 가는거에요 ~ 그래서 이 filters 옆에 continents를 넣어주는건 price와 구별해주기위해서 입니다. 1번에 보이는 newChecked가 2번에 보이는 filters 라고 보시면 됩니다 ^^ 이해안되는것 더 질문 주세요 ~!! ^^

patmos34336131 · Answer

익명함수를 쓰는 이유가 있을까요?