조건부 렌더링 ? 내가 원하는 데이터에서 인덱스를 찾아 보여주고 싶을때 사용 (내맘대로해석)

 

useEffect에서 api를 보여주기전 return에 있는 html값 즉 보여주는 값을 

보여주고 api가 호출된다.

 

만약 코드를 api 안에있는 data중 첫번째 영화를 홈페이지에 보여줘라는 코드를 짯을때

---

const {popularMovies,topRatedMovies,upcomingMovies} = useSelector(state=>state.movie)

    useEffect(()=>{

        dispatch(movieAction.getMovies());

    },[])

  return (

    <div>

      {popularMovies.results && <Banner movie={popularMovies.results[0]}/>}

    </div>

---

코드를 보면 ..복잡허다

 

하지만 알 수 있는건

 

return에 있는 값이 호출이 먼저 되는데 그렇다기엔 api가 그 다음에 호출되서 값을 찾을수 없다는거다.

우리가 찾고싶은값은 {popularMovies.results[0]} 이 값인데

 

그럼 어떻게 해야할까?

  {popularMovies.results &&  이 값을 써주면 된다.

그대로 해석하자면 popularMovies.results 이 값이 있다면   <Banner movie={popularMovies.results[0]}/> 얘를 호출해줘

 

그럼? api값이  popularMovies.results  얘가 있을때 뒤에 랜더닝이 된다는것..

 

이게 조건부 랜더닝이다...후우우