인프런 커뮤니티 질문&답변

openuriz

작성한 질문수

(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계

8. 연락처 보여주기

연락처 검색 버튼이 작동하지 않아요

작성

349

수정됨

import React, { useState } from 'react';
import {Form, Row, Col, Button} from 'react-bootstrap' 
import { useDispatch, useSelector } from 'react-redux';  

const SearchBox = () => { 
   let [keyword, setKeyword] = useState('');
   let dispatch = useDispatch()
   const { contact } = useSelector((state) => state);          
   const searchByName = (event) => {
     event.preventDefault();         
      dispatch({ type: "SEARCH_BY_USERNAME", payload: { keyword } });      
     };   
    return (
     <Form onSubmit={searchByName} className='search-box'>        
        <Row>
             <Col lg={8}>
                 <Form.Control
                     type="text" 
                     placeholder="이름을 입력해주세요" 
                     onChange={(event) => setKeyword(event.target.value)} 
    \ />                             </Col>             <Col lg={4}>                 <Button variant="dark">찾기</Button>             </Col>         </Row>     </Form>   ) }  export default SearchBox

위의 코드는 search-box 코드이고

const initialState = {
    contact: [],
    keyword: "",
}
const reducer = (state = initialState, action) => {
    let { type, payload } = action;
    switch (type) {
      case "ADD_CONTACT":
        state.contact.push({
          name: payload.name,
          phoneNumber: payload.phoneNumber,
        });
        break;
      case "SEARCH_BY_USERNAME":
        state.keyword = payload.keyword;
        break;
    }
  
    return { ...state };
  };
  
  export default reducer;

위의 코드는 reducer.js 코드

import React, { useEffect, useState } from "react";
import SearchBox from "./SearchBox";
import ContactItem from "./ContactItem";
import { useSelector } from "react-redux";

const ContactList = () => {
   
const { contact, keyword } = useSelector((state) => state);

 let [filteredList, setFilteredList] = useState([]);

  useEffect(() => {
    if (keyword !== "") {
      let list = contact.filter((item) => item.name.includes(keyword));
      setFilteredList(list);
    } else {
      setFilteredList(contact);
    }
  }, [keyword]);

  return (
    <div>
      <SearchBox />
      <div className="contact-list">
        num:{filteredList.length}
        {filteredList.map((item, idx) => (
          <ContactItem item={item} key={idx} />
        ))
        }
      </div>
    </div>
  );
};

export default ContactList

위코드는 contactList 코드입니다.

너무 안되서 선생님 코드를 그대로 복붙하고 아무리 찾아봐도 다른 부분이 없는데 검색 버튼을 눌러도 작동하지 않습니다. 왜 안되는걸까요? 선생님? 이걸로 밤새고 있습니다.

react redux web-api

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

오류를 해결하기 위해 다음과 같이 확인해볼 수 있을 것 같습니다.

코드에서 오타나 문법 오류가 있는지 확인해주세요. 예를 들어, /> 태그가 이상하게 닫혀있는 것 같은데, 정확히는 이렇게 닫아주셔야 합니다: onChange={(event) => setKeyword(event.target.value)}/>
검색 버튼(<Button variant="dark">찾기</Button>)을 클릭했을 때 searchByName 함수가 호출되는지 확인해주세요. console.log()를 이용하여 searchByName 함수가 실행되었을 때 로그가 출력되는지 확인해보세요.
searchByName 함수에서 dispatch하는 액션과 리듀서에서 해당 액션을 처리하는 코드가 제대로 구현되어 있는지 확인해주세요.
리덕스 스토어의 contact 상태가 제대로 업데이트되고 있는지 확인해보세요. console.log()를 이용하여 contact 상태를 출력해보고, 업데이트가 제대로 이루어지고 있는지 확인해보세요.

이렇게 확인해보시고도 문제가 해결되지 않는다면, 코드의 다른 부분이 문제를 일으킬 수도 있으니, 다른 부분도 확인해보시는 것을 추천드립니다.

openuriz

작성한 질문수

전체 Q&A

질문하기