효과 만들기 - 1. 로딩 효과 만들기

효과 만들기

FrontEnd 개발을 하다보면 API를 적용하는 컴포넌트나 반복적인 작업을 하기 위한 컴포넌트등이 있지만, 가장 기본적인 형태의 독립적이고 재사용이 가능한 컴포넌트들이 있다.

예를 들어, 로딩중인 상태를 알려줄 수 있는 컴포넌트나, 데이터를 가져오기 직전의 데이터 표, 이미지등의 영역을 잡아 보여줄 수 있는 스켈레톤, 가장 많이 사용하고 기본적인 버튼, 입력 컴포넌트등이 있다.

이런 컴포넌트는 외부 라이브러리를 이용하여 사용할 수 있지만 직접 만들어보며 어떤 구조로 컴포넌트가 이루어져 있는지, 이벤트를 어떻게 넘겨주면 좋은 건지 이해하고 라이브러리에 너무 의존하지 않기 위해서 직접 간단한 컴포넌트를 만들어보기로 했다.

 

어떻게 만들까

처음엔 가장 기본적인 HTML로 만들까 고민을 했었지만, 회사나 스터디 같은 모임을 통해 프로젝트를 진행한다면 순수한 HTML파일을 이용해 개발을 하지 않기 때문에 가장 많이 사용한 React를 이용해 컴포넌트 형식으로 만들기로 했다.

React 컴포넌트로 만든다면 나중에 React를 이용해 개발을 하게 될 때 가져와 사용할 수 있기도 하고 추후 다른 라이브러리나 프레임워크를 이용하여 개발을 하게 될 때에도 큰 수정없이 이용할 수 있을거라 생각 된다.

스타일의 경우 css파일을 이용하기보단 styled-components를 이용하여 컴포넌트별 스타일을 지정해주도록 구성했다.

 

로딩 컴포넌트 만들기

 

원형 로딩 효과

가장 기본적이라 할 수 있는 원형으로 돌아가는 형태의 컴포넌트

 

 

가로 막대 로딩 효과

가로로 길게 늘어진 로딩 효과

 

스타일을 조정하기위해서는 수정하고 싶은 스타일을 props 형태로 컴포넌트에 적용해주면 여러곳에서 다양한 크기에 맞게 사용할 수 있을 것 같다.