도리쓰에러쓰

리액트를 사용하면 빠질 수 없는 라이브러리가 바로 '상태 관리 라이브러리'이다. 뷰나 앵귤러와 비교했을 때 가장 큰 차이점은 단방향 바인딩인데, 부모 컴포넌트에서 자식 컴포넌트로만 state를 props로 전달할 수 있고, 반대로 부모 컴포넌트로 props를 직접 전달할 수는 없다. 자식 컴포넌트에서 부모 컴포넌트에 있는 state를 변경하려면 setState를 props로 넘겨줘야 한다. 이것이 반복되다 보면 Props Drilling이 발생하게 되고 프로젝트의 규모가 커질수록 props의 depth가 증가하게 된다. 이는 불필요한 리렌더링을 발생시킬 수 있다. 그럼 props로 모든 state를 관리하는 것은 추천하지 않는가? 컴포넌트의 재활용성, 의존성 분리 등의 측면에서의 props를 state로..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux2 :: reducer / dispatch로 데이터 수정하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux1 :: props 대신 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 dori-coding.tistory.com 1. redux를 통해 Alert창 닫기 기능 만들기 1️⃣ Cart..js에 alert 창을 하나 생성합니다. * div class는 bootstrap에 정의되어 있는 것을 사용하였습니다. 지금 구매하시면 신규할인 20% 닫기 2️⃣ alert 창의 상태를 저장하는 state와 reducer를 만듭니다. ..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux1 :: props 대신 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component가 많을 땐 Context API 사용 dori-coding.tistory.com 1. reducer() 이용하여 수량 변경하기 🔔 Redux 쓰는 이유 : state 데이터 관리 용이합니다. redux에선 state 데이터의 수정방법을 미리 정의하는데, 지금부터 reducer() 세팅 방법 두가지를 알아봅시다. 💡 reducer() 세팅 방법 - 1 - index.js에서 store 변수에 createSt..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component가 많을 땐 Context API 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component 3개 중첩하여 만들고 state 전달하 dori-coding.tistory.com 1. cart 페이지 만들기 1️⃣ Cart.js 파일 생성 후 아래 코드를 작성합니다. import React from 'react'; import { Table } from 'react-bootstrap'; function Cart() { return( # 상품명 수량 변경 1 Table cell Tabl..