개발 노트

useState를 사용하여 setState를 여러번 사용하여 state를 변경하려고 하였으나 하나의 setState만 적용 리엑트는 batch란 특징을 가지고 있다. batch는 리엑트가 효율적인 렌더링을 하기위한 방법 중 하나다. batch는 일괄처리를 뜻하는데 setState는 비동기적으로 동작을 하여서 여러 setState가 있다면 거의 동시적으로 모든 setState가 실행이 된다. 이때 setState가 끝나는 경우에마다 state가 변경되니 리엑트가 리렌더링 되지 않고 batch란 특성으로 마지막으로 끝난 setState만 적용된다. 리엑트에서 일정한 순서에 따라 State가 변경되어야 할때 함수형 업데이트를 사용한다 함수형 업데이트는 setState에서 인자가 아닌 함수를 할당해주는 것이다.

현재 상황 회원 추가시 ID를 입력하는 부분이 있다. ID 입력 input에서 포커스가 out되면 비동기 처리를 하여 중복된 ID 검사를 하기위한 유효성 검사가 필요하다. 문제 분석 및 해결 과정 Ant Design의 Input을 사용하다 보니 onFocusout, onInput 이벤트에 관한 부분이 없었다. ( 타이핑 시 이벤트 발생 리스너 ) 위 이벤트를 대신할 onChange를 통해서 비동기 유효성 검사 기능을 만들어야 한다. 비동기 유효성 검사 기능을 구현하기 위해 입력 후 일정 시간이 지나면 비동기 통신으로 유효성 검사를 하고자 추정 기능 구현을 타이머에 관련된 구글링도중 쓰로틀링(throttling)과 디바운싱(debouncing)을 찾음 여기서 디바운싱(debouncing)은 연속된 함수 호..

경고 원인 특정 컴포넌트를 import한뒤 사용하지 않거나, 템플릿 문자열 표현식이 형식에 맞지 않을때 발생 ( Unexpected ) 해결 방법 /* eslint -disable */이란 주석으로 해당 경고 부분을 감싸면 경고 메시지가 띄지 않는다.

disabledDate={(current) => current && current >= moment().endOf('day') } 위의 속성을 추가해주면 된다. 예시 코드는 아래. current && current >= moment().endOf('day') } />

unmount될때 또는 의존성 배열이 업데이트될 때 return 값에 넣어논 뒷정리 함수가 발생되어 백그라운드에서 중첩되어 돌 아갈 setInterval을 정리해준다. 예시 useEffect(() => { const intervalId = setInterval(() => { const newElapsedTimes = []; mqttMessages.forEach((item) => { if (Number(item.compCd) === compCd) { const pastTime = moment(item.Now); const currentTime = moment(); const difference = moment.duration(currentTime.diff(pastTime)); const millisecon..

useState로 object를 다룰 때 setter함수로 바로 값을 넣어주면 안된다. 예를들어 let aa = stateObj aa.Value = newValue setStateObj(aa) 위와 같은 식으로하면 input에 넣거나할 때 업데이트된 값이 실시간 바뀌긴하나 눈으로 보이는 것은 반영이 되지 않는다. 그러므로 obj를 다루는 방식을 이용하도록 해야한다. let aa = stateObj aa = {...stateObj, Value : newValue} setStateObj(aa)