TIL 02.20 - 최종 프로젝트 3주차

배열에 있는 내용 검색하기

const Search = () => {
  const params = useParams();
  const [searchData, setSearchData] = useState([]);
  
  // firestore에서 post 문서 받아오기
  useEffect(() => {
    const postCollectionRef = collection(db, 'post');
    const q = query(postCollectionRef, orderBy('createdAt', 'desc'));
    const getPost = onSnapshot(q, (snapshot) => {
      const newPost = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      const firstCharUpper = params.word.replace(/^[a-z]/, (char) =>
        char.toUpperCase(),
      );
      
      
      setSearchData(
        newPost.filter(
          (item) =>
            item.partyStack.includes(firstCharUpper) ||
            item.partyLocation.includes(params.word) ||
            item.partyTime.includes(params.word) ||
            item.partyName.includes(params.word),
        ),
      );
    });
    return getPost;
  }, [params.word]);
  console.log(searchData);

 

item.partyStack -> 배열 -> ex) ['React', 'Python']

item.partyLocation.includes(params.word)

-> partyLocation은 { partyLocation : "마포구" } 이런 형태이므로 위 코드로 하면 중복된 단어만 쳐도 검색이 된다

(ex. 검색 : 마포)

 

partyStack은 {partyStack : ['React', 'Python']} 형태이므로 코드 조정이 필요하다

->

const firstCharUpper = params.word.replace(/^[a-z]/, (char) =>
        char.toUpperCase(),
      );
      
      let filterList = [];
      newPost.map((item) => {
        let stringStack = '';
        if (item.partyStack.length > 0) {
          for (let i = 0; i < item.partyStack.length; i++) {
            stringStack += item.partyStack[i];
          }
        };
        if (stringStack.includes(firstCharUpper) ||
        item.partyLocation.includes(params.word) ||
        item.partyTime.includes(params.word) ||
        item.partyName.includes(params.word)) {
          filterList.push(item);
        }
      });
      console.log(filterList);
      setSearchData(filterList);

 

stringStack이라는 빈 문자열을 할당해주고 item.partyStack 배열을 for문을 돌려서 stringStack을 재할당해준다.

 

+ 

const firstCharUpper = params.word.replace(/^[a-z]/, (char) =>
        char.toUpperCase(),
      ); -> 영어 앞 글자 대문자로 바꿔주기

 

* 완성된 코드

const params = useParams();
const [searchData, setSearchData] = useState([]);

// firestore에서 post 문서 받아와서 검색한 내용이 포함 된 데이터만 추출
  useEffect(() => {
    const postCollectionRef = collection(db, 'post');
    const q = query(postCollectionRef, orderBy('createdAt', 'desc'));
    const getPost = onSnapshot(q, (snapshot) => {
      const newPost = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      const firstCharUpper = params.word.replace(/^[a-z]/, (char) =>
        char.toUpperCase(),
      );

      let filterList = [];
      newPost.map((item) => {
        let stringStack = '';
        if (item.partyStack.length > 0) {
          for (let i = 0; i < item.partyStack.length; i++) {
            stringStack += item.partyStack[i];
          }
        }
        if (
          stringStack.includes(firstCharUpper) ||
          item.partyLocation.includes(params.word) ||
          item.partyTime.includes(params.word) ||
          item.partyName.includes(params.word)
        ) {
          filterList.push(item);
        }
      });
      setSearchData(filterList);
    });
    return getPost;
  }, [params.word]);