본문 바로가기
728x90

분류 전체보기427

[리액트] Redux 설치와 사용 (state 보관 / 갖고 오기 / 추가 ) 장바구니 페이지 만들기= 리액트 부트스트랩 사용방법 {/* Redux - 장바구니 페이지 만들기 */} }>라우트 사용해서 장바구니 페이지 생성 가능.장바구니 안에 들어갈 내용은 속성 element 사용해서 적어줌 리액트 부트스트랩 사용해서 element 에 들어갈 html 생성 - 리액트 부트스트랩 import 필수import { Table } from "react-bootstrap";function Cart() { return ( # 상품명 수량 변경하기 1 .. 2024. 6. 6.
[리액트] 애니메이션 / div 그룹화 / 클래스 중복 / cleanUp function 활용 div 그룹화 - 클래스명을 내용마다 다 일일이 부착을 해야 애니메이션이 보임. function TabContent({ 탭 }) { return [내용0, 내용1, 내용2][ 탭 ];}컴포넌트 사용해서 if 문 생략한 코드function TabContent({ 탭 }) { return ( {[내용0, 내용1, 내용2][탭]} );}  애니메이션 만들기- 투명도가 0에서 1로 서서히 증가하는 애니메이션  1. 애니메이션 동작 전 스타일을 담을 className 만들기 2. 애니메이션 동작 후 스타일을 담을 className 만들기 3. transition 속성도 추가4. 원할 때 2번 탈부착1. 애니메이션 동작 전2. 애니메이션 동작 후 className 만들기 .start { opac.. 2024. 6. 5.
[리액트] 데이터 바인딩 차이 ( 변수 / 컴포넌트 ) 변수 데이터 바인딩다른 js 파일에 있는 html 데이터 바인딩다른 파일로 빼서 변수에 담은 후, export let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000, }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000, }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000, },];export default data;다른 파일 생성 후, array 배열 데이터를 변수.. 2024. 6. 4.
Redux 3 : store의 state 변경하는 법 보호되어 있는 글 입니다. 2024. 6. 3.
Redux 2 : store에 state 보관하고 쓰는 법 보호되어 있는 글 입니다. 2024. 6. 2.
장바구니 페이지 만들기 & Redux 1 : Redux Toolkit 설치 보호되어 있는 글 입니다. 2024. 6. 1.
728x90

티스토리툴바