인프런 커뮤니티 질문&답변
작성한 질문수
함수 컴포넌트와 필수 Hook에서 setValue({value1:10}) 관련 질문이요!
해결된 질문
작성
·
313
0
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 과는 속성명 이름이 같을 뿐, 서로 다른 상탯값입니다. // 사람으로 따지면 동명이인 같은 거죠. 이름은 같지만 서로 다릅니다.
살펴보시고 또 질문 남겨주세요.
화이팅입니다. :-)
제가 크게 헸갈렸네요...!! 감사합니다!