JavaScript/React32 [ReactJS_Complete] How Redux Works 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. 🟨 기본 환경: IDE: VS code, Language: JavaScript Redux 작동 방식 Redux: Application 내부의 하나의 중앙 데이터(=상태, state) 저장소 Component: Redux를 구독하여 데어터가 변경될 때마다 필요한 데이터를 전달 받음 Reducer Function: 저장소의 데이터 변경(≠useReducer) - Input: Old State, Dispatched Action - Output: New State Object Action: 버튼 클릭 등 이벤트의 발생 - Component에서 일어나며(=Trigger) Reduc.. 2023. 6. 4. [ReactJS_Complete] React.createContext() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React React.createContext() : 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해 줌으로써 컴포넌트들이 데이터(state)를 더 쉽게 공유할 수 있도록 함 React.createContext() 사용법 1. React createContext() 선언 1 2 3 4 5 6 7 8 9 import React from 'react'; const AuthContext = React.createContext({ isLoggedIn: false }); // AuthC.. 2023. 6. 3. [ReactJS_Complete] React.useReducer() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React React.useReducer() : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 : 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음 useReducer() 의 사용법 1 2 const [state, dispatch] = useReducer(reducer, initialState); - state: 컴포넌트에서 사용 할 수 있는 상태 - dispatch: 액션을 발생시키는 함수 ▶ 예: dispatch({ type: 'INCREMENT' }) - reduce.. 2023. 6. 3. [ReactJS_Complete] React.useEffect() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React React.useEffect() : 모든 컴포넌트가 렌더링된 이후 특정 작업을 실행시켜주는 Hook : HTTP request, Browser 저장소에 저장 등 sideEffect를 처리 * useEffect(function, dependencies) - function: 수행하고자하는 작업 - dependencies: 의존성 배열, 업데이트를 의존시키고 싶은 값 설정 1. useEffect(function) : Rendering시마다 실행 2. useEffect(function, []) : Compo.. 2023. 6. 3. [ReactJS_Complete] React.useRef() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React React.useRef() : .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 유사 * 특정 DOM 선택 시 사용 = JavaScript에서의 특정 DOM 을 선택하는 getElementById, querySelector 같은 DOM Selector 함수와 같은 역할 * Rerendering 방지 = useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않음 useRef() 설정 1. useRef import 1 2 import React, { useState, useR.. 2023. 6. 1. [ReactJS_Complete] ReactDOM.createPortal() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React ReactDOM.createPortal() : 렌더링하려는 HTML 요소를 다른 장소로 이동 ⭐ Modal 창 등을 root Component와 구분하여 관리 사용 방법 1. ReactDOM import 1 2 import ReactDOM from "react-dom"; react-dom: React의 기능을 Web browser에서 사용하기 위해 import = 웹브라우저에 대한 React용 어뎁터의 일종 2. 이동하고자하는 Component 선언 1 2 3 4 const Backdrop = (pro.. 2023. 6. 1. 이전 1 2 3 4 5 6 다음
