React 검색 필터 만들기에 대해 질문 드립니다.

[yegirna530]

안녕하세요 리액트 세미나 1과제를 하다가 질문이 생겨 이슈를 올립니다.
table에 대해 검색하는 필터를 구현하는 과정에 어려움을 겪고 있습니다.

생각한 과정
(1) input을 만들어 onChange function 연동하기
(2) onChange function
: e.target.value includes 하는 row filter해서 새로운 const newArray에 지정
setStudentList(newArray) 하기
(3) 수정된 StudentList가 Table component로 넘어가기

의 과정을 생각해보았는데요
이럴 경우 onChange가 처음진행되면 StudentList 가 빈 array가 되어서 진행이 안되는 문제가 있었씁니다.

그래서 임의의 다른 list를 두어서
[saveArray, setSaveArray] = useState("")하고
onChange function에서
: e.target.value includes 하는 row StudentList에서 filter해서 setSaveArray
하면 StudentArray가 손상되는 것을 막을 수 있지 않을까 생각했습니다.

그런데 결국 제 Table Component에 넘겨주는 것은 StudentList이기 때문에
onchange event가 있을 때는 saveArray를
onchange event가 끝나면 원래의 StudentList를 넘겨줄 수 있는 방법은 없는지 여쭤보고 싶습니다!

[mgahn0706]

저도 루키지만 같은 고민을 했어서 한번 답글을 남겨봅니다!
filter 함수 자체에서 조건문으로 컨트롤하면 좋을 것 같아요
filtering 할 때 filter가 없으면 그냥 saveArray=studentArray로 하고, filter가 있는경우에는 필터링 된 결과를 saveArray에 저장하여
saveArray만을 넘겨주는건 어떤가요?
혹시 도움이 될까 남겨봅니다

아니면 삼항조건연산자로 filter 여부에따라 (isFilterExist ? : 로 하는 것도 생각해봤는데 이건 시도해보지는 않았습니다

[yegirna530]

제가 방금 열심히 이것저것 도전해본 결과 해답을 조금 찾은 것 같은데
같은 고민을 하신 분께 도움이 되거나 혹은 제 답에 문제가 있을까해서 댓글로 공유합니다.

먼저 [inputValue, setInputValue] = useState("");를 해준 후
onClick handle function에서
setInputValue(e.target.value);
를 해주었습니다.

이후
{inputValue &&

}
{!inputValue && }
이렇게 했더니

inputValue가 true라면 즉, 값이 있다면 saveArray를
false라면 즉 검색을 하고 있지 않다면 원래대로 StudentArray를 제공하게 했더니

조금 해결된 것 같습니다!
제 방법에 문제가 있다면 말씀해주세요~

[woohm402]

많이 고민해보신 것 같네요! 👏 👏 좀만 첨언해보겠습니다.

---

수업시간에도 이야기했던 내용인데, 리액트는 flux 패턴을 통해 언제나 깔끔하고 읽기 쉬운 구조를 지향합니다. 어떤 이벤트가 발생했을 때 얘를 잠깐 여기로 옮겨놓고 이걸 실행한 다음 다시 값을 대치하고 결과를 보여줄때는 이렇게 저렇게.. 하는 구조는 리액트에서 잘 사용되지 않습니다. 본 과제의 경우에도 마찬가지로, 간단하게 구현하는 게 중요합니다.

구현하려는 곳이 필터와 리스트입니다. 코드에 대한 생각을 건너뛰고 리액트의 방식으로 접근해 보면,

1. 상태
   • 필터 텍스트, 학생 리스트
2. 뷰
   • 필터 텍스트를 기준으로 "어떤 기준"에 의해 필터링된 학생 리스트

필터의 글이 변경되었을 경우

• 필터 텍스트 state가 변경됨
• state가 변경되었으니 그 밑을 싹 다 다시 그림

이렇게 처리하면 구조가 아주 간결해집니다. 그러니까 state에 필터랑 학생리스트 두개만 놔두고, 디스플레이해줄 때는 (필터링된 리스트).map(어떤 콜백 함수) 이렇게 처리해주면 될 것 같습니다.

[woohm402]

@yegirna530 해결되셨나요?

[yegirna530]

넵! 해결되었습니다 !