스파르팅

우선 파일을 설치해야한다. 터미널을 열고 yarn add react-modal npm install react-modal 둘 중 하나를 사용하면 된다. 이후 modal을 사용할 jsx에서 import하기 import Modal from 'react-modal'; Modal 사용법 isOpen= {Boolean} // 내용~ //예시 내용~ 이때 true면 팝업창이 뜨고, false이면 닫힌다. 이를 useState를 이용하면 끄고 닫는 버튼을 만들 수 있다. useState를 이용한 열기 닫기 import React, { useState } from 'react'; import Modal from 'react-modal'; function App() { const [modalOpen, setModalOp..

클래스형에서의 라이프 사이클 React!DOM에서 생성됨 컴퍼넌트 생성정에 작업해야 할 것이 있으면 componentWillMount() 에서 작업 이후 랜더가 되고 componentDidMount() 됨 update에서도 should , will Did 순으로 진행된다. 함수형에서의 life cycle useEffect를 통해서 구현할 수 있다. useEffect는 render가 되고 나서 실행된다. 따라서 useEffect는 componentDidMount와 componentDidUpdate와 똑같은 효과를 냄 return 값이 주 임무라 했을 때, useEffect는 이 밖의 ajax등에서 값을 가져오거나(네크워크 통신) document의 제목을 바꾸는 등 단순힌 component 외의 것을 조정을..

const refContainer = useRef(initialValue); useRef란? 선언하는 방법 const refContainer = useRef(initialValue); 함수형에서 useRef 를 쓰면 ref 오브젝트를 반환 해줌. {current : value} 로 저장됨 컨퍼먼트가 언마운트되기 전까지 갚이 유지됨 공식문서 설명 useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 일반적인 유스케이스는 자식에게 명령적으로 접근하는 경우입니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다. 아마도 여..

https://www.youtube.com/watch?v=kyodvzc5GHU 처음 공부하시는 거라면 이 영상 추천드립니다. 1. useEffect란? mount , update, unmount 될 때, 특정 작업을 실행해주고 싶을 때 사용하는 훅 이때 useEffect는 주로 함수내에 넣는데 이 이유는 공식 문서에서 다음과 같이 나온다. -------- useEffect구성 요소 내부에서 호출되는 이유는 무엇 입니까? useEffect구성 요소 내부에 배치 count하면 효과에서 바로 상태 변수(또는 모든 소품)에 액세스할 수 있습니다. 이를 읽기 위해 특별한 API가 필요하지 않습니다. --------- 2. useEffect의 형태 useEffect = (()=> { //기본형태 콜백함수를 가짐 }..

모듈 // src/redux/modules/counterSlice.js import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; //액션 크리에이터랑 비슷한 느낌 export const __addNumber = createAsyncThunk( // 첫번째 인자 : action value "addNumber", // 두번째 인자 : 콜백함수 (payload, thunkAPI) => { setTimeout(() => { thunkAPI.dispatch(addNumber(payload)); }, 3000); } ); const initialState = { number: 0, }; const counterSlice = createSlice({ nam..