리액트 useState state 변경이 되지 않습니다.

Question

안녕하세요.

리액트로 프로젝트를 진행하다 막히는 부분이 있습니다.

 ...
const initialEditForm = {
  profileUrl: '',
  imageFile: null,
  username: '',
  imageUrl: '',
}

const [memberForm, setMemberForm] = useState(initialEditForm)

...

const onChangeProfileImg = useCallback(
    async (e: ChangeEvent) => {
      const ImageFiles = (e.target as HTMLInputElement).files
      if (ImageFiles && ImageFiles[0]) {
        const url = URL.createObjectURL(ImageFiles[0])
        setMemberForm({ ...memberForm, imageFile: ImageFiles[0] }) // 문제부분
        setMemberForm({ ...memberForm, imageUrl: url })
      }
    },
    [imgInputRef],
  )

주석으로 표시한 부분에서 state변경이 되고 있지 않은데요.

혹시 왜이런지 알 수 있을까요?

비동기에 관련된 부분일까요?

콘솔로 ImageFiles[0]를 찍어보면 값이 나오긴 하는데 state를 변경하려고 하면 안되네요.

kiroki · Accepted Answer

 setMemberForm({ ...memberForm, imageFile: ImageFiles[0], imageUrl: url})

컴포지트 · Answer

setMemberForm 두번 호출한 건 의도한 건가요?

state 변경은 의외로 비동기입니다. 따라서 두번 호출할 때, 마지막 호출 시 imageFile 변경분은 반영되지 않습니다.

따라서 둘 중 하나 선택하시길.

첫번째: 한꺼번에 담기

setMemberForm({ ...memberForm, imageFile: ..., imageUrl: url })

두번째: 콜백 사용 (콜백 인자는 최신 값이 반영됩니다.)

setMemberForm(oldForm => ({ ...oldForm, imageFile: ImageFiles[0] }))
setMemberForm(oldForm => ({ ...oldForm, imageUrl: url }))

물론 가능하면 첫번째 방법이 추천됩니다.

useState 비동기 검색하면 작동 원리를 볼 수 있습니다. 예: https://velog.io/@rkio/React-useState%EB%8A%94-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9D%B4%EB%8B%A4.-%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%ED%95%98%EB%A0%A4%EB%A9%B4

리액트 useState state 변경이 되지 않습니다.

2개의 답변

Q&A 목록