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

작성한 질문수

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

질문있습니다

작성

152

LandingPage.js 에서

(1)handleFilters={ (1) filters =>(2) handleFilters( (2) filters, "continents")} 이 코드가 있잖아요?

(1) ,(2) 는 제가 임의로 넣었습니다. 이부분이 잘 이해가 안가는데요 우선 CheckBox.js 에서 props.handleFilters(newChecked)

newChecked가 (2)filter의 파라미터로 넘어가는거 잖아요?

근데 왜 (1)filter는 왜 필요한거죠?

또한(1) handleFilters(2) handleFilters가 왜 두개인지 이해가 가지 않습니다

답변 2

<CheckBox list={continents} handleFilters={filters => handleFilters(filters, 'continents')}/>

이부분에서 하위 컴포넌트인 CheckBox에 props로 list 를 전달해서 CheckBox 컴포넌트 안에서 props.list를 

사용하는건 이해했는데요 handleFilters 를 넘기는건 이해가 잘 안되네요

list={continents} 이곳에선 continents가 props로 넘기는거로만 사용 됐는데

handleFilters={filters => handleFilters(filters, 'continents')} 여기에서는 하위컴포트넌트에서 

클릭한 값이 filters 에 넘어온다고 하셨잖아요? 왜 이부분에서는 filters를 넘기는게 아니라 받아오죠?

그리고 filters 가 받아온 값이라 친다면 filters => 에서 화살표가 의미하는건 

하위컴포넌트에서 filters를 받아오면 

화살표 뒷 부분인 handleFilters(filters, 'continents') 를 실행하겠다 라고 이해하면 되나요?

지식공유자

안녕하세요 건희님 !

1번 filters 안에 저희가 Radiobox나 Checkbox 안에서

const handleChange = (event) => {
setValue(event.target.value)
props.handleFilters(event.target.value)
}

클릭한 값 event.target.value가 들어옵니다.
그래서 그 들어온 값을
2번 필터 인자에 넣어줘서 handleFilters 함수안에서 사용해줍니다.

handleFilters={filters => handleFilters(filters, "continents")}

첫번째 handleFilters는 props로 자녀 컴포넌트인 Checkbox 나 Radiobox에 내려주기 위한 것이며
두번째 handleFilters는 함수입니다 ~ !
수고하세요 ~ !

작성한 질문수