본문 바로가기

map()2

[ React ] map() 사용 시 key는 반드시 넣어줘야 하는 권장사항. map()을 활용해서 리스트를 만들다 보면 이런 에러가 나타난다. 리스트의 각 아이템에는 고유한 key prop이 필요하다는 에러. Key는 왜 필요한걸까? Key가 필수도 아니고 안 써도 작동하지만 필수처럼 쓰이는 권장사항이다. Key는 React가 동적 리스트나 반복 요소를 렌더링 할 때 어떤 항목을 변경하거나 추가, 삭제하는 것에 대한 식별을 돕는다. 식별자를 제공하면 리액트가 요소 간의 변경을 더 효율적으로 추적할 수 있고 업데이트도 더 빠르게 처리할 수 있다. 아이템의 재사용 관리도 더 쉬워지며 예상치 못한 버그나 렌더링 이슈도 방지할 수 있다. 엘리먼트의 안정적인 고유성을 부여하기 위해서는 배열 내부의 엘리먼트에 Key를 지정해야 한다. 데이터의 ID를 key로 지정하는 것이 고유하게 식별할 .. 2023. 9. 16.
[ JavaScript ] sessionStorage에 여러 아이템 저장하기, 객체를 세션스토리지에 저장하기 여러 아이템을 sessionStorage에 저장하고 싶다면 아래와 같은 방법을 이용할 수 있다. 키 하나에 모두 저장하기 const data = { updateName: name, updateURL: url, updateKey: key }; sessionStorage.setItem('userData', JSON.stringify(data)); 여러 아이템을 data라는 객체에 저장하고 JSON.stringify() 함수를 사용해 객체를 문자열로 변환시켜 userData 키에 저장할 수 있다. sessionStorage에는 아래와 같이 담긴다. 그런 다음 가져올 때는 JSON.parse() 함수를 사용해 문자열을 다시 객체로 변환합니다. const data = JSON.parse(sessionStorage.. 2023. 8. 1.