새 창이 열렸을 때, 빈 텍스트에 마우스로 클릭하지 않더라도 이미 선택되있는 경우가 있다. 이 날은 그 기능을 useEffect와 useRef를 통해 적용시키는 방법에 대한 수업이었다.
둘 다 React의 기능이다. docs 내용을 확인했으나
안 와닿는다. 뭔 소리야.
써보면서 알아보자.
1. Container
1.useRef가 적용되는 부분은 랜더링의 적용을 안받는다고 한다.
렌더링은 서버에서 데이터를 페이지에 뿌려주는 과정을 뜻한다고 한다.
여튼 야가 어떻게 사용될 지는 뒤에 나온다.
2.useEffect - 화면이 그려진 이후 실행 즉 렌더링이 완료된 뒤에 수행.
여기의 빈 배열[]은 페이지가 나온 후 한번만 실행되는 내용. 어떻게 쓰일지 좀 더 지켜보자.
참고*
여기서의 [] 공간을 의존성배열 (dependency array)라고 한다.
useEffect는 state가 변경됬을 때에도 실행이 되며, 어떤 state들이 변경되었을 때 useEffect를 재실행할지 배열로 기재해야한다고 한다. 아직 잘 모르겠다..
3. current.focus() -> 자동 포커스 기능
여튼 중괄호{}안에
얘를 입력해보자.
이놈이 텍스트 인풋 공간을 클릭하지 않고도 깜빡이게 만드는 근원이다. 뒤의 focus 외에도 click등 여러 활용법이 있는 것 같은데, 오늘은 이 기능만 먼저 사용해본다.
4. 프롭스로 보내기.
내가 적용시킬 presenter의 input으로 보내야하므로 porps를 통한 전달.
5. 타입스크립트로 인해 빨간줄이 뜬다. 앞에 변수 선언 및 할당한 useRef()안에 null을 넣어보자
null을 넣으니 사라졌다. inputRef의 기본값이 null로 되면서 자동으로 타입도 정해진 듯 하다.
2. presenter
깜빡임 적용할 작성자 부분을 찾아 프롭스 적용된 inputRef 적용하기.
일단 기능 코딩은 여기서 끝이다. 밑줄이 신경쓰이니 타입스크립트로 타입 지정하자.
3.styles
밑줄 없어졌는지 확인해보자
없어졌네. any 앞에 장사없다. 점점 저 곳에서 any를 줄여나가야 한다.
일단 수업내용 바탕으로 적용해봤으나, 원리를 완벽히 이해 못한 채 진행한 부분이 꽤 있었다. 이럴 떈 일단 따라해보며 조금씩 가까워지는 것도 방법인 듯 싶다.
알아봐야할 점
1. inputRef.current.focus() 얘가 useEffect에 들어갔는데,
useEffect는 화면이 뜨고 실행되도록 하는것.
useRef는 랜더링의 영향을 안받는 것.
즉 화면이 뜰 때 ref={}로 지정된 인풋은 그대로 유지하라는 뜻인건가?
2.props에서 ref의 정확한 역할.
늦었으니 내일 꼭 확인해 볼 것!
