개발자

useInput 훅의 onChange 연속 2번 사용하는법

2023년 03월 02일조회 260

function useInput(initialState) { const [state, setState] = useState(initialState); const onChange = (e) => { console.log(e, 'onchange') const { target: { name, value }, } = e; setState({ ...state, [name]: value, }); }; return { state, onChange, }; } 이러한 useInput 훅이 있습니다. 어떠한 페이지에서 const {state, onChange} = useInput(); 이라고 코드를 선언 한 후에 onChange를 두번 연속으로 코드를 작성하면 정상적으로 동작할까 궁금해서 해봤는데 마지막에 선언된 값만 state에 들어가더라구요 이유가 무엇인가요?? const onClick = () => { onChange({ target: {name : "AAA", value: "1번" }}); onChange({ target: {name : "BBB", value: "2번" }}); } 결과 : 2번값만 들어가있음

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

인기 답변

김석현님의 프로필 사진

안녕하세요! https://beta.reactjs.org/learn/queueing-a-series-of-state-updates 위 React Docs 링크를 참고하시면, 많은 도움을 얻으실 수 있을 것 같아요. "React가 상태 업데이트를 어떻게 수행하는지"에 대한 내용인데요, 링크 본문에 나오는 내용이지만 여기서도 조금만 설명드려볼게요! 예컨대 아래와 같은 코드가 있을 때, import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3</button> </> ) } +3 버튼을 클릭했음에도 불구하고, 각 렌더링의 상태 값은 고정되어 있으므로 setNumber(number + 1)를 여러 번 호출하더라도 실제로 상태가 업데이트되기 전까지 number 값은 항상 0이라고 해요. (React는 set 함수를 호출하는 순간 곧바로 상태를 업데이트하지 않습니다.) 아래와 같은 코드 처럼요! setNumber(0 + 1); setNumber(0 + 1); setNumber(0 + 1); 결국 질문자님께서 작성하신 onChange({ target: { name : "AAA", value: "1번" } }); onChange({ target: { name : "BBB", value: "2번" } }); 코드는 아래와 같이 상태 업데이트를 수행하려고 할텐데요, setState({ ...state, "AAA": "1번" }); setState({ ...state, "BBB": "2번" }); 이 때 state 값이 {}라고 가정하면, setState({ …{}, "AAA": "1번" }); setState({ …{}, "BBB": "2번" }); 와 같이 표현될 것입니다. 그렇다면 결국은 마지막에 호출된 setState({ …{}, "BBB": "2번" }); 코드에 의해 상태 업데이트 후, 다음 렌더링에서의 state 값은 { "BBB": "2번" }이 되겠지요. 하지만 본문을 계속 읽어보시다보면 이를 타파할 수 있는 방법이 나오는데요, 바로 setNumber(n => n + 1)와 같이 set 함수 인자에 값을 넣는 것이 아닌, "이전 상태를 기반으로 다음 상태를 계산하는 함수"를 넣는 것입니다. 질문자님께서 작성하신 코드의 setState({ ...state, [name]: value }); 해당 부분을 setState(prev => ({ ...prev, [name]: value })); 와 같이 변경하는거에요. 이렇게 하면 의도하신 대로 상태 업데이트가 2번 진행될거에요! 정리하자면, 1. "상태값은 각 렌더링별 하나의 값"으로 고정된다. 따라서 단순히 set 함수의 인자에 "상태값을 포함시켜 계산된 값"을 넣어서 여러 번 업데이트하려고 하면, 실제로는 가장 마지막에 호출한 set 함수만 적용된다. 2. 특정 렌더링에서 상태를 여러 번 업데이트하고 싶을 때는 set 함수의 인자에 "이전 상태를 기반으로 다음 상태를 계산하는 함수"를 넣으면 된다. 정도가 될 것 같습니다. 이해하기 쉽게 설명드린다고 주저리주저리 쓰긴 했는데 도움이 되셨는지 모르겠네요. 자세한 내용은 앞서 말씀드린 React Docs 링크를 참고하시면 좋을 것 같습니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!