리액트 - 컴포넌트가 화면에서 사라질때 & 시작할때

페이지 시작할때 :

• 새로고침 (O)
  주소창에 엔터치거나, 새로고침 누를 때
• 다른페이지에서 진입해서 컴포넌트가 나타날때 (O)
  : /profile -> /list
• 내부에서 상태값들이 변할때 (X) === 페이지 업데이트
  : /list/:김치 -> /list/:수박 :: 새로고침이 아님. 같은 주소내에서 일어난 일.

 // 새로고침시 재검색 되게 함
  useEffect(() => {
    console.log('새로고침')
    dispatch({
      type: 'SET_WORD_FOR_SEARCH',
      payload: searchWord,
    });
  }, [])

페이지 끝날 때 :

• 페이지간 이동시 컴포넌트가 화면에서 사라지게 된다. 이때만 실행되게 하는 함수 :
  • 사용예 ) 페이지간 이동시 리덕스에 저장해놓은 값 리셋할때. (리덕스를 특정한 페이지내 존재하는 useState 처럼 쓰고 싶을때)

useEffect(() => {
    return () => {
      console.log('컴포넌트가 화면에서 사라짐')
      dispatch(postListReset());
    }
  }, []);

페이지 업데이트 시 :

• 페이지 내 상태값이 변화했을 때

 // useEffect :: < 처음 로딩 될때 || 검색단어 바뀔때 || 페이지 숫자 바뀔때 > 만 실행되는 리스트 요청 함수 ------ 1
  useEffect(() => {
    console.log('업데이트')
    postList(searchWord, setSearchInfo.searchPageNum);
  }, [searchWord, setSearchInfo.searchPageNum]);

---

검색리스트, 리스트를 코딩하면서 생명주기에 대해서 많이 생각해볼 기회를 얻었다. 생명주기라는 말이 와닿지 않았었는데 문제와 오류를 해결해나가면서 얻는 바가 많았다. 시간이 된다면 추후 리액트 생명주기를 공부하면 더 코드를 잘짜는 개발자가 될 것같다.
+) 그동안 코드위에 코드를 얹는 식으로 프로젝트를 진행해 나가면서 코드가 중복되거나 복잡해지는 느낌을 받았다. 처음부터 계획을 세우고 짜고 싶지만, 이번에는 그럴 시간적 여유와 역량이 부족했다. 그러던 중 오류를 만났고 콘솔로 코드를 확인하면서 수정하는 과정에서 요청이나 상태값 변화를 콘솔로 확인하면서 "코드가 어떤 경로로 진행되는지 확인하고 쓸데 없이 중복되는 경우를 확인하고 줄여나가면 내가 원하던 간결한 코드가 될것이구나" 라는 어쩌면 당연한 깨달음을 얻었다. 당장은 오류가 없는 경우 코드를 돌아볼 시간이 없지만 (당장 다음주가 마감이라서 ㅜㅜ) 이 프로젝트가 끝날때!!! 꼭 다시 공부하면서 복기하고 정리해보겠다 . !!!!!!!!

• 리액트 생명주기 공부하기!