전체 글 (166) 썸네일형 리스트형 Redux앱(1) - 카운트 앱 생성 실무에서 redux를 사용하면 보통 미들웨어와 같이 사용합니다. 이번 앱은 redux만 배우는 것이라 미들웨어 없이 카운터 앱을 만들겠습니다. react 앱 설치 npx create-react-app ./ --template typescript react-redux-app폴더를 열고 위 명령어대로 react를 설치합니다. redux 라이브러리 설치 npm install redux --save 위 명령어대로 redux를 설치합니다. Counter UI 및 함수 생성 Clicked: times + - App.tsx의 UI입니다. Reducer 생성 const counter = (state = 0, action: {type: string}) => { switch(action.type) { case "INCRE.. Redux 리덕스(Redux)란? Redux는 JS app을 위한 관리 라이브러리입니다. props vs state vs redux props state properties의 줄임말. 구성 요소가 서로 통신하는 방법임. 컴포넌트 안에서 데이터를 전달할 때 state사용 props는 상위 구성 요소에서 아래쪽으로 흐름 mutable 자식 컴포넌트의 props를 변경하려면 부모 컴포넌트의 state를 변경해야 함 state가 변하면 re-render 됨 redux는 state를 관리하는 것입니다. redux 데이터 Flow(strick unidirectional data flow) ACTION은 간단한 JS 객체입니다. 여기에는 우리가 수행하는 작업의 유형을 지정하는 type속성이 있으며 선택적으로 redux 저장소에.. 여행상품 프로젝트(4) 스텝을 이용해서 페이지 나누기 주문 페이지에서 주문확인 페이지 그리고 주문 완료 페이지로 이동해야 합니다. 그러기 위해 각 페이지마다 페이지의 스텝을 주겠습니다. 위 예시처럼 step이 0일 때 메인페이지를 보여주고, 1일때 주문확인 페이지, 2일때 주문 완료 페이지를 보여줍니다. App.js의 추가 코드입니다. state를 사용해서 step값을 설정합니다. 左) OrderPage의 추가 코드입니다. 총가격이 0이 아니면 step1로 넘어갑니다. 右) SummaryPage의 추가 코드입니다. 주문확인 페이지 구현하기 const [orderDetails] = useContext(OrderContext) const productArray = Array.from(orderDetails.products) con.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 56 다음
