[동아리 소개 페이지 만들기] 3. 페이지들 만들고 동적 기능 추가하기1 - Home

1. 구현하기

1) 초안

 지난 회의때 작성안 초안이다. 이 초안을 바탕으로 React를 이용하여 여러 페이지들의 body를 간단하게 구현하였다.

 

 

2) contets 구현

위의 contents를 Home페이지의body에 넣어주었다. 간단하게 <div>태그를 이용했다.

대충 contents를 넣은 화면이다.

 

CSS를 적용한 화면이다.

CSS를 적용한 결과이다. CSS 파일에서 <div>에 backgroundimage의 경로를 넣어 배경 이미지를 주었고 나머지는 기본적인 색과 크기, border 등을 넣었다.

 

3) 동적 기능 추가하기

효과 넣기

React의 useEffect hook을 이용하였다.

로고 애니메이션 적용하기

화면이 랜더링될 때마다 로고에 애니메이션이 적용되도록 넣었다.

 

2. 문제 해결 과정에서 배운 것들

• useEffect hook
• CSS애니메이션

 

3. 느낀점

React의 JSX문법과 여러 기능, library에 대해 실전적으로 배웠다.특히 React에서 데이터가 처리되는 과정이랑 데이터 바인딩, callback함수, useState, useEffect 의 적용 방법을 한층 더 깊게 배울 수 있었다.

이 과정에서 React 웹 애플리케이션이 어떻게 랜더링되고 상태, useEffect hook이 어떻게 작동하는지 잘 배울 수 있었다.