const handelFilterSKill = (filterSkill, filterHeadcount) => {
const newArray = [...notice];
console.log('SKill', filterSkill);
const result = newArray.filter( x => {
return x.skill == filterSkill && x.headcount >= filterHeadcount
});
setRanderNotice( result );
}
<SelectSearch onChange={(event) => {handelFilterSKill(event)} } options={techstackList} search filterOptions={fuzzySearch} id="skill" name="techstack" placeholder="기술 검색" />
<Form.Control onChange={(event) => {handelFilterSKill (null, event.target.value)} } min="0" type="Number" placeholder="멤버 수" />
검색 기능을 만들고 있는데 skill은 dropdown으로 값을 받고 headcount는 number input으로 값을 받음.
위 코드처럼 SelectSearch, From.Contorl에서 값을 onChange로 받아와서 filter 돌리고 싶은데
문제는 저렇게 하면 각각 값이 다르게 함수에 들어가서 && 연산이 의미가 없어짐..
어떤 방향으로 해결해야할까?
함수형 때려치고 절차형 쓰기 - dc App
허..
onChange는 내부 상태를 업데이트, 그리고 내부 상태를 이용해서 handelFilterSkill 로 필터링?
내부 상태가 뭐지 그런건 어떻게 검색해야 나올까?
그냥 컴포넌트 안에 useState로 상태 만들어두면 되잖음
이렇게 하나의 state를 계층 구조가 분리된 컴포넌트가 공유하려면 context가 좋을 듯요. context는 사실 글로벌 상태관리 보다 이렇게 custom hooks을 하나 만들고 컴포넌트가 공유하게 만들때 좋음. 다른 방법은 그냥 SelectSearch랑 Form.Control이 하나의 최상위 부모를 가지고 부모가 useState하면 되긴 하는데 좀 그렇잖아요.