React Hook (useHistory) 관련 질문드립니다.

[hmlinnie]

안녕하세요. 와플 루키 김혜민입니다.
지금 세미나 2 과제 중 학생 상세페이지의 맨 왼쪽 '학생 목록 페이지로' 버튼을 구현하려고 하고 있는데,
useHistory()를 사용하는 과정에서 계속 오류가 발생해 질문드립니다.

세미나 2 에서 진행해주신 라이브 튜토리얼과 비슷하게
App.js 안에서 다음과 같이 코드를 짠 상태입니다.
(StudentDetail은 학생 상세페이지입니다.)

그러나 다음과 같은 오류가 발생하고 있습니다.

오류를 해결하기 위해 useHistory()의 위치를 여러 곳으로 옮겨보았는데, 같은 오류가 발생해 질문드립니다!

[woohm402]

리액트 공식문서에 훅을 사용할 때에 중요한 몇 가지 규칙이 명시되어 있습니다. (혹시 도움되실까 하여: 수업에서는 이 슬라이드에서 설명했었습니다)

아무튼 저 문서에 따르면 훅을 호출하는 위치는 항상 ***"함수 컴포넌트의 최상위 위치"***여야 합니다. 가령 아래 위치는 옳습니다.

const MyComponent = () => {
  const myHookResponse = useMyHook();
  ...

아래 모든 위치는 옳지 않습니다.

const wrong1 = useMyHook(); // 함수 컴포넌트 안이 아님

const MyComponent = () => {
  for (let i = 0; i < 10; i++) {
    const wrong2 = useMyHook(); // top level이 아님
  ...

---

질문에 대한 답변을 드리자면, 먼저 올려주신 첫번째 사진에 있는 위치는 옳은 위치입니다. 두번째 사진에 있는 에러 메세지를 해석해 보면, useHistory()를 함수 컴포넌트 밖에서 호출하고 있는 것 같습니다. 첫 번째 사진의 위치처럼 수정해 주시면 해결됩니다.

또한 질문주신 부분과는 관계없지만 HistoryContext라는 걸 만들고 계신 걸로 보이는데, <BrowserRouter />의 하위 컴포넌트기만 하면 컴포넌트 안에서 useHIstory()를 호출해서 history 객체를 불러올 수 있습니다! 참고해 주세요 👍

[hmlinnie]

안녕하세요!
useHistory()를 함수 컴포넌트 밖에서 호출한다는 게 어떤 의미인지 잘 이해가 가지 않아서 다시 질문드립니다ㅠㅠ

또, Context 파일 안에서도 useHistory()를 호출해봤는데,
useState()는 잘 호출이 되는 반면 useHistory()와 useParams()는 오류가 나서 같은 훅이지만 차이점이 있는 것인지 궁금합니다!

[woohm402]

1. 컴포넌트 밖이 무슨 말이냐면

아래 코드블럭을 보면 (일반적인 리액트 컴포넌트 코드죠)

// App.js
import React from 'react';

// 1번 위치

const App = () => {
  const [state,] = useState();

  // 2번 위치

  return (
    <h1>hello</h1>
  );
};

export default App;

잘 보면 App은 일반적인 자바스크립트 함수입니다. 다만 jsx를 리턴하는 등 컴포넌트의 역할을 하고 있습니다. 1번 위치는 함수 밖의 위치이니, 다시 말해 컴포넌트 밖의 위치입니다. 반면 2번 위치는 함수 안에 있으니, 컴포넌트 안의 위치입니다!

올려주신 두번째 사진을 보면 App.js 11번 줄에서 useHistory를 호출하고 있는 걸로 보이는데, 위치를 잘 보면 컴포넌트 밖의 위치입니다. 그 부분을 짚어 드린 거예요! 해결되셨을까요?

2. useHistory 오류 발생 이유

useHistory와 useParams 훅은 BrowserRouter 하위 컴포넌트에서 실행해야만 합니다. Context가 제공하는 값들을 사용하려면 반드시 해당 Provider 하위에서 훅을 호출해야 했던 것처럼, BrowserRouter 하위에 있어야 useHistory가 정상 작동합니다!

해당 오류는 useHistory를 호출하신 곳이 BrowserRouter 하위 컴포넌트가 아니어서 발생했을 것 같습니다!

[hmlinnie]

네! 해결되었습니다.
자세한 설명 감사합니다!!