이전 세션에서 수정하기를 눌렀을 때, 투표 데이터를 넘겨줬다.
이제 그 넘겨 받은 데이터를 투표 만들기 페이지에 들어왔을 때 입력된 상태로 만들어보자.
처음에 생각한 것은 넘겨 받은 데이터를 useEffect 사용해서 useState setter를 통해 리렌더링해주는 쪽으로 생각을 했었다.
그렇게 하면 추가적인 리렌더링이 발생할 수 있고, 그렇게 되면 성능상으로도 좋지 않아 보인다.
코드로 작성한다면 다음과 같다.
export default function Vote({ navigation, route }) {
const [items, setItems] = useState([{ text: '' }, { text: '' }]);
const [type, setType] = useState(true);
const [option, setOption] = useState({
anonymous: false,
multiSelect: false,
});
const [endDate, setEndDate] = useState(new Date());
const [open, setOpen] = useState({ open: false, id: null });
useEffect(() => {
if (route.params?.vote) {
setItems(() => route.params.vote.vote);
setType(() => route.params.vote.type);
setOption(() => ({
anonymous: route.params.vote.options.anonymous,
multiSelect: route.params.vote.options.multiSelect,
}));
setEndDate(() => new Date(JSON.parse(route.params.vote.endDate)));
}
}, []);
...
}
다음 생각한 방법, 그렇다면 useState에 초기값으로 받아버리면 어떨까?
생각해봐야하는 부분은 route 값이 없을 때이다. 즉, 수정하기로 통해 데이터를 전달받았을 때가 아니라 투표를 생성할 때는 데이터가 없으므로 초기값 설정을 해줄 수 없다..
export default function Vote({ navigation, route }) {
const [items, setItems] = useState(route.params.vote.vote);
const [type, setType] = useState(route.params.vote.type);
const [option, setOption] = useState(route.params.vote.options);
const [endDate, setEndDate] = useState(new Date());
const [open, setOpen] = useState({ open: false, id: null });
이렇게 하면 route.params.vote에 데이터가 있으면 되겠지만, 없으면 에러가 발생할 것이다.
route.params?.vote 이런식으로 하는 것은?
그러면 undefined로 값이 들어가게 되는데 초기 값을 필요로 하는 UI에서는 동작하지 않을 것이다.
props의 값이 없다면 default 값을 설정해주면 어떨까?
ES6에서 도입된 구조 분해 할당을 사용하면 props에 기본 값을 설정할 수 있다.
export default function Vote({ navigation, route }) {
const {
params = {
vote: {
vote: [{ text: '' }, { text: '' }],
type: true,
options: { anonymous: false, multiSelect: false },
endDate: new Date(),
},
},
} = route;
const [items, setItems] = useState(params.vote.vote);
const [type, setType] = useState(params.vote.type);
const [option, setOption] = useState(params.vote.options);
const [endDate, setEndDate] = useState(new Date());
const [open, setOpen] = useState({ open: false, id: null });
...
}
이렇게 작성해주면 route에 vote 값이 없더라두 기본값으로 설정된다.