인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

정중한 전어님의 프로필 이미지
정중한 전어

작성한 질문수

React로 NodeBird SNS 만들기

다시 질문 드립니다!

해결된 질문

작성

·

153

0

안녕하세요! 아래 아래 게시글(https://www.inflearn.com/questions/30818)에 질문 드렸는데

글을 못보신것 같아 다시 질문 정리하여 올립니다!

useRef를 이용해 이벤트 발생 시 input에 focus를 하는 기능을 만들고자 하는데요.

해당 input이 초기에는 존재하지 않다가, 이후 텍스트를 클릭하면 나타나도록 짰는데 (조건문 사용)

이 때에 코드상으로 input에 ref를 설정해줬음에도 ref에 focus를 줬을 때 input을 잡지 못하는 문제점이 있습니다 ㅠㅠ

(input이 처음부터 존재하도록 코드를 수정해보았더니 그 때엔 제대로 잘 동작합니다)

useCallback에서 변화가 생김을 감지할 배열 목록에 해당 ref를 넣어줘도 

새로 생성된 input을 ref로 잡지 못하고 focus에서 오류가 생깁니다!

이렇게 초기 컴포넌트에 추가된 새로운 노드를 ref로 읽어오지 못할 때에는 어떻게 해야 하나요?

(자세한 코드는 (https://www.inflearn.com/questions/30818)에 서술해두었습니다.. 도움 주시면 감사하겠습니다!!)

답변 2

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

https://stackoverflow.com/questions/51002918/using-refs-with-conditional-rendering

여기에 두번째 답변처럼 useEffect를 따로 분리해서 넣어주셔야 합니다. setEditingMode가 비동기라서 다음줄에 바로 todoInput하면 에러가 납니다.

또는 이거 참고해보셔도 됩니다. https://www.robinwieruch.de/react-usestate-callback

0

감사합니다! 참고해보겠습니다!

정중한 전어님의 프로필 이미지
정중한 전어

작성한 질문수

질문하기