JavaScript/React32 [ReactJS] Preventing useEffect from running twice with a useRef ⚛️ 기본 환경: IDE: VS code, Language: React useEffect() : 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook useRef() : React 컴포넌트에서 변수를 저장하고 관리하는 데 사용하는 도구 : 컴포넌트의 렌더링과 관련된 값의 변경에 영향을 받지 않음 useEffect() 내부에서 useState를 활용한 setState를 할 경우, 1. mount될 때 1번 2. state변경될 때 1번 총 2번(mount 1번 + 렌더링 1번)의 useEffect가 호출됨 이 때, Ref를 선언하고 isEffectedRef.current를 활용하여 변수의 현재 값을 가져와 false일 때만 useEffect가 실행되도록 제어할 수 있음 1 2 3.. 2023. 6. 19. [ReactJS_Complete] useEffect, useCallback 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React useEffect() : 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 useEffect(() => { fetchMoviesHandler(); }, [fetchMoviesHandler]); async function fetchMoviesHandler() { setIsLoading(true); setError(n.. 2023. 6. 7. [ReactJS_etc] Difference between state and variable 이 글은 코딩알려주는누나의 [리액트 초보자 입문강의 3탄]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: replit, Language: React * replit: Browser 기반 IDE 🚨 화면단에 보여지는 요소들을 매번 업데이트할 경우, 비용과 시간이 많이 발생하는 문제를 해결하기 위해 variable 대신 state 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import React, {useState} from 'react'; import './App.css' export default function App() { let count1 = 0; const [count2, setCount2] = useState(0); co.. 2023. 6. 6. [ReactJS_Complete] Using Redux 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React Redux 사용법 1. createSlice 선언 : initialState, reducer 함수의 객체, slice의 이름을 받아서 reducer와 state에 해당하는 action 생성자와 action type을 자동으로 생성하는 함수 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { createSlice } from "@reduxjs/toolkit"; const uiSlice = createSlice({ name: 'ui', initialState: {cartI.. 2023. 6. 4. [ReactJS_Complete] Redux toolKit: createSlice 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React Redux toolKit 사용하기 1. Redux toolKit 설치 1 2 npm install @reduxjs/toolkit 2. createSlice import 및 선언 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 import {createSlice} from '@reduxjs/toolkit'; const initialState = {counter: 0, showCounter: true}; const counterSlice = cre.. 2023. 6. 4. [ReactJS_Complete] useSelector, useDispatch 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React useSelector(state => state.module) : 저장소에 등록된 데이터(상태, State)를 가져와서 쓸 수 있는 Hook : Redux 스토어의 상태 객체를 매개변수로 받고, 그 상태에서 필요한 값을 선택적으로 반환 즉, Redux 상태 객체에서 counter 속성을 선택하여 반환 * useSelector 사용 시, react-redux는 해당 컴포넌트를 저장소에 자동으로 구독 설정 즉, 저장소 데이터가 변경될 경우에 자동으로 최신 카운터를 전달 받음 useDispatch() : R.. 2023. 6. 4. 이전 1 2 3 4 ··· 6 다음
