[React] 페이지에 따라 헤더/네비게이션바 색 변경 (props 사용법)

메인페이지일 때의 헤더와 네비게이션바

다른 페이지일 때의 헤더와 네비게이션바

---

 

/* 색에 대한 정보 파일 : color.js */

const colorConfig = {
  main_color: "rgb(107, 164, 255)",
  sub_color: "rgb(255, 255, 255)"
}

export {colorConfig};

우선 색 정보를 담은 color config를 만들어줍니다.

저는 메인 컬러를 파란색, 서브 컬러를 하얀색으로 설정했습니다. 

그 후에 colorConfig 변수를 export 해주어서 다른 파일들에서 사용할 수 있게 합니다.

 

꼭 이렇게 색 정보를 따로 저장해놓을 필요는 없지만 이렇게 하면 나중에 메인컬러와 서브컬러를 바꾸고 싶을 때

이 파일에서만 색을 바꾸어주면 모든 파일에서 바뀌기 때문에 더 편리합니다!! ^_^ !!

---

/* header.js : 헤더파일 */

import React from 'react';
import styled from "styled-components"; // styled in js

/* 홈페이지 메인 타이틀 배경 */
const Title_background = styled.header`
background-color: ${(props) => props.title_setting.title_backcolor};
`;

/* 홈페이지 메인 타이틀 */
const Main_title = styled.h1`
color: ${(props) => props.title_setting.title_textcolor};
`;

/* 네비게이션바  */
const Navbar = styled.nav`
background-color: ${(props) => props.navbar_setting.navbar_backcolor};
`;

/* 네비게이션바 메뉴들  */
const StyledLink = styled(Link)`
color: ${(props) => props.navbar_setting.navbar_textcolor};

&:hover{  
  background-color : ${(props) => props.navbar_setting.navbar_textcolor};
  color : ${(props) => props.navbar_setting.navbar_backcolor};
}
`;

/* 네비게이션바 아이콘 (내정보) */
const NavbarIcon = styled.ul`
color: ${(props) => props.navbar_setting.navbar_textcolor};
`;


function Header(props) {

return (
    <>
      <Title_background {...props}>
        <Main_title {...props} >Plant Community</Main_title>
        <div className="navbar_togglebBtn">
          <FontAwesomeIcon icon={faBars}/>
        </div>
      </Title_background>
      
      <Navbar {...props}> 
        <ul className="navbar_menu">
          <li><StyledLink {...props} to="/plant_info_share">식물 기본 정보</StyledLink></li>
          <li><StyledLink {...props} to="/plant_info_share">식물 정보 공유</StyledLink></li> 
          <li><StyledLink {...props} to="/plant_info_share">내 식물 자랑</StyledLink></li>
        </ul>
        <NavbarIcon {...props}>
          <li><FontAwesomeIcon icon={faCircleUser} id="my_info" onClick={login_confirm}/></li>
        </NavbarIcon>
      </Navbar>
    </>
  );
}

export default Header;

props 값 출력결과

function Header(props) { } 에서 props는 다른 js 파일에서 Header를 import해서 사용할 때

해당 Header에 값을 넣어서 사용하면 해당 값을 header.js 파일에서 사용할 수 있는데요,

이 때의 값들이 props 안에 들어있습니다.

 

styled-components 를 이용해서 html 컴포넌트들을 만들어줍니다.

그리고 안에 {...props} 값을 넣어줍니다. 이 값도 위에서 설명한 것과 같습니다.

 

styled-component에서 props 사용

<Title_background {...props}> </Title_background>

const Title_background = styled.header`
background-color: ${(props) => props.title_setting.title_backcolor};
display: flex;
justify-content: center;
padding: 40px 0px;
`;

{...props} 값을 넣어주면 Title_background 변수에서 사용할 수 있게 됩니다.

 

헤더 파일 세팅은 끝났기 때문에 이제 각 페이지에서 props 값을 전달해주기만 하면 됩니다!!

예로 메인 페이지의 헤더와 네비게이션바의 색을 설정해보겠습니다.

/* main.js : 메인페이지 */

import React from 'react';
import Header from "../layout/header"; // 헤더
import { colorConfig } from "../config/color"; // 홈페이지 색감 정보

function Main() {
  const title_setting = { // 타이틀 색 설정값
    title_backcolor: colorConfig.sub_color,
    title_textcolor: colorConfig.main_color
  }

  const navbar_setting = { // 네비게이션바 색 설정값
    navbar_backcolor: colorConfig.sub_color,
    navbar_textcolor: colorConfig.main_color
  }
  
 return (
  <>
    <Header title_setting={title_setting} navbar_setting={navbar_setting}/>
  </>
 );
}

홈페이지 색 정보가 들어있는 colorConfig를 import를 해줍니다.

colorConfig의 sub_color와 main_color를 본인이 원하는 대로 설정해줍니다.

 

그리고 Header를 불러와서 사용할 때 title_setting값과 navbar_setting값을 넣어줍니다.

이렇게 하면 Header props에 위 값이 들어갑니다!

 

다른 페이지에서도 위와 같은 방법으로 설정을 해주면 페이지에 따라서 색을 바꾸는 것이 가능해집니다~~😏😏