yunTechDiary

안녕하세요 이번에 작성하게 될 내용은 제가 react-native에서 저만의 checkbox를 어떤 계기로 구현하게 되었고 어떤 식으로 구현했는지에 대해 전달을 하고자 작성해 봅니다 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 구현하게 된 계기 요즘 퇴근 후 토이 프로젝트를 진행하고 있습니다. checkbox를 사용하는 UI가 존재하여 처음에는 checkbox를 사용하기 위해 React-Native 공식 문서에 가서 확인해 보니 이런 문구가 존재했습니다. 제거가 됐다 커뮤니티의 패키지를 사용해라 그래서 저는 제가 사용할 라이브러리를 찾기 시작했고 눈에 들어온 것은 이것이었습니다. 덕분에 편하게 하겠다는 마음에 expo-checkbox를 사용하여 디자인 시스템 와이..

안녕하세요 이번에 소개드릴 내용은 제가 이번에 구현한 useList(가명)에 대해 소개 드리려고 합니다. 제가 어떠한 상황에서 useList를 구현하기로 마음을 먹었고 어떤 식으로 구현을 했는지에 대해 알려드리면 좋을 거 같다고 판단이 되어서 한 번 작성해 봅니다. 개발 환경 React-native + TypeScript로 진행되었습니다. 구현하게 된 계기 위 사진과 같은 화면 구현의 업무를 맡았습니다. 탭 형식으로 이루어졌으며 선택된 카테고리의 리스트를 보여주는 화면이었습니다. 어떻게 예쁘게 구현할까 고민을 한 후 custom hook으로 구현해야겠다 마음을 먹고 바로 기능들을 추출해봤습니다. 기능 추출 A Tab 리스트 불러오기 인피니티 스크롤 인증하지 않은 유저라면 인피니티 스크롤 X, 리스트 하단..

안녕하세요 이번에 회사 앱에 flow를 깊게 확인하기 위해 이것저것 해보는 와중 제 눈에 띈 것이 하나 있습니다. 바로 Modal 입니다. Modal은 앱에서 흔히 볼 수 있는 UI입니다. Modal을 사용하는 곳에서는 항상 기본적으로 state 1개와 함수 2개로 구성이 되어있었습니다. const [isModalOpened, setIsModalOpened] = useState(false); const closeModal = () => { setModalOpened(false); }; const openModal = () => { setModalOpened(true); }; 이런 똑같은 코드가 반복이 되는 것이 보기가 싫어 리팩토링을 해보도록 하겠습니다. 구현 단계 1차 구현 interface Modal..