코딩애플

오늘은 뭘 해볼거냐면 JSON.stringify와 JSON.parse에 대해서 간단히 알아보고, localStorage 에 최근 본 상품의 id를 배열로 담아보는 기능을 만들어보겠슴다 JSON.stringify 와 JSON.parse 여기 한 객체가 있습니다 let obj = {name: 'kim'} 만약 이 상태로 localStorage.setItem('data', obj) 해버린다면 예쁜 {name: 'kim'} 요 상태로 저장이 되지 않고, localStorage의 value에 [object Object] 라며 객체가 깨져서 나올겁니다 깨져서 안나오고 이쁜 상태로 obj를 보존하려면 어떻게 해야할까? JSON.stringify로 obj를 감싸면 됩니다! 그렇다면 반대로 JSON 형식을 기존 객체 형..

실력향상 응용문제들 : 응용1. 표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면? 응용2. 주문하기 버튼 누를 때 이미 상품이 state안에 있으면 추가가 아니라 기존 항목 수량증가만? 응용1. 표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면? (Cart.js) # 상품명 수량 변경하기 삭제하기 {/*데이터 갯수에 맞게 표 생성해달라고 반복문쓰는 것도 좋을듯요*/} {/*map으로 html 생성할때 일단 {}부터 쓴다 */} { carts.map((item,i)=>{ return ( {carts[i].id} {carts[i].name} {carts[i].count} { dispatch((changeCount(carts[i].id))) }}>➕ {/*버튼을 누르면 상품이..

Redux store에 저장된 state가 array,object 자료인 경우, state 변경을 좀 편리하게 할 수 있다 그 방법을 알아보자 redux state가 array/object인 경우 변경하려면 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ state.name = 'park' } } 직접 state를 수정해도 변경이 잘 됩니다 array/object 자료의 경우 state변경은 state를 직접 수정해버려도 잘 되니까 직접 수정하십시오. 만약,버튼을 눌렀을때 변경하려는 자료의 +1을 해주고 싶으면? let user = createSlice..

Redux 의 state를 변경하고 싶다고요? 그러면 3가지 단계를 따르세요 store.js 에 state 변경해주는 함수부터 만들고 그 함수를 export 해두고 필요할때 import 해서 dispatch()로 감싸서 호출함 1. store.js에 state 변경해주는 함수부터 만들어요 import { configureStore, createSlice } from '@reduxjs/toolkit' //reducer 뒤에는 state 변경함수를 넣는다 let user = createSlice({ name: 'user', initialState: 'kim', reducers: { //reducers즈 란다. changeName(state){ // 파라미터 state는 기존state를 뜻함 return 'J..

Redux-toolkit라이브러리 왜 씀? props 없이도 컴포넌트간 state 공유가 가능해짐 ,, 등 컴포넌트들이 redux store.js 에서 state들을 가져다 쓸 수 있음 Redux store에 state 보관하는 법 크게 두가지로 나뉩니다 1. 먼저, createSlice() 로 state를 만들고 2. 아래에 configureStore()에 등록하면 됩니다 import { configureStore, createSlice } from '@reduxjs/toolkit' //여기에 state를 만들거임 //createSlice는 useState와 비슷한 역할임. state 생성 // state 하나를 slice 라고 부름 //initialState 뒤에는 초기값 state를 넣음 let u..

스스륵 나오는 애니메이션을 만들고 싶다면? 애니메이션 동작전 스타일을 담을 className을 만들기 애니메이션 동작후 스타일을 담을 className을 만들기 transition 속성도 추가 처음에는 떼엇다가 붙이기 이 순서에 따라서 저번 게시물에서 만들었던 탭의 내용이 서서히 등장하는 fade in 애니메이션을 만들어보것음 먼저, 애니메이션 동작전후 스타일을 담을 className을 만들고, transition 속성도 추가해볼게요 (css파일) .start{ opacity:0; /* 안보임 */ } .end{ opacity:1; /* 보임 */ transition: opacity 0.5s; /* 천천히 보임 */ } 다음으로 '버튼을 누를때마다 end를 부착해주세요~!' useEffect를 써서 st..

동적인 UI 만드는 방법 1. html, css 로 미리 디자인 완성해두고 2. UI의 현재상태를 저장할 state 하나 만들고 3. state에 따라서 UI가 어떻게 보일지 작성하기 먼저, 버튼0 버튼1 버튼2 내용0 내용1 내용2 디자인하기 귀찮아서 버튼은 react-bootstrap 사이트에서 복사함 두번째로, UI의 현재상태를 저장할 state를 만들기 function Detail(){ let [tab, setTab] = useState(0) (생략) } 탭 ui의 상태는 0번 내용이 보이거나/ 1번내용이 보이거나/ 2번내용이 보이거나 셋중하나이기 때문에 그때그때마다 setTab()으로 state를 변경해주면 될듯 마지막으로, state에 따라서 ui가 어떻게 달라 보일지 작성 function D..

3가지 문제를 풀어보았다. 응용1, 버튼 2번 누르면 7,8,9 상품 가져와서 보여주려면? - count 라는 state를 사용했다. - axios.get 요청 하는 부분이 길어서 getMoreShoes 라는 함수를 위에 선언하여 가져다 썼다. 함수를 선언하는 위치가 중요하다고 느낀다. 아래에 app 아래에서 선언하였더니 각종 state들이 undefined 로 에러가 떴다. 응용2. 버튼을 3번 누르면 더 상품이 없다고 안내문을 띄우려면? let [count, setCount] = useState(0); 해주고 클릭이벤트 발생시 setCount 하나씩 증가해주고 count가 1일때 data2, count 2일때 data3, count 3일때 alert창 띄워줌 응용3, 버튼 누른 직후에 로딩중 글자를 ..