본문 바로가기
728x90
반응형

분류 전체보기400

[리액트] Redux 사용 ( 파일 분할 / addCount / findIndex ) 파일분할let user = createSlice({ name: "user", initialState: { name: "kim", age: 20 }, reducers: { changeName(state) { state.name = "park"; }, increase(state, action) { state.age += action.payload; }, },});store.js 에 있는해당코드가 넘 길어서 따로 파일로 빼고싶을 때1. 따로 store 폴더 만든 다음 userSlice.js 파일 생성하고 import와 exportimport { createSlice } from "@reduxjs/toolkit";let user = createSlice({ nam.. 2024. 6. 10.
localStorage로 만드는 최근 본 상품 기능 1 보호되어 있는 글 입니다. 2024. 6. 8.
리액트에서 자주쓰는 if문 작성패턴 5개 보호되어 있는 글 입니다. 2024. 6. 8.
Redux 5 : 장바구니 기능 만들기 숙제 & 응용문제 보호되어 있는 글 입니다. 2024. 6. 8.
Redux 4 : state가 object/array일 경우 변경하는 법 보호되어 있는 글 입니다. 2024. 6. 7.
[리액트] Redux 사용 (배열 state 데이터 바인딩, 변경 / increase() / 다수 state) object인 state의 데이터 바인딩object 자료 만들어주기let user = createSlice({ name: "user", initialState: "kim", reducers: { changeName(state) { return "john " + state; }, },});여기서 "kim" 을 object 자료로 변경, age도 추가let user = createSlice({ name: "user", initialState: { name: "kim", age: 20 }, reducers: { changeName(state) { return "john " + state; }, },});object 자료 데이터 바인딩{state.user}의.. 2024. 6. 7.
[리액트] Redux 사용 ( 데이터바인딩 / state 변경 ) state 데이터 바인딩cart State 추가import { configureStore, createSlice } from "@reduxjs/toolkit";let user = createSlice({ name: "user", initialState: "김씨",});let stock = createSlice({ name: "stock", initialState: [10, 11, 12],});//cart state 추가let cart = createSlice({ name: "cart", initialState: [ { id: 0, name: "White and Black", count: 2 }, { id: 2, name: "Grey Yordan", count: 1 }, ],});/.. 2024. 6. 7.
[리액트] 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.
728x90
반응형