22/08/10 [모각코] 7일차

useEffect 와 props 뿌시기

useEffect()에서 console.log()를 믿지말자 데이터는 setBeerData()로 잘 변경되었는대

단지 console.log에만 안보일 뿐 즉, 바로 props로 넘기면 잘 된다.

// Search.jsx
const Search = (props) => {
    const [beerData, setBeerData] = useState([]);
    let navigate = useNavigate();
  useEffect (() => {
    const getBeerList = async () => {
          console.log('Search.jsx');
           let response = await axios.get('/api/search');
           console.log('response.data.data: ', response.data.data); // [{}, {}, {}]
           console.log('response.data.data[0]: ', response.data.data[0]);
    //                {id: 1, imageUrl: '<https://res.cloudinary.com/ratebeer/image/upload/d_beer_img_default.png,f_auto/beer_271470>', beerName: '클라우드 오리지널 그래비티', totalPoint: 2.48, information: '100% 몰트 리얼 맥주. 오리지널 그래비티. 풍부하고 부드러운.\\n클라우드는 유럽산 홉과 독일산 효모를 사용한 프리미엄 맥주입니다.'}
           setBeerData(response.data.data);
        }
       getBeerList(); // 함수호출
    }, []);
  return (
    <>

// props 전달

); }; export default Search;

<div className={styles.mainBox}>

      {props.data.map((i) => (
        <BeerBox
          key={i.id}
          image={i.image_url}
          title={i.beer_name}
          description={i.information}
        />
      ))}
</div>

props.data는 array인데 Uncaught TypeError: props.beerData.map is not a function 에러가 뜬다.

// BeerList.jsx
<div className={styles.mainBox}>
{Array.isArray(props.data) ? 
      props.data.map((i) => (
        <BeerBox
          key={i.id}
          image={i.image_url}
          title={i.beer_name}
          description={i.information}
        />
      )) : null}
</div>

Array.isArray는 props.data가 Array 일 경우 true를 반환해 props.data.map을 실행하게 하고 props.data가 Array가 아닌 경우 false 를 반환해 null값이 나오게 한다.

props.data는 Array 임에도 불구하고 위에 코드는 에러가 뜨고 아래 코드는 정상적으로 실행되는 이유는 무엇일까..

결과