인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

이해하시기 쉽게 더 자세히 설명해드리겠습니다.

아래의 설명을 쭈욱 따라가면서 이해해보시면 도움이 될거에요 😃

컴포넌트가 호출되면 해당 컴포넌트를 정의하는 함수가 실행됩니다.

따라서 Edit 페이지를 렌더링 한다는 말은, 곧 Edit 컴포넌트(함수)를 호출한다는 의미입니다.

함수는 호출되면 함수 내의 코드를 한줄 한줄 씩 순차적으로 수행합니다.

Edit 함수(컴포넌트) 역시 그렇습니다.

Edit 함수가 호출되면 getCurrentDiaryItem 함수가 호출됩니다. (강의 코드 37번 라인 참고)

getCurrentDiaryItem 함수 내부에서는 nav() 메서드를 호출합니다.

이 시점에서 Edit 함수는 아직 return으로 어떠한 값을 반환하지 않았습니다.

당연하죠? 함수가 아직 종료되지 않았으니까요!

따라서 우리는 이 상태를 컴포넌트 Mount 이전의 상태라고 표현할 수 있습니다.

지금까지의 상황을 정리하면 컴포넌트 Mount 이전에 nav() 메서드를 호출하게 되었습니다.

그러나 이는 잘못된 사용입니다. React Router의 nav() 메서드는 컴포넌트가 Mount 되기 이전에 호출될 경우 오류(혹은 경고)를 발생시키기 때문입니다.

그 이유는 이 동작이 부자연스럽기 때문입니다. 특정 컴포넌트가 화면에 그려지기(Mount) 전에 페이지가 이동할 경우 해당 컴포넌트는 페이지에서 제거 될 가능성이 생기기 때문에 이런 동작은 허용되지 않습니다.

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님, 질문 주셔서 감사합니다.

Edit 컴포넌트에서 nav("/", {replace: true})가 실행되지 않는 이유는 컴포넌트의 렌더링 흐름과 관련이 있습니다. React 컴포넌트는 처음 렌더링될 때 마운트 과정을 거치며, 이는 컴포넌트가 DOM에 삽입되는 순간을 의미합니다. 이 시점에서는 초기 상태나 props 설정 등 기본적인 준비 작업이 아직 완료되지 않았기 때문에 특정 로직이 의도대로 작동하지 않을 수 있습니다.

구체적으로:

• nav("/", {replace: true})는 해당 경로로 리다이렉트하는 작업을 수행합니다. 하지만 이 동작이 왜 실행되지 않는가는 컴포넌트 생명주기와 관련이 있습니다.
  
• 컴포넌트가 완전히 렌더링되지 않았을 때, 즉 필요한 모든 데이터나 조건이 설정되기 전에 특정 네비게이션 동작이 호출될 수 있습니다. 흔히 이런 문제는 데이터 로딩이나 조건이 충족되지 않았을 때 발생할 수 있습니다.
  

이에 대한 더 쉬운 설명은, Edit 페이지가 데이터나 상태에 따라 특정 조건을 만족해야 하는데, 이 조건이 완료되기 전에 리다이렉트를 시도하려다 보니 원하는 로직이 제대로 작동하지 않는 상황이 발생할 수 있다는 점입니다.

어떤 시점에 nav가 의도한 대로 동작하도록 하려면 해당 조건들이 모두 준비(이것을 “마운트 전 상태”라고 이해할 수 있습니다)가 된 후에, 리다이렉트가 실행되도록 해야 합니다. 즉, 필요한 데이터나 상태가 확보된 후이거나 특정 조건이 만족된 상태에서 리다이렉트하다면 이런 문제를 피할 수 있습니다.

관련하여 비슷한 질문이 있습니다:
- edit 컴포넌트에 nav 동작 관련 문의

이 링크를 통해 유사한 상황에서의 해결책을 참고하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.