열정보단 시스템

오늘은 헷갈린 Hook들에 대해 정리해보려고 합니다. useState와 useEffect보다는 useMemo, useCallback이 다소 헷갈리기 때문에 해당 글을 작성하게 되었습니다. useEffect의 라이프사이클 관련 정리도 필요해 보이지만 그건 추후 추가된 글에서 다뤄보겠습니다. "useMemo와 useCallback이 왜 필요한가?"를 먼저 생각해보겠습니다. 리액트 내장 훅인 이 두 함수가 우리에게 편리함을 제공해준다면, 분명히 필요성이 제시되었기 때문에 누군가 개발했다는 것을 의미를 합니다. 가장 핵심적인 키워드는 '렌더링 최적화'입니다. 예시를 하나 들어보겠습니다. 컴포넌트가 렌더링 되었다는 것은 사용자가 해당 함수(컴포넌트)를 호출시켰다는 것을 의미하며, 이 과정에서는 내부에 있는 변수 ..

오늘은 스토리지에 대해서 다뤄볼까 합니다. 스토리지를 다루기 위해 두 가지 라이브러리를 정리해보려고 하는데, Async-storage와 Encrypted-storage가 바로 그 주인공입니다. 가장 먼저, 스토리지(Storage)를 왜 써야하는지, 어떤 데이터를 넣어야하며- 그렇다면 redux는 어떻게 활용 측면에서 비교가 되는지 정리를 하고 마지막엔 코드 예제까지 정리하면서 마무리 해보려고 합니다-! 어제 작성한 글에서는 효율적인 상태 관리를 위해서 Redux-toolkit을 다뤄보았다. Redux의 store는 데이터 저장 공간으로 활용되며 실제로 앱이 켜져있는 상태에서 데이터를 불러오는 성능이 가장 뛰어나다. 하지만 앱이 꺼지면 데이터가 사라지는 일시적 저장 공간이기 때문에 그 한계 또한 명확하다...

Redux는 React Native 공부를 하면서 채용조건을 찾아볼 때마다 자주 보였던 녀석이다. 하지만 적용해야 할 필요성을 느끼지 못했기에 여태 구현을 해오다가 상태 관리를 조금 더 효율적으로 관리할 필요가 생기면서 찾아보게 되었다. 처음엔 꽤 난잡한데 이해하기 위해서는 큰 그림을 볼 필요가 있었으며, 손 코딩을 하는 것이 큰 도움이 되었다. 그럼 이번 게시글에서는 redux-toolkit을 어떻게 적용하였는지에 대해 간략히 적어보려고 한다. (참고로 이 게시글에서는 Redux가 아닌 Redux-toolkit에 대해 다룰 것이기 때문에 Redux에 대한 기본 지식이 습득된 상태로 볼 것을 추천한다😉) 공홈 링크는 다음과 같고, 설치 방법은 생략한다. https://redux-toolkit.js.org..

useContext가 가지는 의미. 역할. 로 시작 https://pks2974.medium.com/react-context-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC-9c35ce6617fc React Context 간단 정리 React Context API 를 간단한 예제로 알아보자 pks2974.medium.com 유저 정보를 위한 전역 상태 관리를 적용하려고 시작한 공부.. 아직 정리 중 context 만들었으면 앱 전체를 Provider로 감싸주기 context 실제 사용. 사용한 곳은 가입을 담당하는 Hook 에 적용 가입시 발생한 토큰 저장, 로그아웃시 토큰 삭제를 담당하는 함수