useNavigation Hook 사용 위치

핸즈온 리액트 네이티브

5.6 :: 헤더 왼쪽 버튼

작성

390

수정됨

안녕하세요.

useNavigation Hook 사용 위치가

컴포넌트 내부가 아니기 때문에 오류가 나서

그걸 따로 컴포넌트를 만들어서 그 안에 넣고 해결하셨는데,

그렇게 안하고 그냥 AuthStack 컴포넌트 안에 (10열) useNavigation을 위치시키면 안되나요?

(5.6 :: 헤더 왼쪽 버튼)

...

const AuthStack = () => {
  const navigation = useNavigation();
  return (
    ...
  );
  ...
};

답변 1

지식공유자

안녕하세요 knh님,

네, AuthStack 에서 useNavigation을 사용해도 됩니다.

다만, 이렇게 할 경우, AuthStack에 headerLeft 코드를 유지해야 합니다.

혹은 HeaderLeft 컴포넌트를 따로 만든다 하더라도 props로 navigation을 전달해줘야 합니다.

HeaderLeft 컴포넌트를 만든다면, navigation을 props로 전달받기 보다는 HeaderLeft 컴포넌트 안에서 useNavigation을 호출하는 것이 코드 관리에 있어 더 좋습니다.

정리해보면,

AuthStack에서 useNavigation을 사용하면 왼쪽 버튼 코드를 AuthStack에서 유지해야 하는데, 코드가 길어질수록 가독성이 떨어지고 관리하기 좋지 않습니다.
HeaderLeft 컴포넌트를 따로 만든다면, useNavigation을 AuthStack에서 사용할 이유가 없습니다.

감사합니다.

질문자

감사합니다 강의 잘보고있습니다 ^0^

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