프로젝트 과제 진행때 광고배너 만들기를 맡게 되었다.
자바스크립트로 이미 한번 만들어 보았기 때문에 쉽게 만들어 볼수 있을것 같았다.
리액트로 광고배너를 만들기를 도전을 해보았는데 우선 기능구현되어야 할 것들을 정리해 보았다.
기능 구현
1. 배너 슬라이드가 일정 시간 초마다 스스로 넘어가기
2. 배너 슬라이드 화살표 버튼 누를시 이전으로 혹은 다음으로 넘어가기
3. 배너 슬라이드 화살표가 배너에 마우스가 hover 되었을시 등장하기.
4. 배너 슬라이드 클릭시 해당 이벤트 혹은 사이트로 이동하기
리액트로 처음 진행해봤는데 생각보다 자바스크립트로 구현했을 때보다 쉽게 구현할수 있었다.
아래는 전체 코드 이다.
함수 부분
class AdBanner extends Component {
constructor() {
super();
this.state = {
img: 1,
display: 'none',
};
}
imgChangeLeft = () => {
if (this.state.img > 3) {
this.setState({
img: 1,
});
} else {
this.setState({
img: this.state.img + 1,
});
}
};
imgChangeRight = () => {
this.setState({
img: 4,
});
if (this.state.img <= 1) {
this.setState({
img: 4,
});
} else {
this.setState({
img: this.state.img - 1,
});
}
};
buttonDisplayOn = () => {
this.setState({
display: 'block',
});
};
buttonDisplayOff = () => {
this.setState({
display: 'none',
});
};
componentDidMount() {
setInterval(this.imgChangeLeft, 5000);
}
렌더링 부분 (html)
<div>
<div
className="mainBanner"
onPointerOver={this.buttonDisplayOn}
onPointerOut={this.buttonDisplayOff}
>
<botton
className="leftArrow"
onClick={this.imgChangeLeft}
style={{ display: this.state.display }}
>
<i class="fas fa-chevron-left"></i>
</botton>
<img src={`/data/img/${this.state.img}.jpg`} alt="배너이미지" />
<botton
className="rightArrow"
onClick={this.imgChangeRight}
style={{ display: this.state.display }}
>
<i class="fas fa-chevron-right"></i>
</botton>
</div>
</div>
);
}
}css는 대충 위치를 잡기 위한 것이니 생략하도록 하겠다.
html은 간단하게 제작하였다.
큰 div안에 이미지 부분, 양쪽 화살표 부분 을 넣었다.
기능 구현 4번 이미지 클릭시 해당 사이트로 이동은 a태그 혹은 link태그로 구현할 예정인데 나중에 구현하기 위해 아직 변경하지는 않았다.
배너 슬라이드 화살표 버튼 누를시 이전으로 혹은 다음으로 넘어가기
우선 처음으로 화살표 버튼을 누를시 넘어가는 것을 제작하였다.
버튼 태그에 화살표 아이콘을 넣었고 태그를 클릭시 함수를 사용하여 이미지를 변경해줄것이다.
constructor() {
super();
this.state = {
img: 1,
};일단 초기 this.state값에 img 키를 넣어준다.
나중에 백엔드와 맞춰보기 전에 목데이터를 활용하였는데 목데이터로 이미지 이름을 번호 순서로 정해두었다. 초기이미지가 보여야 하기 때문에 1로 설정해두었다.
imgChangeLeft = () => {
if (this.state.img > 3) {
this.setState({
img: 1,
});
} else {
this.setState({
img: this.state.img + 1,
});
}
};imgchangeleft함수를 제작하였다. 왼쪽 화살표 버튼을 누를시 함수가 실행될 것이다. setState값으로 버튼을 누를시 img키값을 1씩 증가 시켜주면
1,2,3,4~~ 로 진행될 것이므로 쉽게 해결할수 있었다. 하지만 이미지가 4까지 있었기 때문에 if문을 활용하여 4이상으로 가게 되면 1로 다시 복귀하도록 설정해두었다.
imgChangeRight = () => {
this.setState({
img: 4,
});
if (this.state.img <= 1) {
this.setState({
img: 4,
});
} else {
this.setState({
img: this.state.img - 1,
});
}
};오른쪽 함수도 같은 방향으로 진행되지만 -1로 값이 준다는 점 4로부터 시작된다는 점이 다르다.
이렇게 하고 onclick에 함수를 설정하면 함수가 실행되며 이벤트가 진행된다.
배너 슬라이드 화살표가 배너에 마우스가 hover 되었을시 등장하기
배너에 마우스가 올라갔을 경우 화살표 버튼이 등장하도록 하는 함수를 만들었다.
삼항연산자로 쉽게 가능할것이라고 생각이 드는데 아직 구현을 하지 못하였다
그래서 onPointerOver,onPointerOut 이벤트를 활용하게 되었다.
this.state = {
img: 1,
display: 'none',
};초기 값에 display 값을 설정해두고 none으로 설정해두었다.
css로 display none일경우 안보이게 되고 display block일경우 보이게 되는 방법으로 이벤트를 진행시킬 것이다.
buttonDisplayOn = () => {
this.setState({
display: 'block',
});
};
buttonDisplayOff = () => {
this.setState({
display: 'none',
});
};켜질때 와 꺼질때 두가지 함수를 만들어주고 setstate변화를 주었다.
그리고 이 함수들을 onPointerOver,onPointerOut 에 넣어주었다.
그러면 성공
배너 슬라이드가 일정 시간 초마다 스스로 넘어가기
setInterval함수로 이 기능을 줄수 있을것 같아서 검색해 보았다. 대부분의 블로그에서는 componentDidMount 안에 setInterval을 넣어주었다.
componentDidMount() {
setInterval(this.imgChangeLeft, 5000);
}슬라이드는 시간이 지남에 따라 한쪽으로 이동함으로 이미 만들어둔 imgChangeLeft함수가 5초에 한번씩 재 실행 되도록 설정해주었다.
이미 함수를만들어 주었기 때문에 쉽게 기능을 작동할수 있었다.
class형에는 라이프 사이클이 있어서 componentDidMount, update등 다양 한것이 있는데 확실히 파악해 둬야 겠다.
