사이드프로젝트로 하고 있는, 에어비앤비 클론코딩.
배웠던 리덕스를 적용해서 구현하고 있다.
현재 하고 있는 부분은, 인원수를 조정해서 반영하는 부분을 하고 있는데 하면서 이슈가 몇번있었다.
첫번째 이슈는, 버튼을 누르면 모달창이 뜨지만 + - 버튼을 누르면 바로 꺼져버리는 이슈.
이때, 흐름도를 잘 이해를 했어야했는데 하지 못해서 구현이 안되었다.
처음에 header에 인원, 게스트를 넣고 이걸 감싸서 리덕스를 적용하려고 하다보니 안되었다.
구현 실패한 코드
<SearchBox flex="flex" row="row">
<div>
<Subtitle>인원</Subtitle>
<Search where="게스트추가" readonly />
<Option>
{hidden ? null : <PeopleModalContainer />}
</Option>
</div>
</SearchBox>
개선코드
일단, 텍스트 부분을 컴포넌트로 만들어서 ModalTrigger로 만들어줘서 여기서 텍스트가 보이고, 인원수가 보이도록 개선했다.
<SearchBox flex="flex" row="row">
<div>
<Option>
<PeopleModalTrigger />
{hidden ? null : <PeopleModalContainer />}
</Option>
</div>
</SearchBox>리덕스 흐름은, 트리거 컴포넌트에 onclick 이벤트로 버튼이 눌리면 리덕스 액션이 실행되고, 여기서 hidden t/f를 조정한뒤 가지고 있는다.
그리고 이 값을 header로 보내서, 이 값을 활용하도록 한다. 즉, trigger 컴포넌트는 그저 hidden 여부 값을 발생시키고 이 hidden을 어떻게 가공할지는 header에서 하는 것.
header에서 변수로 가져와서 hidden일때 만들어둔 모달이 보이지 않도록 아닐경우 보이도록 이렇게 컨트롤한다.
즉, 영향 받지 않도록 구분 시키면 작동이 잘된다.
두번째 이슈는, - + 를 누르면 모든 버튼이 다 적용되는 문제점
아래 그림처럼 +를 누르면 모든 버튼이 일괄적으로 올라가는 문제 가있었다.
공부했던 예제에서는 리덕스 1개를 재사용해서, 카트에 담아둔 아이템이 올라가는 방식이였다. ( data.json 으로 받아와서 각각의 아이템에 따라 리덕스가 반응하도록 돌아가는 방식이였는데)
내가 만든 부분은 json은 아니고, 텍스트라 일괄 적용되는것 같아 보였다.
초기에, useState을 사용할지 리덕스를 사용할지 고민을 했었는데 그 이유 중 하나가 useState를 사용하면 모달 클릭하면 0으로 초기화되어서 localstorage 처리를 따로 해야할것 같아서 리덕스를 사용하기로 했다.
아래가 초기에 사용한 useState
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { addGuest } from '../../../redux/booking/booking.action';
import {
AgeRange,
ChangeNo,
ModalBox,
ModalWrap,
PeopleAmountBtn,
PeopleNo,
Subtitle,
TypeBox,
} from './PeopleModal.styles';
const PeopleModal = props => {
const [value, setValue] = useState(0);
return (
<div>
<ModalBox>
<ModalWrap>
<TypeBox>
<Subtitle>{props.types}</Subtitle>
<AgeRange>{props.ages}</AgeRange>
</TypeBox>
<PeopleAmountBtn>
<ChangeNo onClick={() => setValue(value - 1)}>-</ChangeNo>
<PeopleNo value={value}>{value <= 0 ? 0 : value}</PeopleNo>
<ChangeNo onClick={() => setValue(value + 1)}>+</ChangeNo>
</PeopleAmountBtn>
</ModalWrap>
</ModalBox>
</div>
);
};
const mapDispatchToProps = dispatch => ({
addGuest: () => dispatch(addGuest()),
});
export default connect(mapDispatchToProps)(PeopleModal);리덕스를 사용하고 , 버튼이 동시에 올라가는 방식을 어떻게 해결할까 하다가...... 그냥 리덕스를 각각 만들기로 했다.
유아, 어른, 아이 타입, 액션, 리덕스를 만들었고,
peopleModal에서 액션의 함수를 디스패치해서 연결시켰다.
그렇게 처리하니,이제 숫자가 각각따로 올라가고,
우측의 리덕스 로그도 잘 보인다.
세번째 이슈는 어떻게 숫자를 화면에 보일 것인가였는데, 원래는 reselect 를 사용해서 할까 했는데, 단순 더하기라서 컴포넌트 안에서 연산을시켰다.
리덕스에서 선언한 변수 guest, adult를 그대로 가져와서 더한 값을 받아와 0 일때는 게스트 추가, 1이상일때는 게스트 _명 이라고 표시되도록 구현했다.
이렇게 3가지를 이슈가 있었다.
좀더 효과적인 방법이 있을것 같긴한데, 일단 완성하는데 집중을하고 나중에 리팩토링을 해야할것 같다.
(특히 이슈 2번... 이것도 잘 분리하면 리덕스 하나로 될거 같긴한데 아직은 잘 모르겠다. )
이제 해야할일은, 현재 마이너스 버튼 누르면 -1 -2...이렇게 되는데 0까지만 되도록.. 함수를 구현해서 리덕스에 적용해야할것 같다.
