useState는 비동기야...

const [contents, setContents] = useState([]) 

// Title 선택하고 Title안의 contents 부르기
const selectTitle = async (TitleNum: number) => {
  try {
    const response = await getContents(TitleNum)
    const item = response.data
	// itme예시) itme = [content1,content2,content3]
    
    setContents(() => [...item])
    
    getRandomContent()
    
  } catch (error: any) {
    console.log(error)
  }
}

🙄예상한 흐름

1. 타이틀 목록에서 타이틀 하나를 고른다.
2. 타이틀에 속한 컨텐트 리스트를 api요청으로 불러온다.
3. 컨텐트 리스트를 setContents 함수(useState)로 저장한다.
4. 그럼 contents에 컨텐츠 리스트가 있겠지?
5. getRandomContent 함수를 실행해서 contents에 있는 값 중 하나를 랜덤으로 뽑는다.

   😥결과>>>

   4에서 5로 넘어갈 때 contents에는 값이 없었다.
   useState는 비동기 함수라서 getRandomContent()가 setContents()를 기다리지 않았던 것이다.

   😆해결>>>

   getRandomContent()를 바로 실행하지 않고 useEffect를 사용했다. useEffect의 의존배열에 contents를 넣고 contents의 값이 변할 때
   getRandomContent 함수가 실행되게 해주었다.

   useEffect(() => {
     if (contents.length > 0) {
       getRandomContent()
     }
   }, [contents])