개발자노트/React (3) 썸네일형 리스트형 Warning : Each child in a list should have a uniqe "key" prop. 프로젝트에 에러,워링 등을 제거하고 있었다. 말 그대로 list 에 고유한 key값들이 존재하지 않는다는 경고 로그를 보니 FloodRiskWaterLog.js 에 option에서 발생한 것을 확인할 수 있다. 해당 변수는 슬라이더의 최소값 최대값을 지정해 해당 길이만큼 DataList를 만들기 위한 변수이다. 그 후 optionList에 담아 화면에 표출해줄 예정이다. 현재 {i}을 배열에 담아주고 있는데, 이 때 key값이 지정되어 있지 않아 생기게 된 오류 다음과 같이 List에 option을 push할 때 key값을 지정해주면 된다. Error(Warring) Cannot update a component (`App`)... 리액트로 프로젝트를 진행 중 마주친 오류? 라고 해야하나 개발자 도구에 몇줄 씩이나 뜬다.. 이유로는 'MapRight2' 컴포넌트가 렌더링 되는 동안에 'App' 컴포넌트 상태를 업데이트 할 수 없기 때문이라고 한다.. 이해하기로는 다 세팅이 안끝났는데 화면에 그리려니 오류가 뜬게 아닐까.. 사실 지금 당장에는 에러가 발생한다던가 정보가 안뜨진 않지만 잘못하면 무한루프에 빠질 수 있다기에.. 거슬리니까 빠르게 먼저 해결해봐야지.. 문제를 해결하기 위해 MapRight2에 setState 한 부분들을 찾아보았다. useState와 슬라이스로 만들어 둔 setTab이 눈에 보였다. 일단 일반적인 useState는 init 값이 지정되어있고, 어차피 최초 App이 실행될 때 이미 호출을 하기 때문에 이 때문.. 시계 컴포넌트 (사용자 Hook) 에서 10분 단위로 표출하기 (day.js, floor) 현재 상황은 DB에는 10분단위 데이터가 쌓일 예정 하지만 시계는 실시간 정보를 화면에 보여주고 있다. 이러한 이유로 해당 정보에서 0~9분 데이터는 지우고 만약 현재 시간이 16분이라면 10분, 35분이라면 30분 등으로 표시될 수 있게 스크립트를 구현하였다. import { useEffect, useState } from 'react'; import dayjs from 'dayjs'; const useFloorTime = () => { const [clock, setClock] = useState(''); useEffect(() => { const interval = setInterval(() => { let now = dayjs(); let minutes = now.minute(); minutes .. 이전 1 다음
