오늘은 뭘 해볼거냐면 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 형식을 기존 객체 형..
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, 버튼 누른 직후에 로딩중 글자를 ..
