[Dev Log] 장희/검색기능 fix

## 4. 수정 사항

### 1. 전체 리스트에서 이미지 클릭시 해당 이미지와 같은 제목을 가진 이미지 리스트만 나오는 문제

수정 이유 - 검색 할때 검색 키워드에 대한 리스트들은 잘 나오나 전체 리스트에서 어떤 이미지를 클릭했을때 해당 이미지에 대한 리스트들이 다시 나오는 문제가 생겼다. 문제 코드는 아래와 같다.

```js
const [moveImgs, setMoveImgs] = useState([])
const [moveCurrentImgs, setMoveCurrentImgs] = useState({
title:''
})


const search = ({ title }) => {
if (moveCurrentImgs.title !== title) {

console.log('title',title)

setMoveCurrentImgs(
{title})
}
}

const filterByImg = (img) => {
let isTrue = true;
if (moveCurrentImgs.title) {
isTrue = isTrue && img.title === moveCurrentImgs.title;
}
return isTrue;
}
```

문제 원인은 상태관리를 잘못했다. 현재 이미지를 클릭하게 되면 그 클릭한 이미지와 똑같은 제목을 가진 이미지들이 다 출력 되는 것이다. 그래서 필터로 걸러 낼 수 있도록 따로 필터만 하는 상태 관리 할 수 있도록 아래와 같이 다시 수정해 보았다.

```js
const [moveImgs, setMoveImgs] = useState([])
const [moveCurrentImgs, setMoveCurrentImgs] = useState({})

const [filterImg, setFilterByImg] = useState({
title:""
})

const search = ({ title }) => {
if (filterByImg.title !== title) {
console.log('title',title)
setFilterByImg(
{title})
}
}

const filterByImg = (img) => {

let isTrue = true;
if (filterImg.title) {
isTrue = isTrue && img.title === filterImg.title;
}
return isTrue;
}
```

이렇게 했더니 내가 원하는 대로 수정되었다. 한편으로는 처음 사용했던 코드를 활용해서 카테고리 버튼으로 활용 할 수 있을 거라는 생각이 들었다. 나중에 써먹어야 될 것 같다.

### 2. 검색 했을때 해당 데이터가 없을 경우 없다고 알려주는 장치가 필요

수정 이유 - 생각해보니 검색 할 때 데이터 정보에 없는 제목을 검색 했을때 빈 리스트만 나오는 것보다 검색한 데이터가 없다라는 장치가 필요 할 것 같았다... 처음 코드는 아래와 같다.

```js
//...생략
{
moveImgs && moveImgs.map((moveimg, idx) => )
}
```

처음에 검색한 데이터가 없을 경우 어떻게 데이터가 없음을 알려 줄 수 있을지 고민을 많이 했다... 근데 생각보다 간단했다.

```js
...생략
{
moveImgs.length > 0? moveImgs.map((moveimg, idx) => ()):
}
```

해답은 데이터의 길이였다. 뿌려준 데이터이미지 길이가 0보다 커야 이미지들이 출력되고 아니면 MainNotFound 컴포넌트를 뿌려주면 되는 것이였다. 왜 마무리 시점에서 이런 해결 방법들이 떠오르는 것일까 ? ㅋㅋ 신기하다