Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 타입스크립트
- 타입스크립트 props
- JavaScript
- 파이썬 enumerate
- 내배캠 프로젝트
- 리액트 프로젝트
- useState
- 파이썬 for in
- typeScript
- 내일배움캠프 프로젝트
- 파이썬 slice
- React Hooks
- 자바스크립트
- 코딩테스트
- 리액트 팀 프로젝트
- 프로그래머스
- 파이썬 for
- js
- REACT
- 리액트
- 리액트 페이지 이동
- 파이썬 반복문
- 내일배움캠프
- 파이썬 list
- Next 팀 프로젝트
- 그리드 정렬
- 내일배움캠프 최종 프로젝트
- 리액트 훅
- 타입스크립트 리액트
- 한글 공부 사이트
Archives
- Today
- Total
aotoyae
[React] useState(2) : 참조형 데이터 값 리렌더링 본문
데이터 불변성 때문에 생기는 문제..!
import { useState } from "react";
function App() {
const [obj, setObj] = useState({
name: "미나토",
age: 20,
});
const reName = () => {
obj.name = "요리";
setObj(obj); {/*setObj 에 새 값을 할당*/}
console.log(obj);
};
return (
<div>
{obj.name}
<button onClick={reName}>RENAME</button>
</div>
);
}
export default App;
버튼을 클릭하면 이름이 바뀌도록 설정했다.
하지만 obj.name 이 바라보는 주소값은 바뀌어도
obj 가 바라보는 주소값은 변하지 않았기에
리액트는 setObj 가 바뀌지 않았다고 생각해 리렌더링을 실행하지 않는다.
콘솔에는 바뀐 값이 잘 찍힌다 ~ 리렌더링만 안되는 것~
❗️ 이 문제를 해결하려면 새 객체를 만들어서 넣어줘야 한다!
아예 새 주소를 바라보도록!
값이 같아도 새 주소를 연결하는 객체의 특성을 이용!
const reName = () => {
const obj2 = { ...obj }; {/*obj를 복사해 obj2 에 넣어준다.*/}
obj2.name = "요리";
setObj(obj2);
};
새 객체인 obj2 로 setObj 를 바꿔준다.
👀 주의) 스프레드 문법을 쓰지 않으면 그대로 같은 주소를 연결해 원본 값도 바뀐다.
'React' 카테고리의 다른 글
[React] useState(3) : 함수형 업데이트 (0) | 2024.01.24 |
---|---|
[React] styled components CSS, createGlobalStyle (0) | 2024.01.24 |
[React] useState(1) : 카운트앱, input 값 받아오기 (0) | 2024.01.23 |
[React] props(2) : children 활용 (0) | 2024.01.23 |
[React] 리액트 리스트 추가, 삭제 & 컴포넌트 파일 분리 (0) | 2024.01.20 |