리액트 todoList 렌더링,서치바 만들기
[key 값 전달]
리액트에서는 위의 todos 같이 배열 형태로 저장된 데이터를 map 메서드를 이용해서 리스트로 렌더링 할 수 있다.
map 메서드를 이용해서 여러 개의 컴포넌트를 리스트로 렌더링 하고 있다.
리액트에서는 이렇게 map 메서드를 이용해서 어떤 html요소나, 컴포넌트를 렌더링 할 때는 반드시 고유한 식별자(key prop)를 전달해줘야 한다. 그래야 리액트가 내부적으로 리스트형태로 렌더링 된 여러 개의 item을 식별할 수 있게 된다.
즉 고유한 식별자를 전달하지 않으면 특정 요소를 삭제, 수정 또는 리렌더링 할 때, 성능이 느려지거나, 의도치 않은 문제가 발생할 수 있다.
이렇게 고유의 key 값을 전달해 주면 해당 오류가 사라진다.
[서치바 만들기]
입력된 글자와 매칭되는 content를 가진 item만 화면에 나오게 해야 한다.
1. 위처럼 검색어를 저장할 state와 onChange함수를 만든다.
2. input 태그에 적용한다. 이렇게 하면, 일단 서치바에 입력하는 값이 search에 저장된다.
3. 필터링 함수를 만든다.
todos 배열에 filter 메서드를 사용했다. filter메서드는 배열의 기본 메서드로, 배열의 모든 요소를 순회하면서 각각 한 번씩 콜백함수를 실행한다. 만약 콜백함수가 참을 반환하면 그 요소를 가져가고, 거짓을 반환하면 그 요소는 제외시켜 주는 필터링 함수이다.
또한 여기서 콜백함수에 includes() 메서드를 사용했다. include 메서드는 인자로 전달된 값이 존재하면 true, 없으면 false이다. 즉 todo.content.includes(search)는 todo.content 문자열에 search값이 존재하는지를 물어보는 것이다.
search가 빈 값일 때는 그냥 todos를 반환하고, 빈 값이 아니라면 todos에 필터 메서드를 적용해서, todo의 content에 search가 포함된 애들만 반환한다.
이대로 완성하면 대, 소문자 구분을 하기에 react를 REACT로 검색했을 때 나오지 않는다.
toLowerCase()를 통해 todo의 content들을 전부 소문자로 만들어 준다. 또한 검색어인 search 또한 toLowerCase()를 통해 전부 소문자로 만들어주면 대문자를 입력하던, 소문자를 입력하면 구분 없이 필터링할 수 있다
최종적으로 todos 배열을 바로 쪼개고 있던 todos.map을 filterTodos.map()으로 바꿔주면 완성이다.
잘 작동되는 모습이다. 뭔가 신기하면서 재밌다 ㅎㅎ