아직 해결못한 이슈

문제

• 비밀번호 변경 후

• 모달창을 다시켜면 input의 value들이 그대로 남아있다

• 코드는 tailwind-css 를 사용하여 react-component 를 사용하였고, 다음과 같다

<Input 
	forwardRef={pwd1} 
	type="password" 
	placeholder="" 
	onKeyUp={ChangePasswordHandler}>
</Input>

• 내부에 innertext 로 들어가는게 없는 상태

시도해본 것들

1. onKeyUp 이벤트가 발생할 때 마다 useState 로 선언되어있는 데이터가 변경되게 되어있기 때문에 모달이 닫히면 setData 를 활용하여 초기화하기

   • input 박스안에 들어가있는 텍스트들은 Input 태그의 innertext 이기 때문에 useState 의 데이터를 변경해도 변화가 없음

2. react-component 로 선언되어있는 <Input> 내부에 데이터를 직접 주입하기 ex) <Input> <div> {data} </div> </Input>

   • input 과 같이 자식을 가질 수 없는 태그에는 자식이 들어갈 수 없다

   

3. useRef 를 사용하여 Input 태그안의 innerText 를 직접 변경

   • useRef는 리액트 컴포넌트로 선언된 태그에서는 사용할 수 없다
   • forwardRef() 함수를 사용해야 한다고 하는데, forwardRef() 를 사용하기 위해서는 선언할 때 부터 값을 주입시켜 넘겨줘야 하지만, 현재 tailwind-css를 통해 만들어져있는 스타일 컴포넌트를 사용하고 있기 때문에 초기 설정을 할 수 없다

4. useinput 사용

   • useinput 개념이 useState 에 onChange 이벤트를 달아주어 input 태그에서 쉽게 사용하기 위한 도구라서 1번과 같음