inflearn logo
강의

Course
Instructor

Slack Clone Coding [Real-time Chat with React]

입력한 target.value 값을 배열에 저장 할려고 합니다.

1344

minsu

27 asked

0

안녕하세요, 제로초님 제가 강의를 듣고 개인 프로젝트를 하고 있습니다. 

다름이 아니고 제가 useState 배열을 만들어서 Input 으로 입력한 값(event.target.value) 을 배열에 집어 넣을려고 합니다.

제가 직접 구현한 코드인데. 배열에 event.target.value 값이 잘 저장되는 것 같지만 문제가 있어요 ㅠㅠ.

 

이게 input 에 123을 입력하고 배열 ['123'] 이 저장되고 

input 을 끊었다가 123 -> 이어서 456 을 입력하면 ['123'] ['123456'] 배열이 2개가 생성됩니다.

저는 배열이 계속 생성되는 게 아니라 event.target.value 마지막으로 입력된 값을 저장하고 싶은데..

어떻게 처리 해 줘야 할 지 모르겠습니다.

 

const [integerIdList, setIntegerIdList] = useState<any>([]);
 
const handleInputChange = (index: number, event: any) => {
if (event.target.name === "IntegerId") {
setIntegerIdList([...integerIdList, event.target.value])
}
}
 
return (
<input type="text" name="IntegerId" onChange={(event) => handleInputChange(index, event)}/>
)
 

이게 한턴 한턴 끊었다가 입력을 하면 이렇게 됩니다.

저는 최종 124124124124124 값을 첫 번째 배열 -> integerIdList: ['124124124124124'] 이렇게 등록하고 싶습니다.

어떻게 수정을 해줘야 할까요..

  

react 웹팩 Socket.io typescript babel 클론코딩

Answer 2

0

minsu

제로초님 코드 수정 했습니다

제가 Input Form 을 동적으로 만들어서 -> Input 2개를 만든 다음 입력하면 2개의 배열이 들어가야 하는 데

마지막으로 입력한 하나의 배열만 들어가게 됩니다.

왜 이러는 지 모르겠습니다.. ㅠㅠ

const [integerIdList, setIntegerIdList] = useState<any>("");
const [integer, setInteger] = useState<any>([]);
 
const handleInputChange = (index: number, event: any) => {
if (event.target.name === "IntegerId") {
// setIntegerIdList(event.target.value)
setInteger([...integerIdList]);
}
};


const onChangeInteger = (event) => {
setIntegerIdList([event.target.value]);
};
 
return (
 
<input
type="text"
onBlur={(event) => handleInputChange(index, event)}
name="IntegerId"
onChange={(event) => onChangeInteger(event)}
/>
)

0

zerocho

제가 두 개가 바뀌었다고 했는데 두 개를 서로 안 바꾸시고 반만 바꾸셨습니다. 잘 생각해보세요. 각 state의 역할이 무엇인지를요.

0

minsu

수정하고 정상적으로 동적으로 input 을 추가하여 입력하면 값이 제대로 들어갑니다.

하지만, input에 값을 입력하는 상황(focus)에서 114값을 입력 후 ->

input focus 을 취소하고 다시 focus 해서 처음 입력했던 값을 다 지우고 재 입력하면 배열에 처음에 입력했던 114 값이 지워지는 게 아니라 배열이 하나가 더 추가되고 2번째 입력값 112 [114, 112] 이런 식으로 저장이 되네요..

월래 제가 생각했던 값은 114값이 지워지니 배열에서 사라지고 112 값만 있어야 하는 데 말입니다.

어떻게 값을 처리 해줘야 할 지 모르겠네요.

const [ingredientIds, setIngredientIds] = useState<any>([]);
const [integer, setInteger] = useState<any>("");
 
const handleInputChange = (index: number, event: any) => {
if (event.target.name === "IntegerId") {
setIngredientIds([...ingredientIds, integer])
}
};

const onChangeInteger = (event: React.ChangeEvent<HTMLInputElement>) => {
setInteger([event.target.value]);
};
 
 
return (
<input
type="text"
onBlur={(event) => handleInputChange(index, event)}
name="IntegerId"
onChange={(event) => onChangeInteger(event)}
/>
)

 

0

zerocho

integer는 배열이 아닌데 왜 setInteger([event.target.value])를 하시나요? 그냥 setInteger(event.target.value) 하셔야죠. 그리고 const newIngredient = [...ingredientIds]; newIngredeint[index] = integer; setIngredientIds([...newIngredient]) 하셔야죠. 이거 정말 간단한 겁니다.. ㅠㅠ

0

minsu

죄송합니다. 정말 간단한 거라니.. 너무 슬프네요 ㅠㅠ

0

zerocho

배열 마지막에 계속 추가하고 계신데 index를 사용해서 원하는 자리를 수정하시면 되죠.

0

zerocho

state를 두 개 만든 뒤, 끊는 행동에 이벤트를 따로 거셔야 합니다. onBlur같은 액션에서요.

onChange에서는 글자를 기록하고, onBlur에서는 배열에 추가하는 식으로 해야 합니다.

0

minsu

요렇게 하는 게 아닌가요.. ㅠㅠ 똑같은 결과가 출력되네요..

const [integerIdList, setIntegerIdList] = useState<any>("");
const [integer, setInteger] = useState<any>([]);
 
const handleInputChange = (index: number, event: any) => {
if (event.target.name === "IntegerId") {
setIntegerIdList(event.target.value)
}
}
const onChangeInteger = () => {
setInteger([...integerIdList])
}
return (
<input type="text" onBlur={onChangeInteger} name="IntegerId" onChange={(event) => handleInputChange(index, event)}/>
)

0

zerocho

change랑 blur를 반대로 하셨는데요?

기본 셋팅과 관련하여

0

91

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

96

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

148

2

useEffect 개수 관리

0

109

2

라이브러리 서치 방법

0

103

2

함수 정의 패턴

0

77

1

npm run dev 에러

0

152

3

npx webpack 후 에러

0

178

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

142

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

177

2

초기세팅중 packge.json 에러떠요

0

154

2

CORS - Access-Control-Allow-Origin 누락 문제

0

430

3

로그인 페이지 무한 새로고침 현상

0

598

2

Module not found: Error: Can't resolve './App' 에러

0

952

1

배포 방법

0

296

2

npm run dev 시 빌드가 매우 느려졌습니다

0

988

2

alias 경로 설정 오류

0

448

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

275

1

제네릭 질문

0

217

2

ts-node 대신 tsx 사용여부

0

373

1

배포 관련 질문

0

247

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

385

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

336

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

247

2