React

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..

최근들어 프로젝트를 하다보면 자잘한 오류가 많이 난다. 자잘하다고 무시하면 안되는게, 코드 한줄만 잘 못써도 렌더링이 안되서 화면이 흰바탕이 된다. 내가 왜 이렇게 오류가 많이 날까? 생각해보니 나는 참 나쁜 습관을 가지고 있었다. 그래서, 나쁜 습관을 고치기 위한 강력한 해결방법이 필요했다. 난 오늘부터 프로젝트를 하면서 오류를 마주치면, 그 오류의 원인을 파악하고, 해결하는 그 과정을 모두 블로그에 적기로 했다. 어떤 오류는 1시간, 어떤 오류는 2일이나 걸려 해결하기도 하지만, 결론적으로는 문제원인이 무엇이었고, 어떻게 해결했는지가 중요하다고 생각한다. 문제를 차근차근 해결해나간다면, 앞으로 마주할 문제의 경우에는 걸리는 시간이 줄어들 것이다. 1. 영어로 된 에러코드를 읽고, 직관적으로 해석한다...

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, 버튼 누른 직후에 로딩중 글자를 ..

서버에게 데이터 요청할때 유저가 그냥 데이터 달라고 하면 서버가 보내주지 않습니다. 서버에 데이터를 요청할때는 정확한 규격에 맞춰서 요청해야 합니다 1. 어떤 데이터인지 (URL 형식으로) 2. 어떤 방법으로 요청할지 (GET or POST) 잘 기재해야 데이터를 보내줍니다. 보통, 서버에서 데이터를 가져올때는 GET 서버로 데이터를 보낼때는 POST 를 씁니다. AJAX 란? 서버에 GET,POST 요청을 할때 새로고침없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 말합니다. (get 요청을 날리고 싶으면 주소창에, post요청을 날리고 싶으면 form 태그를 이용하면 되지만, 브라우저가 새로고침된다는 단점이 존재) 그래서 AJAX를 자주 씁니다. AJAX로 GET,POST 요청을 하는..