userState๋ณด๋ค ๋ ๋ค์ํ ์ปดํฌ๋ํธ ์ํฉ์ ๋ฐ๋ผ ๋ค์ํ ์ํ๋ฅผ ๋ค๋ฅธ ๊ฐ์ผ๋ก ์
๋ฐ์ดํธ ํด ์ฃผ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ Hook ๋ฆฌ๋์๋ ํ์ฌ ์ํ, ๊ทธ๋ฆฌ๊ณ ์
๋ฐ์ดํธ๋ฅผ ์ํด ํ์ํ ์ ๋ณด๋ฅผ ๋ด์ ์ก์
๊ฐ์ ์ ๋ฌ๋ฐ์ ์๋ก์ด ์ํ๋ฅผ ๋ฐํํ๋ ํจ์์ด๋ค.(์๋ก์ด ์ํ๋ฅผ ๋ง๋ค ๋๋ ๋ฐ๋์ ๋ถ๋ณ์ฑ์ ์ง์ผ ์ฃผ์ด์ผ ํ๋ค) ์์ ๋ก ์ฌ๋ฌ ์ธํ์ ์ํ๋ฅผ ์ ์ฅํด๋ด
์๋ค! import React,{useReducer} from 'react'; function reducer(state,action){ retunr{ ...state, [action.name] = action.value }; } ์ฐ์ ์์ ๊ฐ์ด reducer ํจ์๋ฅผ ์์ฑํฉ๋๋ค. 1. ...state๋ ๊ธฐ์กด์ ์๋ state ๊ฐ๋ค์ ๋ณต์ฌ ์ํค๋๊ฒ๊ณผ ๊ฐ์ต๋๋ค. 2. actio..
๐ WEB/React
import React, { Component } from 'react'; class LifeCycleSample extends Component{ state={ error:false, number:0, color:null, } myRef = null; // ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ๋ ์ฒ์์ผ๋ก ์คํ๋๋ค. // ์ด๊ธฐ state๋ฅผ ์ ํ๋ค. constructor(props){ super(props); console.log('constructor'); } // props๋ก ๋ฐ์ ์จ ๊ฐ์ state์ ๋๊ธฐํ์ํค๋ ์ฉ๋ // ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ๋ ๋, ์
๋ฐ์ดํธ๋ ๋ ํธ์ถ static getDerivedStateFromProps(nextProps,prevState){ console.log('getDerivedStateFrom..