10.30.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-1 챕터리뷰

[ 새롭게 알게된 것 ]

---

1. useEffect 첫번째 파라미터에는 async 함수를 사용할 수 없음을 알게됨

---

대신 함수 내부에서 async를 사용하는 새로운 함수를 선언해주어야 함

useEffect(() => {
    const fetchUsers = async () => {
    	...
    };

  }, []);

---

2. 로딩상태관리 로직을 알게됨

---

초깃값은 false로 설정해줌

useEffect를 사용해 컴포넌트가 마운트 되는 시점을에 로딩상태를  true로 변경해서 '로딩중'이라는 문구를 보여주고

마운트 완료된 시점엔 다시 false로 초기화 해줌.

---

3. 버튼을 눌려서 API 재요청 기능구현할땐 fetchUsers 함수를 바깥으로 꺼내 버튼과 연결해야됨

---

앞서 1번 내용중 useEffect 첫번째 파라미터에 async 함수를 못사용해서 내부에 선언해서 사용했던 fetch함수

버튼과 연결하려면 하나의 메소드로 꺼내주면 됨.

버튼과 연결은 아래처럼 연결해주면 됨.

단, 반드시 전체 컴포넌트를 <></> 태그로 반드시 감싸서 하나의 태그가 리턴되도록 설정해줘야됨을 주의해야함

  return (
    <>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.username} ({user.name})
          </li>
        ))}
      </ul>
      <button onClick={fetchUsers}>다시 불러오기</button>
    </>
  );
}

---