들어가기

로딩화면 결과

useState와 useEffect를 사용하기 위해 로딩화면을 만들어봤다.

React에서 가장 기본이 되는 훅 함수가 useState와 useEffect인데 아직까지 개인 페이지를 만들면서 이 두 함수를 사용하지 않았다. 그래서 꼭 사용해보고 싶어서 어떻게 하면 좋을까 하다가 로딩화면을 만들었다.

로딩화면

일단 로딩화면을 만들기 위한 방법에는 2가지 방법이 있다. react-spinners를 사용하는 방법과 gif를 다운받아 컴포넌트화 하는 방법이 있다.

나는 후자를 선택해서 로딩화면을 만들었다.

gif로 만들기

https://loading.io/

위의 홈페이지에 들어가면 로딩에 관련한 다양한 스피너를 만나볼 수 있다. 나는 이곳에 들어가서 Free로 된 걸 다운받았다.

컴포넌트 만들기

1. Loading.js

import Spinner from '../../assets/Spinner.gif';

import classes from './Loading.module.css';

const Loading = () => {
    return (
        <div className={classes.loadingContainer}>
            <h1>이율곡의 자기소개를 불러오고 있습니다.</h1>
            <img src={Spinner} alt="Spinner" />
        </div>
    );
}

export default Loading;

다운받은 스피너를 vsCode에 저장하고, Loading 컴포넌트를 만들어 import 해주었다. 그리고 가볍게 로딩화면을 만들었다.

사용하기

const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 2000);

    return () => clearTimeout(timer);
  }, []);

return (

  ...

{loading ? (
          <Loading />
        ) : (
          <Routes>
            {routes.map(({ path, component, key }) => (

  ...

);

이 코드는 전체 코드에서 로딩 코드의 일부만 가져왔다.

이 코드를 설명하면 useState로 로딩 페이지 상태를 관리했다. 처음에 true를 두어서 로딩화면을 띄워주고 useEffect를 사용해서 2초 후에 false로 상태가 바뀌면서 원래의 화면을 띄워주는 걸로 했다.

따로 fetch를 사용하거나 비동기 처리를 한 것도 없기 때문에 일부로 2초의 타이머를 두었다. 그래야 로딩화면이 보이기 때문이다.

그리고 useEffect에 의존성 배열을 비워두어 최초의 요청에만 렌더링 될 수 있게 했다.

정리하기

useState와 useEffect를 사용하기 위해 로딩화면을 만들어봤다. useEffect에 대해서 완벽하게 이해한 것은 아니지만, 그래도 어느 정도의 흐름에 대해서는 알 수 있는 작업이었다.

그래도 하나하나 원하는 기능을 추가하면서 좋은 페이지를 만들어가는 작업이 뿌듯하고 더 나은 페이지를 만들고 싶다.