모리스의 개발 노트

안녕하세요. 모리스입니다.😄이번 포스트에서는 이전 포스트에서 언급했던 Recoil Hook에 대해서 작성해 보려합니다.📒 useRecoilState()주어진 Recoil 상태의 값과 그 상태를 업데이트하는 함수를 [value, setter] 형태의 튜플로 반환해요.이 Hook은 해당 상태를 컴포넌트가 구독하도록 만들기 때문에, 상태가 바뀌면 자동으로 리렌더링이 돼요.function useRecoilState(state: RecoilState): [T, SetterOrUpdater];type SetterOrUpdater = (value: T | ((prev: T) => T)) => void;state: atom 또는 쓰기 가능한 selector이 Hook은 React의 useState()와 사용법이 거..

안녕하세요. 모리스입니다.😊지난 포스트에서는 React의 Recoil에 대해 아주 간단하게 찍먹해 보았는데요.이번 포스트는 Recoil에서 자주 사용되는 API 몇 가지에 대해 작성해 보려 합니다.! 📒 RecoilRootRecoil 상태를 사용하려면, 반드시 컴포넌트 트리 최상위에 RecoilRoot를 선언해야 해요. 그래야 전역에서 상태를 감지하고 관리할 수 있겠죠?React Native에서는 보통 루트 컴포넌트인 App.js에 Recoil Root를 선언해요.import React from 'react';import { RecoilRoot } from 'recoil';function App() { return ( );} 📒 atom()atom은 Recoil에서 상태..

안녕하세요. 모리스입니다.😄이번 포스트에서는 React에서 상태관리 라이브러리 중 하나인 Recoil 라이브러리에 대해서아주 간단하게 찍먹 해보려고 합니다.!! 참고로 저는 RN개발을 했기 때문에 대부분의 예제는 RN으로 작성했습니다.😁자 그럼 React의 Recoil은 무었이냐.. 부터 볼까요? Recoil은 React의 상태 관리를 위해 Facebook에서 만든 라이브러리예요. Atoms(공유 상태)와 Selectors(파생 상태)를 중심으로 데이터 흐름 그래프를 구성할 수 있어요. Atoms는 컴포넌트가 구독할 수 있는 상태의 기본 단위이고, Selectors는 이 상태를 기반으로 동기 또는 비동기 연산을 통해 새로운 값을 만들어주는 순수 함수예요.📍 AtomsAtoms는 상태를 저장하는 단위..

안녕하세요. 모리스입니다.🙂이번 포스트에서는 지난 포스트에 이어서 React의 Hook API에 대해서 작성해볼게요. React의 Hook API를 사용해 프로젝트를 진행하면서, 가장 기본적이면서 많이 사용하는 세 가지useState, useEffect, useContext에 대해서 알아볼게요! ✅ useState컴포넌트 내부에서 상태값(state) 을 유지할 수 있게 해주는 가장 기본적인 Hook이예요.📌 주요 개념useState는 상태값과 해당 상태를 갱신할 수 있는 함수를 반환해요.컴포넌트가 처음 렌더링될 때, 반환된 state는 전달한 initialState 값으로 초기화 돼요.const [state, setState] = useState(initialState);💡 쉽게 말하면 위 코드에서..

안녕하세요. 모리스입니다.😃React Native 앱을 개발하면서 예전에 학습했던 React Hook에 대해서 다시 정리해 볼까 해요. 저는 지금은 iOS Native를 개발하고 있지만 실무에서 처음 개발을 접한 건 RN이였어요.Native를 하면서 느끼는 거지만 React는 정말 정말 정말 잘 만든 프레임워크라는게 뼈저리게 느껴지네요..아마 시작을 RN이나 Flutter로 시작하신 개발자 분들은 느끼실 거 같아요.. Native는  하나부터 열까지 내가 구현해야 하지만..cross platform들은 정말 많은걸 컴포넌트화 해서 제공해 주는구나.. 정말 편하구나..라는 걸요..😂 아무튼 이상한 소리 그만하고 이번 포스트 주제인 React Hook API에 대해서 알아볼까요?🔗 Hook이란?Reac..