[LOLPAGO] React 설치 및 Header 구성(4)

🚗 useEffect를 이용한 Header 구성

 

useEffect를 이용하여 이벤트가 발생할 때 화면을 렌더링 할 수 있다.

 

아래의 링크를 참고하여 useEffect와 usLocation에 대해 알아보고 오는 것을 추천한다.

 

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

[React] 리액트 훅스(2) - useEffect

 

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

[React] 리액트 훅스(3) - useLocation, useNaviation

 

 

useEffect를 이용하여 Header를 구성해보자.

 

우선 우리가 구성할 페이지는 검색을 담당할 '메인'페이지,

 

챔피언 분석을 할 때 볼 수 있는 '챔피언 분석'페이지,

 

경기가 끝난 이후 경기력을 비교할 수 있는 '경기력 비교'페이지,

 

경기 시에 상대 승률이 좋은 챔피언을 추천해주는 'AI챔피언 추천'페이지 총 4가지 페이지로 구성해보겠다.

 

이를 구성하기 위해서 useEffect를 사용하려고 한다.

 

우리는 location이 변경될 때마다 렌더링을 해야 하므로 아래와 같이 작성할 수 있다.

 

const location = useLocation();

useEffect(() => {
    const path = location.pathname;

}, [location]);

 

 

내부에 들어갈 내용은 우리가 선택한 메뉴에 맞는 경로로 변경되도록 하는 알고리즘이다.

 

이는 다음과 같이 작성할 수 있다.

 

import { LOGO } from 'assets/images';
import { Image } from 'components/img';
import styled from 'styled-components';
import { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

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

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

	useEffect(() => {
		const path = location.pathname;

		if (path === '/') {
			setSelected('메인');
		} else if (path === '/champAnalyze') {
			setSelected('챔피언 분석');
		} else if (path === '/matchCompare') {
			setSelected('경기력 비교');
		} else if (path === '/AISuggestion') {
			setSelected('AI챔피언 추천');
		} else {
			setSelected('');
		}
	}, [location]); 


	return (
		<HeaderDiv>
			<Image src={LOGO} alt="LOLPAGO" />
			<button onClick={() => navigate('/')}>메인</button>
			<button onClick={() => navigate('/champAnalyze')}>챔피언 분석</button>
			<button onClick={() => navigate('/matchCompare')}>경기력 비교</button>
			<button onClick={() => navigate('/AISuggestion')}>AI챔피언 추천</button>
			<span>{selected}</span>
		</HeaderDiv>
	);
};

export default Header;

 

 

 

아래를 확인하면 각 버튼을 눌렀을 때 URL과 span이 변경되고 있다는 것을 알 수 있다.