react 검색 결과
7 개의 검색 결과가 있습니다.
프로그래밍이야기

[React-native] AsyncStorage (앱 저장소) 사용 방법

앱을 껐다가 다시 켜면 데이터가 남아있어야만 지속해서 앱을 사용할 수 있다.React-native에서는 간단한 데이터를 저장할 수 있는 방법을 몇 가지 제공하는데,가장 간단한 AsyncStorage 사용법을 정리해본다.AsyncStorage에서 중요한 것!!! - setItem : 저장하기 -> 무조건 string 으로만 저장 가능 - getItem : 가져오기 - Key값을 함께 저장해서, 해당하는 Key의 value 값을 가져오는 방식1. 공식 사이트 소개https://react-native-async-storage.github.io/async-storage/docs/install Installation | Async StorageInstallreact-native-async-storage.githu..

2024. 11. 26. 09:33
프로그래밍이야기

Dayjs 소개 및 활용법

react-native 온라인 강의를 듣다가 나중을 위해 기록합니다.(참고한 강좌 : 패스트캠퍼스의 React Native 를 활용한 빠르고 완성도 높은 앱 개발 초격차 패키지 Online)1. Dayjs 소개 javascript에서 기본으로 제공하는 date 함수를 사용하기 보다는 외부라이브러리를 사용하는 걸 추천한다.대표적으로 Momentjs 와 Dayjs가 있는 데, Momentjs는 이제 더이상 업데이트가 잘 이루어지지 않는다.그래서 2024년 11월 기준으로 Dayjs사용을 권장한다. https://www.jsdelivr.com/package/npm/dayjs jsDelivr - A free, fast, and reliable CDN for JS and Open SourceOptimized fo..

2024. 11. 20. 14:29
프로그래밍이야기

(React) ContexAPI (createContex 와 Provider) 정리

react native로 모바일 앱을 개발하는 업무를 막 맡았다.전에 잠깐 flutter를 공부하고 있었는데, 갑자기 react native(RN)으로 변경되어서 급하게 react부터 훑어보고 있다.react라는 라이브러리를 공부하면서 내용을 정리하고 있다.참 필요에 의해 많은 기능들을 잘 만들었구나 하는 생각이 든다.///.../// 본론으로 넘어가자...ContextAPI의 필요성 useEffect나 useReducer 를 사용하다보면, 불편한 점이 있다.아마득한 후손(child)으로 계층만 3단계를 넘어가면 엄청 불편해진다.dispatch나 주요 함수들을 props로 계속 연달아서 전달해줘야 하는 점이다.이게 한 두개도 불편한데, 엄청 많다면... (큰 불편이 아닐 수 없다)그래서 생긴 게 Cont..

2024. 11. 7. 15:01
프로그래밍이야기

(React) useReducer 개념 정리 및 활용법

useState를 여러개를 정의해서 사용하다보면, 불편한 점이 있다.일단 모든 state를 각각 정의해줘야 하고, 각각의 state를 별도로 관리하는 쉽지 않다.state 내 데이터가 복잡해지면, 초기화 하는 것도 쉽지 않다.그래서, 복잡한 state 관리는 useReducer를 사용하는 것이 좋다.>1. 선언 const [state, dispatch] = useReducer(reducer, initialState);2. reducer 및 initialState 정의  : reducer는 각 상태 타입마다의 리턴값을 정의해주어야 한다. 따라서, 실제 reducer의 실행 부분이라고 할 수 있다.const initialState = { winner: null, turn: "O", const tableD..

2024. 11. 7. 13:55
프로그래밍이야기

(React) useEffect로 didUpdate에서만 실행되도록 하기(패턴)

const mounted = useRef(false);useEffect(()=>{ if(!mounted.current){ mounted.current = true; } else { // ajax }},[(바뀌는 값)]이렇게 하면 된다.처음에는 mounted가 false여서 실행이 안되고,didMount가 자동으로 최초 1회 실행되어, mounted 값을 true로 바꾸어 준다.그러면, (바뀌는 값)이 변경되었을 경우에만 else 문에 있는 코드가 반복 실행된다.

2024. 11. 7. 10:47
프로그래밍이야기

(React) useMemo, useCallback 필요성 및 사용법

useEffect 사용해서 Data를 마운트 시킬 때, 반복해서 Data를 가져오는 경우가 있다.useEffect가 처음에 한번 불러와진다고 해서, Data가 한번만 불리는 건 아니다.45개의 숫자를 뽑고, 거기서 6개 숫자를 뽑아오는 구문이 계속 반복한다.나는 분명 한번만 실행시켰는데... useEffect가 데이터를 기억하지 못하기 때문에 발생하는 것인데그럴 때, 캐시에 잠시 데이터를 보관하고 데이터가 변경이 생길 때만 재실행되도록 할 수 있다.그게 바로 useMemo 이다. 아래와 같이 코드를 변경한다. const lottoNumbers = useMemo(() => getWinNumbers(), []); const [winNumbers, setWinNumbers] = useState(lottoN..

2024. 11. 7. 10:37