데이터 바인딩
지난주 퍼블리싱 작업을 하고 이번주부터는 데이터 바인딩에 들어갔다. 반복적인 코드로 인해서 각 컴포넌트마다 api를 호출해야하는 문제가 생겨서 퍼블리싱을 바꾸기 시작했다 ㅠ
기존 코드를 참고하다 보니 이렇게 컴포넌트화할 수 있음에 놀라웠고 많이 배운다.
어디부터 어디까지 고려를 해서 다양한 곳에서 사용할 수 있도록 만들 수 있을까?
코드를 만들때 제일 먼저 파악해야하는 것이 무엇일까? 처음 구조를 잡는 것에 어떻게 공부하면서 배을 수 있을까? 고민이 든다. 일단 코드에 익숙해지고 강의도 꾸준히 들어야지
좋아요 기능
좋아요 기능을 recoil에 저장하고 api에서 호출해오는 과정에서 너무 복잡하게 생각해서 시간을 많이 썼다. likeState 값 (boolean), like_count 값(number)을 useState로 세팅해놓으면 될 문제였다. recoil까지 안갔어도 됐었다.
왜 recoil을 써야한다고 생각했지? 좋아요 기능만 수행하는데..? 예전에 썼던 기억이 어렴풋이 나서 그랬던 것 같다.
- 참고용으로 recoil을 사용해서 좋아요 기능 구현 방법
//atom
const likesCountState = atom({
key: 'likesCountState',
default: 0,
});
const likesCountSelector = selector({
key: 'likesCountSelector',
get: ({ get }) => get(likesCountState),
set: ({ set }, newValue) => set(likesCountState, newValue),
});
import { useRecoilState } from 'recoil';
import { likesCountSelector } from './atoms';
function LikeButton() {
const [likesCount, setLikesCount] = useRecoilState(likesCountSelector);
const handleLikeButtonClick = () => {
setLikesCount(likesCount + 1);
};
return (
<TouchableOpacity onPress={handleLikeButtonClick}>
<Text>Likes: {likesCount}</Text>
</TouchableOpacity>
);
}
export default
export default 구문은 한 파일에서 한 번만 사용할 수 있습니다
이것덕분에 또 많은 시간을 썼다 ㅜㅜ 여러개의 함수를 사용할 때 export function (){}형태로 써줘야하며 export default는 한번밖에 못쓴다.
초기 세팅에 대한 고민
- 중첩된 navigate기능을 만들때 초기에 어떤 흐름으로 흘러갈지에 대한 설계를 해야한다.
- 이 부분을 나중에 생각하는 바람에 마을버스앱이 꼬이기 시작했다... 나중에 다시 native로 만들어봐야지..
winwin