[LOLPAGO] React 설치 및 Header 구성 완료(6)

🚗 배열을 이용한 동적 구성

리액트는 항상 동적인 구성을 통해 콛으의 재사용성과 유지 보수성을 향상시킬 수 있도록 노력한다.

 

우리는 Header에 들어갈 contents내용인 '메인', '챔피언 분석',. '경기력 비교', 'AI챔피언 추천'을 정적으로 구성했는데,

 

이를 동적으로 구성하도록 해보자.

 

각 헤더 항목의 이름 'name', 경로 'path'를 객체로 가지고 배열의 각 요소를 매핑하여 HeaderItem 컴포넌트를 생성하도록 작성해보겠다.

 

이렇게 하면 헤더 항목을 쉽게 추가, 삭제, 수정할 수 있게 된다.

 

우선 constants의 contents.js에 HEADER_CONTENTS라는 배열을 생성해야한다.

 

 

다음과 같이 HEADER_CONTENTS를 생성한 뒤 export 해주었다.

 

이를 가지고 오기 위해서는 map함수를 사용하면 되는데 map 함수의 사용 방법은 아래를 참고하기 바란다.

 

https://2t-hong.tistory.com/179

[React] map함수 사용법

 

기존의 코드에서 FlexDiv안의 내용들을 배열을 이용하여 가져올것이기 때문에 다음과 같이 작성하면 된다.

 

 

{HEADER_CONTENTS.map((header, i) => (
    <HeaderItem
        key={i}
        onClick={() => {
            setSelected(header.name);
            navigate(header.path);
        }}
    >
        {header.name}
    </HeaderItem>
))}

 

 

 

이전과 동일하게 잘 작동하는 것을 알 수 있다.

 

하지만 각각의 메뉴를 구분해야하기 때문에 style을 적용해야 하는데 다음과 같이 작성하였다.

 

color또한 컴포넌트화 하여 작성했다.

 

 

import { LOGO } from 'assets/images';
import { FlexDiv } from 'components/div/Div';
import { Image } from 'components/img';
import { BACK_COLOR2, Q_COLOR } from 'constants/color';
import { HEADER_CONTENTS } from 'constants/contents';
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import styled from 'styled-components';

const HeaderDiv = styled.div`
	width: 100%;
	box-sizing: border-box;
	padding: 20px 80px 0;
`;

const HeaderItem = styled.div`
	height: 28px;
	padding: 0 16px;
	text-align: center;
	font-size: 14px;
	font-family: 'MediumFont';
	cursor: pointer;
`;

const Header = () => {
	const [selected, setSelected] = useState('메인');
	const navigate = useNavigate();
	const location = useLocation();

	useEffect(() => {
		const path = location.pathname;
		const match = path.match(/\/([^/]+)\//);
		if (path === '/') {
			setSelected('메인');
		} else if (path === '/champAnalyze' || (match !== null && match[1] === 'champAnalyze')) {
			setSelected('챔피언 분석');
		} else if (path === '/matchCompare') {
			setSelected('경기력 비교');
		} else if (path === '/AISuggestion') {
			setSelected('AI챔피언 추천');
		} else {
			setSelected('');
		}
	}, [location]);

	return (
		<HeaderDiv>
			<Image src={LOGO} />
			<FlexDiv
				style={{
					width: '100%',
					borderBottom: `1px solid ${BACK_COLOR2}`,
					marginTop: '20px',
				}}
			>
				{HEADER_CONTENTS.map((header, i) => (
					<HeaderItem
						key={i}
						onClick={() => {
							setSelected(header.name);
							navigate(header.path);
						}}
						style={
							selected === header.name
								? { color: Q_COLOR, borderBottom: `3px solid ${Q_COLOR}`, fontFamily: 'BoldFont' }
								: {}
						}
					>
						{header.name}
					</HeaderItem>
				))}
			</FlexDiv>
		</HeaderDiv>
	);
};

export default Header;

 

다음과 같이 색이 입혀진 것을 알 수 있다.

 

더하여 로고 이미지의 크기를 조절하고 뒷 배경과 상호작용 할 수 있도록 변경하였다.

 

 

이제 Header를 구성해본 경험을 바탕으로 각각에 들어갈 내용들을 모두 작성하여 보도록 하자.