JS20 [React/트러블슈팅] filter 메서드로 검색 기능을 구현할 때 생긴 오류 해결 📌 구현하려는 기능 강의를 들으면서 Todo를 검색하는 기능을 구현 중이었다. 이를 위해 검색어를 search로, 상태를 setSearch로 관리했다.const List = ({ todos }) => { const [search, setSearch] = useState(''); const onChangeSearch = (e) => { setSearch(e.target.value); }; input의 값을 search로 설정하고, onChangeSearch 함수를 등록하여 검색어를 입력했을 때 search의 상태를 바꾼다. search를 포함하는 요소를 필터링하는 함수를 구현했다.const getFilteredData = () => { if (search === '') { .. 2024. 12. 20. [React/트러블슈팅] 컴포넌트를 반복문으로 렌더링 할 때 key를 지정하면서 발생했던 오류 해결 Kt wiz 웹페이지 개선 프로젝트를 하면서, 컴포넌트를 반복문을 통해 렌더링해야했다. 리액트에서는 컴포넌트를 반복문을 통해 렌더링할 때 Key를 지정해주어야한다. 그래서 처음에 배열의 인덱스를 Key로 지정했다. import React from 'react';import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui';import { BoxScoreData } from './BoxScoreData';interface MatchScoreTableProps { data: BoxScoreData;}const MatchScoreTable: React.FC = ({ data }) => { const.. 2024. 12. 20. 이전 1 2 3 4 다음
