리액트에서 헤더를 상황에 따라 다른 버전으로 보여줄 수 있는 방법이 있을까요?

혹시 Next.js를 함께 쓰고 계신가요? 그렇다면 useRouter hook을 사용할 수 있을 것 같고, React router dom 등을 쓰고 계시다면 해당 라이브러리에서 제공하는 다른 메서드나 hook을 사용하여 path에 충분히 접근할 수 있을 듯합니다. 사용자용 헤더 컴포넌트와 영업용 헤더 컴포넌트는 디자인적, 기능적 차이가 큰가요? 어차피 아예 path가 다르다면 별도의 컴포넌트(예: BusinessHeader와 UserHeader)를 만들고, path에 따라 헤더를 렌더링해주면 되지 않을까 싶습니다. 그걸 Header라는 큰 컴포넌트로 감싸서 관리를 할 수도 있을 것 같고요. path가 같다면 좀 문제가 될 수 있는데, 로그인한 사용자의 정보를 기준으로 페이지를 다르게 그려주는 것도 한 가지 방법이 될 수 있을 것 같네요. (예: 관리자가 로그인하면 설정 메뉴를 보여준다든지)

패스는 router props으로 접근하는 방법이 있습니다. 사용자용, 영업용을 가르는 기준에 따라 if문이나 삼항 연산자 등으로 조건에 따라 컴포넌트를 뿌리면 됩니다.

1
return isUser ? <A /> : <B />;

안녕하세요! 리액트에서 헤더를 상황에 따라 다른 버전으로 보여줄 수 있는 방법에 대해서 답변드리겠습니다. 1. 라우터 컴포넌트 상에서 현재의 path에 접근하는 방법은 ' useLocation ' hook을 사용하면 됩니다. ' useLocation ' hook을 사용하면 현재 페이지의 경로에 대한 정보를 가져올 수 있습니다. 2. path에 접근하는 방법을 알았다면, ' pathname '에 따라 다른 헤더를 보여주기 위해서는 조건문을 사용하면 됩니다. 조건문으로 헤더를 렌더링하는 부분을 분리하거나, 헤더의 속성을 변경하는 방식으로 처리할 수 있습니다. 아래와 같이 ' useLocation ' hook을 사용하여 현재 페이지 경로에 대한 정보를 가져온 후, ' pathname '을 사용하여 조건문을 만들어 헤더를 렌더링하면 됩니다. 또는 ' className '을 변경하여 스타일을 적용하거나, 헤더의 속성을 변경하는 방식으로 처리할 수도 있습니다. 이렇게 조건문으로 헤더를 다르게 렌더링하는 것 외에도, 컴포넌트 분리를 통해 처리하는 방법도 있습니다. ' Header ' 컴포넌트를 ' UserHeader '와 ' BusinessHeader '로 분리하여 사용하면, 조건문을 사용하는 것보다 더 간단하고 가독성이 좋아질 수 있습니다. #3과 같이 ' Header ' 컴포넌트에서 ' UserHeader '와 ' BusinessHeader '를 분리하여 사용하면, 헤더를 렌더링하는 부분을 좀 더 깔끔하게 관리할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#1
import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();
  console.log(location.pathname); // 현재 페이지 경로
  // ...
}

#2
import { useLocation } from 'react-router-dom';

function MyHeader() {
  const location = useLocation();
  const isUserVersion = location.pathname === '/user'; // 경로에 따른 조건

  return (
    <div className={isUserVersion ? 'user-header' : 'business-header'}>
      {isUserVersion ? <UserHeader /> : <BusinessHeader />}
    </div>
  );
}

#3
function UserHeader() {
  // 사용자용 헤더 렌더링
}

function BusinessHeader() {
  // 영업용 헤더 렌더링
}

function Header() {
  const location = useLocation();
  const isUserVersion = location.pathname === '/user'; // 경로에 따른 조건

  return isUserVersion ? <UserHeader /> : <BusinessHeader />;
}