React Hooks -useEffect와 useRef를 이용한 간단한 프로그램만들기

Q. 창에 들어가면 input창에 기본으로 focus를 주고 시작한다. Login버튼을 누르면 input창에 입력한 username에 대한 방문인삿말이 alert창으로 나온다(반갑습니다 ***님). alert창을 닫으면 input창은 비워져 있고 focus를 받은 상태로 존재한다.

결과화면

alert창을 닫으면 입력했던 이름이 사라지고 focus를 받고 있다

 

정답을 보기 전에 input태그에 대해 좀 알아보기로 한다. 원래 코드는

    <input ref={ref} type="text" placeholder="username"/>

 

위와 같이 단순히 type을 text로 주었다. 하지만 type을 빼고 name속성을 주면 또 안된다. 그래서 이전에는 어떻게 짲나? 찾아보았더니 아래와 같은 코드가 있었다.

    <input ref={ref} onChange={onChange} value={name} placeholder="username"></input>

 

type을 빼고 onChange와 value를 준 형태다. 아직까지 둘의 차이점은 잘 모르겠으나 두개 모두 정상적인 결과를 가져온다.

정답코드