1-1. 기억하고 싶은 코드 - 함수 인자로 특정 값 전달하기
handleBtn = (id) => {
this.setState({
currentPicture: this.state.pictures[id],
activeTab: id,
});
};<li>
<button
className={this.state.activeTab === 0 ? "btnActive" : ""}
onClick={() => this.handleBtn(0)}
/>
</li>위 그림에서 왼쪽의 막대기 버튼 4개가 있다. 1번째 막대기를 클릭하면 그에 해당하는 제품의 이름과 사진이 떠야한다. 처음에는 4개의 막대기 버튼에 onClick={this.handleBtn} 조건을 주니까 4개의 버튼 모두 변화가 일어나는 문제가 생겼다.
그래서 클릭하면 함수를 실행시킬 수 있는 로직을 짜고 그 안에 버튼마다 인자를 다르게 전달했다. 여기서는 불러오는 데이터의 인덱스 번호와 맞추기 위해서 0부터 시작하는 인자를 만들었다.
그리고 handleBtn 함수에서는 클릭과 동시에 currentPicture: this.state.pictures[id]를 업데이트를 시켰다. 전달된 인자 값을 이용하여 보여질 데이터가 있는 배열의 인덱스 값으로 사용할 수 있었다.
1-2. 기억하고 싶은 코드 - translateX로 이미지 이동
<div className={`sliderContent activeSlide${this.state.currentPicture.index}`}>
<div
className="sliderWrapper"
style={{
transform: `translateX(-${
this.state.currentPicture.index *
(100 / this.state.pictures.length)
}%)`,
}}
>
{newProduct.pictures.map((item) => {
return (
<ImgBox key={item.index} src={item.src} index={item.index} />
);
})}
</div>
</div>슬라이더를 만들 때 왼쪽의 막대기 클릭 혹은 아래의 화살표 클릭을 통해 이미지를 넘겨야했다.
transform: translateX(-100%) 이런 식의 코드는 요소 크기(100%)만큼 X축의 왼쪽 방향으로 이동시킨다는 것이다. 슬라이더의 이미지들을 담고 있는 slideWrapper에 스타일 속성을 주었기 때문에 slideWrapper 전체 크기/이미지의 갯수 이런 식으로 이동시킬 퍼센티지의 크기가 계산되었다.
1-3. 기억하고 싶은 코드 - scss내 for문
class ImgBox extends Component {
render() {
return (
<div class="ImgBox">
<img id={`slide${this.props.index}`} src={this.props.src} />
</div>
);
}
}
//.scss 코드
$index: 0;
@for $index from 0 through 3 {
.activeSlide#{$index} #slide#{$index} {
opacity: 1;
}
}이 코드를 쓴 이유는 플렉스 되어 있는 slideWrapper 내부의 이미지들 중에서 클릭했을 때 보여지는 이미지만 opacity: 1, 나머지 이미지는 흐릿하게 하기 위해서이다.
scss에서는 변수를 지정할 수 있다. 그를 이용해서 불리는 인덱스에 따라서 activeSlide와 이미지 자체를 선명하게 하는 로직을 구현할 수 있었다.
2. 아쉬운 점
Distructuring
Distructuring은 ES6에서 새롭게 도입된 구문으로서 객체에서 간편하게 밸류를 추출할 수 있도록 한다. 로직을 짤 때부터 구조분해를 활용하고 싶었지만 항상 마지막에 리팩토링할 때 하게되는 것 같다. 제발 익숙해질 수 있도록 노력하자!!!
