리액트 배열 렌더 관련해서 질문드립니다.

Question

현재 리액트 처음 접하면서 open api를 사용하여 간단한 사이트 구현중에 있습니다.open api로 불러온 사진을 좋아요 버튼을 클릭하여 리스트 태그안에 띄워주는 프로그램인데대충 로직은 다음과 같습니다.좋아요 버튼을 누르면 해당 사진을 배열에 추가하고 그 배열을 로컬스토리지에 저장합니다.이렇게 해서 새로고침을 했을 때도 로컬스토리지에 있는 좋아요가 눌린 사진의 배열을 뿌려줄 수 있도록 합니다.해당 코드가 바로 밑의 코드입니다. const [favorites, setFavorites] &#61; React.useState( jsonLocalStorage.getItem(&#34;favorites&#34;) || [] ); function handleHeartClick() { const nextFavorites &#61; [...favorites, mainCat]; setFavorites(nextFavorites); jsonLocalStorage.setItem(&#34;favorites&#34;, nextFavorites); }이 로직으로는 해당 사진의 좋아요를 누르게 되면 리스트에 바로 렌더링이 되는데현재 좋아요 취소버튼을 구현중에 문제점이 발생했습니다.좋아요 취소 버튼을 누르면 로컬스토리지 내에서 해당 사진이 배열에서 삭제된것을 볼 수 있는데,문제는 새로고침을 해야 화면에서 사라진다는 것입니다.코드는 다음과 같습니다.function handleDeleteClick(e) { const deleteTarget &#61; e.target.nextSibling.currentSrc; const deleteTargetIndex &#61; favorites.indexOf(deleteTarget); favorites.splice(deleteTargetIndex, 1); jsonLocalStorage.setItem(&#34;favorites&#34;, favorites); }어떻게하면 좋아요 취소 버튼을 누르면 바로바로 화면에서 해당 사진이 없어지게끔 할 수있을까요? 도움좀 부탁드립니다!

assign · Accepted Answer

리액트의 useState의 값을 변경할때는 반드시 주어진 상태 변경함수로 값을 변경해야만 합니다. 그래야 리액트가 값이 변경되었는지를 알수있고 리렌더링이 되어서 변경된 값을 인식합니다주어진 코드에서 위쪽 코드는 상태변경함수로 상태값을 변경해서 원하는대로 동작하지만, 아래 코드는 상태 변경함수가 아니라 그냥 상태값을 바꾸기 때문에 아무일도 일어나지 않습니다 다만 새로고침시 삭제되는것은 컴포넌트 자체를 새로 구성하면서 변경된 로컬 스토리지 값을 받아오기 때문입니다 useState에 대해서 한번 자세히 알아보세요

GUNU · Answer

답변 감사드립니다!

리액트 배열 렌더 관련해서 질문드립니다.

2개의 답변

Q&A 목록