오류_formik 해결

사용자 이름 클릭 시 사용자의 정보가 아래 사진처럼 나와야 한다.

하지만, 처음 클릭 한 사용자에 대한 정보가 나오지 않았고, 다른 사용자를 클릭 한 후 클릭해야 나오는 오류가 생겼다.

코드를 찾아보니,

useEffect(() => {
		formik.values.id = selectedUser?.id || 0
		formik.values.userId = selectedUser?.userId || ''
		formik.values.name = selectedUser?.name || ''
		formik.values.phone = selectedUser?.phone || ''
		formik.values.model = selectedUser?.model || ''
		formik.values.nickname = selectedUser?.nickname || ''
		formik.values.email = selectedUser?.email || ''
		formik.values.address = selectedUser?.address || ''
		formik.values.addressDetail = selectedUser?.addressDetail || ''
		formik.values.memo = selectedUser?.memo || ''

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedUser])

이렇게, formik.values를 직접 변경하고 있었고, formik는 내부적으로 상태 관리를 하기 때문에 직접 값을 수정하면 react가 감지를 못하는 상황이 생긴다.
--> 그렇기 때문에, formik.values를 변경해도 컴포넌트가 리렌더링 되지 않아서 처음 선택한 사용자의 정보가 반영되지 않는 문제가 발생했다.

그래서 formik.setValues()를 사용해서 문제를 해결했다.

useEffect(() => {
	if (selectedUser) {
		formik.setValues({
		id: selectedUser.id || 0,
		userId: selectedUser.userId || '',
		name: selectedUser.name || '',
		phone: selectedUser.phone || '',
		model: selectedUser.model || '',
		nickname: selectedUser.nickname || '',
		email: selectedUser.email || '',
		address: selectedUser.address || '',
		addressDetail: selectedUser.addressDetail || '',
		memo: selectedUser.memo || '',
		type: 'USER',
		});
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedUser]); // formik은 의존성 배열에 넣지 않음

// eslint-disable-next-line react-hooks/exhaustive-deps
==> 의존성 배열에 formik를 넣지 않으니까 계속 오류가 생겨서 eslint-disable로 경고를 무시했다.

이렇게 코드를 수정하니, 처음 누른 사용자의 정보도 제대로 뜨고 수정도 제대로 되었다.