๐ŸŒ WEB/React

userState๋ณด๋‹ค ๋” ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ์ƒํƒœ๋ฅผ ๋‹ค๋ฅธ ๊ฐ’์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ•ด ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” Hook ๋ฆฌ๋“€์„œ๋Š” ํ˜„์žฌ ์ƒํƒœ, ๊ทธ๋ฆฌ๊ณ  ์—…๋ฐ์ดํŠธ๋ฅผ ์œ„ํ•ด ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ๋‹ด์€ ์•ก์…˜ ๊ฐ’์„ ์ „๋‹ฌ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.(์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋งŒ๋“ค ๋•Œ๋Š” ๋ฐ˜๋“œ์‹œ ๋ถˆ๋ณ€์„ฑ์„ ์ง€์ผœ ์ฃผ์–ด์•ผ ํ•œ๋‹ค) ์˜ˆ์ œ๋กœ ์—ฌ๋Ÿฌ ์ธํ’‹์˜ ์ƒํƒœ๋ฅผ ์ €์žฅํ•ด๋ด…์‹œ๋‹ค! import React,{useReducer} from 'react'; function reducer(state,action){ retunr{ ...state, [action.name] = action.value }; } ์šฐ์„  ์œ„์™€ ๊ฐ™์ด reducer ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. 1. ...state๋Š” ๊ธฐ์กด์— ์žˆ๋Š” state ๊ฐ’๋“ค์„ ๋ณต์‚ฌ ์‹œํ‚ค๋Š”๊ฒƒ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 2. actio..
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..
์• ์ •์“ฐ
'๐ŸŒ WEB/React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก