문제

종종 웹 앱이나 웹사이트에서 예를 들어 데이터베이스에서 가져오는 사용자 데이터를 가져와야 하는 경우가 있습니다.

이 가져오기 프로세스는 useEffect를 선언하고 "getUserByID()"라는 가져오기 함수를 삽입해야 하며 종속성 배열에 일부 변수를 전달합니다.
해당 사용자 정보를 얻으려면 꽤 많은 줄이 필요합니다. uder 데이터를 저장하기 위한 UseState 후크, useEffect 후크 및 데이터베이스에 대한 JS 함수 호출.

한 줄의 코드로 이 데이터를 가져올 수 있는 방법이 있습니까? 해결책은 무엇입니까?

해결책

당신은 그것을 추측했다. 사용자 지정 후크. 사용자 지정 후크는 위에서 수행해야 하는 작업을 수행하는 JS 함수에 대한 멋진 용어일 뿐이며 사용자 개체를 하나의 변수로 반환하므로 재사용이 매우 쉬워집니다!

아이디어는 다음과 같습니다. hooks라는 폴더에 새 파일을 만들고 사용자 정보가 필요한 구성 요소에서 이 파일을 가져옵니다.
(조심하고 "useUser"또는 "usePerson"과 같이 항상 "use"접두어를 사용자 지정 후크로 지정해야 합니다. 그렇지 않으면 react에서 후크로 인식하지 않습니다!)

export const useUser(userID) {
  const [user, setUser] = useState(null)
   useEffect(() => {
    setUser(getUserByID(userID))
  },[userID])
  return user
}

사용자 정의 후크 내에서 getUserByID()를 사용하여 데이터베이스를 호출합니다. 사용자의 uid를 전달하고 사용자의 상태도 설정하고 단순히 사용자 데이터를 반환합니다.

이제 이 사용자 정보를 사용하는 구성 요소에서 이 한 줄을 사용하여 사용자 정보를 가져옵니다.

const user = useUser(userID)

이제 jsx 내에서 user.firstName, user.email 등을 사용할 수 있습니다.

결론

사용자 지정 후크를 만드는 것은 정말 쉽고 빠릅니다. 우리는 분리된 함수를 생성하고 useState 및 useEffect 후크를 삽입하여 사용자 데이터를 가져오고 반환하므로 모든 구성 요소에서 사용자 정의 후크를 재사용할 수 있습니다.

과거에 사용자 지정 후크를 사용한 적이 있습니까? 아래에서 어떻게 생각하는지 알려주세요!