Dev Lemmy

진행중인 프로젝트의 장바구니 페이지에서 수량 증가 감소 버튼으로 수량을 변경해보겠음.일단 수량은 store.js의 items 슬라이스에 있으니 items 슬라이스에서 리듀서 함수(state 변경 함수)를 작성해보자. 먼저 store에서 리듀서 함수를 만들자.플러스 버튼을 눌렀을 때 수량이 증가할 countUp이라는 함수와마이너스 버튼을 눌렀을 때 수량이 감소할 countDown이라는 함수를 만들어주겠음.countUp, countDown 함수 모두 공통적으로 버튼을 클릭한 배열의 요소에 접근해야하니 state와 action 두 매개변수를 사용하고,index에 접근하기 위해 action.payload를 사용하여 변수를 만들어준다. countUp 함수는 수량이 증가하는 것이므로 수량이 음수값을 가질 일 이 없..

Redux 라이브러리 사용 중리듀서 함수(state 변경 함수)를 JSX에서 호출 시 name 속성을 변경하도록 코드를 작성하였는데state가 객체 배열로 정의되어있으나 리듀서 함수에서 return 문자열을 반환하고 있어서 에러가 발생하였다.이것을 해결하기 위해 배열의 특정 요소를 update하도록 코드를 수정하고,어떤 요소를 수정하도록 할지 payload 프로퍼티를 사용하는법을 포스팅 하겠음. 먼저 JSX에서 state의 배열 요소중에 어떤것을 변경하도록 할지 인덱스를 store.js의 리듀서 함수 호출시에 넘겨주기 위해dispatch(changeName(i))} 으로 넘겨주겠음. JSX에서 dispatch()로 리듀서 함수를 호출할 때 넘겨주는 인자를 payload라고 관용적으로 부르고 작명한다. 그..

리덕스에서 state 변경하는 방법을 알아보자.지금까지 useState처럼 변경하는게 아닌 다른 방법을 사용해야하는데,일단 store.js에서 user라는 slice를 변경한다고 가정하자그럼 먼저 slice를 수정하는 함수를 reducers 속성에 작성하고slice를 수정하고 싶은 컴포넌트에서 이 함수를 실행해달라고 store.js에 요청하면 된다. 3step으로 정리하자면 step 1- slice 수정해주는 함수 만들기changeName의 매개변수인 state는 기존 state를 뜻하고 (여기선 'Da Hee')자유로이 작명 가능하지만 관습적으로 state라고 작성하여 사용한다.이 state를 사용하고 싶으면return 'lemmy ' + state 하여 사용 할 수 있음이제 changeName() 함..

상품 목록 페이지에서 플러스 버튼을 누르면 주문 수량이 1씩 증가하는 버튼을 만들어보자. 먼저 list 페이지에서 버튼과 수량을 나타내보겠음 이제 버튼 클릭 시 JS 코드를 실행시키려면 onClick 속성을 하용하면 된다.하지만 이렇게 사용하면 에러가 발생한다. 이유는 클라이언트 컴포넌트가 아니라 서버 컴포넌트이기 때문에 에러가 발생하는 것이다.(onClick 속성은 클라이언트 컴포넌트에만 사용 가능함) 그래서 클라이언트 컴포넌트로 바꾸어 줘야한다.        onClick 잘 되는것을 확인했으니이제는 원하는데로 onClick시 수량이 증가하도록 코드를 작성해보자. 먼저 상품 수량을 담을 state를 만든다.(state를 쓰면 값이 변경되면 자동 재렌더링이 되므로 아주 좋음) 이제 JSX에서 중괄호 문..

데이터를 Redux store 안에 보관해 Cart.js 페이지에서 데이터 바인딩 해보자.데이터 갯수에 맞게 표 생성하고 반복문 쓰면 될 것이다.장바구니에 담긴 데이터라고 가정하고 장바구니 목록을 만들 것임. 먼저 store.js 파일에서 createSlice 함수를 사용해 state를 만들자 그리고 reducer에 등록해준다. 그러면 이제 사용 가능할것임.한번 사용해보자 먼저 Cart 컴포넌트에서 items 스테이트를 사용할 수 있도록useSelector로 변수를 만들어준다. 이제 map() 함수로 반복문을 만들자tbody 안의 내용을 items state의 array 갯수만큼 반복문을 돌리면 될것이니items.map() 해보자 map()를 사용하고고유 key갑으로는 item의 id값으로 하자. 그리고..

