웹

이미지 슬라이더 만들기 (React, scss)

만들고자 하는 것 쇼핑몰 이벤트 구역에서 배너를 돌아가게 하는 이미지 슬라이더를 만들 것이다. 소스코드 이미지를 div로 감싼 후에 해당 div의 className에서 현재 인덱스를 가지고 있는 current 상태값과 비교를 통해 클래스명을 컨트롤 해준다. 모든 이미지의 opacity: 0; 으로 설정하여 현재 이미지의 순서가 아니면 이미지가 보이지 않도록 설정한다. 그리고 인덱스가 같을 경우 current에 대한 css를 opacity: 1; 을 넣어줌으로써 해당 이미지가 보일 수 있도록 해준다. const [current, setCurrent] = useState(0) // 이미지 배열의 현재 인덱스, 특정 초마다 변경됨 const sliderLength = sliderData.length // 전체..

2024. 1. 17. 22:51

웹

Redux Toolkit 으로 상태 관리하기

전역상태 관리가 필요한 이유 리액트에서는 상태를 통해서 UI에 있는 정보를 업데이트하고 쉽게 렌더링 할 수 있는데 아무 상태나 막 생성하다보면,, 한 함수 안에서 엄청 여러개의 상태값을 변경하고 있는 걸 볼 수가 있다. 그리고 상태값을 사용하거나 상태값을 세팅하기 위해서 자식컴포넌트로 계속 내려주는 일이 생길 수도 있다. 그런 문제점을 차단하기 위해서 많이 쓰이는 전역 상태들은 여러 라이브러리로 관리할 수가 있다. 여기에서는 리덕스로 관리하는 법에 대해서 정리를 해보고자 한다. 사용법 1. createSlice() const { createSlice } = require('@reduxjs/toolkit') 리덕스의 메서드로, 이니셜 상태, 리듀서 함수 객체, 슬라이스 이름 등의 정보를 받아 슬라이스를 만..

2024. 1. 17. 20:04