WEB/React

    React - useReducer

    userState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해 주고 싶을 때 사용하는 Hook 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다.(새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 한다) 예제로 여러 인풋의 상태를 저장해봅시다! import React,{useReducer} from 'react'; function reducer(state,action){ retunr{ ...state, [action.name] = action.value }; } 우선 위와 같이 reducer 함수를 작성합니다. 1. ...state는 기존에 있는 state 값들을 복사 시키는것과 같습니다. 2. actio..

    React LifeCycle

    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..