Nomflix 리팩토링 - 기존 코드 분석 [1]

Class를 Hooks로

놈플릭스 프로젝트는
Presenter / Container 디자인 패턴으로 구성되어있다.

그중 Container가 class형 컴포넌트로 코드가 작성되어있었고 이를 Hooks로 변경해줄것이다.

componentDidMount 를 useEffect로
state 를 useState로 사용해주자

어... 근데 이게 문제가 생겼다...

useEffect(() => {
    async function fetchData() {
      try {
        const {
          data: { results: nowPlaying },
        } = await movieApi.nowPlaying();
        const {
          data: { results: upcoming },
        } = await movieApi.upcoming();
        const {
          data: { results: popular },
        } = await movieApi.popular();

        setNowPlaying(nowPlaying);
        setUpcoming(upcoming);
        setPopular(popular);
      } catch (error) {
        setError("Can't find movies infomation.");
      } finally {
        loading.current = false;
      }
    }
    fetchData();
  }, [loading]);

이 부분이 문제인데 !

새로고침할때 로딩이 걸리고 다시 클릭을해야 loading의 상태가 변경이 된다....

useEffect(() => {
    async function fetchData() {
      try {
        const {
          data: { results: nowPlaying },
        } = await movieApi.nowPlaying();
        const {
          data: { results: upcoming },
        } = await movieApi.upcoming();
        const {
          data: { results: popular },
        } = await movieApi.popular();
		loading.current = false;
        setNowPlaying(nowPlaying);
        setUpcoming(upcoming);
        setPopular(popular);
      } catch (error) {
        setError("Can't find movies infomation.");
      } 
    }
    fetchData();
  }, [loading]);

finally 가 이상하게 안먹혀서 과감하게 지운뒤에 try 부분에 넣어주니 잘 동작한다