728x90 IT/REACT11 [리액트 네이티브] useFocusEffect 를 이용하여 화면 새로고침 리액트 네이티브에서 useFocusEffect는 리액트 네비게이션(Navigation) 라이브러리와 함께 사용되는 훅(Hook) 중 하나입니다. 이 훅은 화면의 포커스가 변경될 때 실행되는 효과를 만들어줍니다. 주로 화면 포커스가 변경되면 필요한 작업을 처리하는 데 사용됩니다. 예를 들어, 화면이 보여질 때 데이터를 새로고침하거나, 화면에서 벗어날 때 타이머를 정리하는 등의 작업에 유용합니다. useFocusEffect 훅 사용하기: import React, { useEffect, useCallback } from 'react'; import { View, Text } from 'react-native'; import { useFocusEffect } from '@react-navigation/nativ.. 2023. 7. 24. [리액트] 리덕스 예제 UI 준비하기 components/Counter.js const Counter = ({ number, onIncrease, onDecrease }) => { return ( {number} +1 -1 ); }; export default Counter; redux-actions 라이브러리를 사용한 리듀서 모듈 만들기 modules/counter.js // redux-actions 라이브러리 사용 import { createAction, handleActions } from 'redux-actions'; // 1. 액션 타입 정의 const INCREASE = 'counter/INCREASE'; // 액션 타입은 대문자, 문자열 내용은 '모듈이름/액션이름' const DECREASE = 'counter/D.. 2023. 2. 20. [리액트] redux 용어 및 사용시 주의사항 리덕스 앱의 상태를 관리 용어 1. 액션 객체로 표현 type 필드를 반드시 포함 액션 이름은 문자열, 대문자, 고유 2. 액션 생성 함수 액션 객체를 만들어 주는 함수 3. 리듀서 변화를 일으키는 함수 현재 상태와 액션 객체를 파라미터로 사용하면 새로운 상태를 반환 4. 스토어 리덕스를 적용하기 위해 필요 한 개의 프로젝트에 한 개의 스토어 현재 앱의 상태, 리듀서, 중요한 내장 함수가 저장 createStore 함수를 import 하여 생성 및 사용 5. 디스패치 액션을 발생시키는 것이 디스패치 스토어 내장 함수 중 하나 dispatch(action) 과 같이 액션 객체를 파라미터로 넣어서 호출 6. 구독 액션이 디스패치되어 상태가 업데이트될 때마다 파라미터로 받은 함수 호출 스토어 내장 함수 중 하.. 2023. 2. 10. [리액트] useMemo 와 useCallback hook 차이점 useMemo 1. 원인 렌더링할 때마다 컴포넌트에 선언한 함수를 연산(계산)하여 자원이 낭비를 초래 2. 해결 useMemo Hook을 사용하여 첫번째 파라미터에 특정 함수를 넣고, 두번째 파라미터 배열에 특정 함수 연산에 필요한 인수를 넣으면, 인수가 바뀔 때만 특정 함수를 연산하여 최적화 연산하지 않은 경우 기존에 연산한 값을 재사용 const sumFuc = (a) => { ... // 렌더링할 때마다 연산 }; ... const Test = () => { const sumFucMemo = useMemo(() => sumFuc(a), [a]); // useMemo 사용으로 a가 바뀔 때만 sumFuc 함수 연산 ... return ( {sumFucMemo} ... ); }; useCallback .. 2023. 2. 1. [리액트] useEffect 로 렌더링할 때 특정 작업 수행하기 useEffect 란 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 할 수 있는 Hook 함수 코드1. 렌더링될 때마다 실행하기 두번째 파라미터를 넣지 않으면, 렌더링될 때마다 첫번째 파라미터로 넣은 함수를 실행 import React, { useState, useEffect } from 'react'; const Info = () => { const [name, setName] = useState(''); // 초기값 ''으로 설정 useEffect(() => { // 두번째 파라미터를 넣지 않으면 렌더링될 때마다 첫번째 파리미터로 넣은 함수를 실행 console.log('렌더링 완료'); console.log({name}); }); const onChangeName = e => { // i.. 2023. 2. 1. [리액트] useState로 상태 관리하기 목표 리액트에서 상태를 관리하는 hook 함수인 useState를 활용 input 태그에 입력된 데이터를 출력 코드 import React, { useState } from 'react'; const Info = () => { const [name, setName] = useState(''); // 초기값 ''으로 설정 const onChangeName = e => { // input 입력시 호출할 함수 setName(e.target.value); // input 데이터를 setName의 파라미터로 입력 }; return ( 이름: {name} ); }; export default Info; 2023. 2. 1. 이전 1 2 다음 728x90
