함수형 컴포넌트에서 useEffect 사용

[2myungho]

클래스형 컴포넌트에서 사용하는 생명주기인 componentDidMount()처럼 화면이 렌더링 되고 나서 실행하는 Hook입니다.

useEffect는 렌더링 되고 나서 바로 실행 되기 때문에

  useEffect(() => {
    onMyGroups(myGroups)
    console.log(myGroups) // [ ]
  });

myGroups 에 데이터가 들어가기 전에 실행이 되어 버려서 빈 값이 들어갑니다.
그럴땐

  useEffect(() => {
    onMyGroups(myGroups)
    console.log(myGroups) //[{id: 1 , title:"원하는 값"}]
  },[myGroups]); 

마지막에 인수로 [myGroups]를 넣어줌으로써 myGroups가 변할 때마다 useEffect를 다시 실행할 수 있습니다.
그러면 onMyGroups(myGroups)에 값이 들어갈 수 있습니다.