useEffect로 useParams에 해당하는 정보를 습득하고 오류 해결

  const { id } = useParams();
  const [data, setData] = useState();
  
  useEffect(() => {
    const fetchData = async () => {
      const response = await getChat(id);
      setData(response.data);
    };
    fetchData();
  }, [id]);
  
  if (!data) {
    return null;
  }

1. useParams()

• 현재 라우팅된 url에 파라미터 값을 id에 저장 

2. useEffect()

• id 값이 변경될 때마다 해당 id와 일치한 데이터를 getChat(id)함수를 통해 데이터를 전달받는 fetchData함수를 실행

3. if (!data) { return: null; }

• 위에서 데이터를 가져올 때 async, await을 사용하고 있기 때문에 데이터를 전달 받는데에 시간이 걸린다.
• 데이터를 받기 전에 컴포넌트가 먼저 렌더링 되면 오류 발생
• 데이터가 없다면 컴포넌트가 null을 반환하도록해서 오류 해결