Splash 화면을 구현해야하는데요...

업보빔 맞고 있어요 .. 누가? 바로 내가..
자바스크립트 함수 하나 짜는데도 쩔쩔 매는 나지만
또 프로젝트에서 1인분은 꼭 하고 싶다는 욕심은 있는..

몰라서 구글링하는데 그게 내것이 안되면 그냥 구글링으로 끝나버리니 꼭 내것으로 만들자는 생각

구현하면서 어려웠던 점

1) 화면 전환되면서 바로 다른 링크로 넘어가는 부분은 usehistory로!

history 객체는 페이지 이동 내역을 정보로 가지고 있는 객체로
객체의 메소드를 이용하여 앞으로 가기, 뒤로 가기 등의 기능을 구현할 수 있다.
즉, 홈페이지 내에서 뒤로가기나 앞으로 가기를 할 수 있는 것은 history가 남아있기 때문이다.

goBack()을 하면 뒤로가고 goForward()를 하면 앞으로, push()를 하면 정해진 url로 갈 수 있게 된다.

( goForward(), goBack() 메소드)

import { useHistory } from 'react-router-dom';
// 훅을 불러와 useHistory를 사용하여 history 객체에 접근할 수 있다. 

const app = () => {
	const history = useHistory() {//훅을 변수로 지정한다.}
  return (
    <button onClick={() => {history.goBack(1)}}>뒤로가기</buttom>
    {// 객체처럼 사용한다!}
  )
}

export default App;

• useHistory 는 라우터의 자식 컴포넌트에서만 동작하므로, index.js 에서 렌더링할 컴포넌트를 BrowserRouter 로 감싸주어야 한다. ??

우리팀의 경우에는 리액트 라우터 돔 5.2.0 버전을 사용하기 때문에 useHistory를 사용하지만 6버전을 사용할 경우 useHistory가 아닌 useNavigate로 사용해야한다 ! 6버전에선 useNavigate로 대체 되었음!

• https://velog.io/@chl4842/useHistory
• https://blog.woolta.com/categories/1/posts/211

2) history.push()

처음엔 goForward나 goBack 메소드를 이용해 로그인페이지로 넘어갈 수 있을 거라고 생각했지만 해당 메소드의 경우 페이지 이동 내역이 있어야하기 때문에 초기화면에서 다음 화면으로 넘어갈 수 없었다. 때문에 path를 이용하여 해당 주소로 넘어가는 history.push를 사용하니 구현..
path 를 이용하여 다른 페이지로 이동하기 위해서는 원래는 Link 컴포넌트를 사용해야 하지만, push와 이벤트 제어를 이용하여, 이벤트가 발생하는 경우 이동 할 수 있게 만들 수 있다.

그래서 지정 path값을 통해 해당 주소로 넘어가는 history.push를 사용했다.

• https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router/42121109#42121109

3) useEffect 훅 사용하여 splash 구현 !

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import LogoSrc from '../assets/Logo.png';

const Logo = styled.img`
    display: block;
    width: 150px;
    margin: 40vh auto;
`;

const BodyColor = styled.body`
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
    animation: change-background 3s ease;
    
    @keyframes change-background {
    0% {
        background: #00BCD4;
    }
    100% {
        background: #FFFFFF;
    }
}
`

function Start(){
    const history = useHistory();
    const timeOut = () => {
        setTimeout(()=>{
            history.push('/login');
        },3000);
    };

    useEffect(()=>{
        timeOut();
        return ()=>{
            clearTimeout(timeOut);
        };
    });

    return(
        <BodyColor>
            <Logo src={LogoSrc} />
        </BodyColor>
    )
}

export default Start;