📌map을 사용했더니 경고창이...?
React에서 제품의 list와 같이 반복되는 데이터들은 복잡해지는 코드들의 양을 줄이기 위해서 아래의 예시와 같이 map을 사용하여 구현을 자주 한다.
{coldBrew.map(coffee => return <CoffeeCard data={coffee} />}예시 코드와 같이 map을 사용해서 구현하면 웹페이지에서 경고창을 하나 발견할 수 있다.
고유한 "key" 속성을 부여해주어야 한다고 한다.
{coldBrew.map(coffee => return <CoffeeCard data={coffee} key={coffee.id} />}위의 예시코드처럼 key를 추가해주면 경고창이 사라지는 것을 볼 수 있다.
왜 경고창이 발생하는 것일까?
- 이렇게 경고 메시지가 뜨는 이유는, 각 고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문입니다.
key 값이 없다면?
예시)
[ A, B, C, D]이렇게 배열이 있고, map을 사용하여 렌더링을 한다.
중간에
Z을 추가하여[ A, B, Z, C, D]의 배열로 리렌더링을 하게 될 때,
아래와 같은 방식으로 리렌더링이 된다.
- 기존의
C가Z로 바뀐다.- 그리고
D는C로 바뀐다.- 맨 마지막에
D가 새로 추가된다.
만약 여기서
A를 제거 하게 된다면 아래와 같은 방식으로 리렌더링 된다.
- 기존의
A가B로 바뀐다.- 그리고
B는Z로 바뀐다.C는D로 바뀐다.- 마지막
D가 제거된다.
가만히 있는 애들은 왜 건드려....
key 값이 있다면?
기존의 값들은 건드리지 않고 원하는 위치에 원하는 값을 삽입하거나 삭제한다.
- 따라서, 배열을 렌더링 할때에는 고유한
key값이 있는것이 중요하다.- 중복되는
key값이 존재할 경우 오류메세지가 콘솔에 나타나고, 업데이트가 제대로 이루어지지 않는다.
📌Input값을 입력했더니 에러가..?
로그인 화면을 구현하고
input창에 값을 입력했더니 아래와 같은 경고 에러가 발생했다.
Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
왜 발생하는 것인가?
input의 값으로undefined가 들어갈 수 있는데, 그에 대한 처리가 이루어지지 않아서 라고 한다.
해결방법
- 상태값을 관리하는 useState에 초기값( ' ' )을 준다.
const [state, setState] = useState('')
- input 의 value에 값이 undefined일 경우에 ' ' 으로 처리해 준다.
<input ...... value = {state || ''} />
📌추가적인 소소한 에러
pw 사용시 자주 뜨는 경고 창
input을 사용할때type으로password를 설정하면,form태그로 감싸져 있어야 하고,autoComplete설정을 해주어야 한다고 경고창이 발생한다.
- Reference
- https://react.vlpt.us/basic/11-render-array.html
