함수 컴포넌트와 필수 Hook에서 setValue({value1:10}) 관련 질문이요!
function App2() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [value, setValue] = useState({ value1: 0, value2: 0 });
const onClick = () => {
setValue({ value1: 10 });
};
return (
<div>
Hello App2
<hr />
{JSON.stringify(value1)}
{JSON.stringify(value2)}
{JSON.stringify(value.value1)}
<button onClick={onClick}>클릭</button>
</div>
);
}
export default App2;
여기서 onClick을 수행할때 왜 value.value1의 값이 변경되는 건가요??
첫번째에 useState(0)으로 만든 value1은 어떻게 해야 값의 변경이 되는거죠??답변 1
1
안녕하세요.
App2 컴포넌트 내에 정의하신 3개의 상탯값의 이름과 속성명이 겹치셔 조금 헷갈리셨던 듯 합니다.
setValue 함수를 통해 변경한 상탯값은 value를 통해 참조하실 수 있습니다.
onClick 내에서 setValue를 호출하셨으니 value로 참조되는 상탯값이 변경이 된 것입니다. value1으로 참조되는 상탯값은 setValue1 함수 호출을 통해 변경하실 수 있지만, onClick 내에서는 setValue1을 호출하지는 않으셨으니 value1 상탯값은 변경되지 않습니다.
즉 onClick 내에서 setValue({ value1: 10 }); 을 호출하셨으니, value로 참조하시는 상탯값의 값이 { value1: 10 }으로 변경이 된 것입니다. 이 값은 컴포넌트의 상탯값 value1 과는 속성명 이름이 같을 뿐, 서로 다른 상탯값입니다. // 사람으로 따지면 동명이인 같은 거죠. 이름은 같지만 서로 다릅니다.
살펴보시고 또 질문 남겨주세요.
화이팅입니다. :-)
안녕하세요.
0
48
1
[OneToOne Field Demo] get_user_model() 메서드를 활용해야 하는 이유?
0
272
1
useEffect 훅에서 else 유무에 따른 결과
0
211
1
useAxios 훅의 dependency array 설정
0
245
1
useEffect에서 변수 업데이트 관련 질문
0
381
1
rest_framework.generics.CreateAPIView의 model 속성 유무
0
266
1
bootstrap4
0
470
4
리뉴얼 강의가 오픈이 되면 기존 강의는 더이상 못보는걸까요
1
362
1
admin form에서 앞선 필드 선택 후 다른 필드 select widget 구성하는 방법
0
572
3
useState는 필수일까요?
0
261
1
python manage.py makemigrations instagram 시 created_at default 오류가 발생합니다.
0
596
4
Django allauth를 사용한 소셜 로그인 시 에러
0
654
1
프로젝트명 변경 뒤, 디버그툴바+디버그모드 사용 시 에러
0
552
2
useLocalStorage() 함수 사용여부
0
228
1
django에 LOGIN_URL = '/accounts/login/'의 의미?
0
447
1
리듀서의 의미 재확인
0
430
1
simple-jwt Refresh Token 사용 노하우
0
897
2
docker compose 를 통한 배포 관련 오류 문의
0
670
1
파이썬 속도 장고 관련 궁금한게 있습니다.
0
364
1
is_like_user
0
233
1
related_name 오류
0
272
1
re_path 오류
0
258
1
re_path url
0
249
1
No post matches the given query
0
659
2