리덕스 store에서 state를 사용하는 법을 알아보겠음. 먼저 redux는 왜 사용하냐?컴포넌트간에 state공유가 귀찮을 때 사용함(props 전송이 아예 필요가 없음) store 안에 state 만드는 법을 알아보겠음. 먼저 stroe.js 파일에다가 createSlice() 함수를 사용한다.(useState 비슷한 역할임)여기에 name이라는 속성을 주고 state 이름을 작명 후initialState라는 속성에 값을 주면 된다.(state 하나를 slice라고 부름) 이렇게 만들었다고 사용 가능한게 아니라 configureStore에 등록해줘야함. reducer: { }안에 등록할 때엔 작명: createSlice()의 name.reducer 해주어야 한다. 이제 만들었으니 Cart 컴포넌트에..

사용자가 장바구니에 추가한 아이템을 표 형식으로 보여주도록 해보자.새로운 페이지가 필요할 것이니Route 부분에서 새로 코드를 작성해준다. 그런데 element에 직접 JSX를 작성하기엔 너무 지저분하니 따로 빼로 집어넣어 사용하겠음 (컴포넌트로) 새로운 컴포넌트를 src 파일 안에 만들겠음. 보통 컴포넌트 파일들은 대문자로 시작하는게 국룰임.이제 Cart 컴포넌트 만들자.  장바구니 페이지는 표 형식으로 상품을 쭉 보여줄 것이다.그러니 표를 만들 것임. 태그를 이용하면 되는데 이러면 디자인을 직접 다 해주어야 하니깐react-bootstrap을 사용하자. 당연히 import부터 해야할 것이다.그리고 이용해서 UI 만들겠음. 이제 App.js에서 사용해보자. 이제 내용을 데이터 바인딩해서 렌더링 시켜보..

SPA를 만들어주는 리액트같은 라이브러리의 가장 큰 단점은 바로컴포넌트간에 state 공유가 어렵다는 것이다. 부모 자식 관계의 컴포넌트간에 props로 전송 가능하다.이런식으로 state를 공유해야 한다. 현재 App이라는 컴포넌트 안에Detail 컴포넌트가 있고그 안에 TabContent 컴포넌트가 있다.그리고 App 컴포넌트에 guitar라는 state가 있다.그런데 TabContent 컴포넌트에서 guitar state를 사용하기 위해선App에서 Detail로 props 전송을 하고또한번 Detail에서 TabContent로 props 전송을 해야한다. 만약 구조가 더 깊다면 (10개의 컴포넌트가 하위의 하위의 하위.. 이런식으로 있다면)props 전송을 굉장히 많이 해야할 것이다.이런것들을 방지..

저번에 만든 탭 UI에서 전환시에 밋밋하니 재미가 없다.애니메이션을 줘보자. 순서는 먼저 CSS 파일에서 부착하면 애니메이션이 실행될 className을 하나 만들고다음에 js 파일에서 className을 속성으로 주면 됨 전환 애니메이션을 주고 싶으면1. 애니메이션 동작 전 className을 만들고2. 애니메이션 동작 후 className을 만든다3. 그리고 둘 중 하나의 className에 transition 속성을 주고4. 원할때 2번 className을 부착하면 된다. 탭의 내용물이 fade-in 되는 애니메이션을 만들어 보겠음.위의 순서대로 진행해보자. 먼저 CSS에서 애니메이션 동작 전,후 className을 만들자. .start 와 .end라는 className으로 효과를 만들어 준다. 그..

탭 UI를 만들어보자.detail 페이지에서 여러 탭으로 상품정보, 배송, 상품평 등을 보여주도록 만들어볼 것임. 이런 UI들은 쉽게 말해서 버튼이 3개 있고 내용들도 3개가 있는데버튼 1번을 누르면 1번 내용이 보이고 2번을 누르면 2번 내용이 보이고.. 이런식으로 작동하게 만들면 그게 탭이다.그냥 만들었던 모달창이 3개 있다고 생각하면 된다. 그럼 전에 공부했던 내용대로 3 step으로 만들어보겠음. step1로 HTML, CSS로 미리 디자인을 한다.직접 만들어도 좋지만 react-bootstrap 사이트에서 쓸만한 UI를 가져오겠음. 이제 이걸 쓰기위해선 import를 해줘야 함 Nav라는 태그를 가져다 쓸 때 유의할 점이 있는데Nav.Item 태그는 버튼 하나이다그래서 버튼 하나를 추가로 만들고..