10. useRef 로 특정 DOM 선택하기 · GitBook

https://react.vlpt.us/basic/10-useRef.html

Oct 04 '20 09:10 utterances-bot

onReset ... nameInput.current.focus() 부분에서 focus가 Unresolved function or method focus() 가 발생하는데 단순 intellij 에러 일까요? 브라우저에서는 정상적으로 작동하긴 하네요

Oct 04 '20 09:10 richguma

Cannot read property 'focus' of null 라고 뜨는데 혹시 제가 잘못 입력 한걸까요?

Jun 01 '21 06:06 jsca90

@jaylee222 const nameInput = useRef()에서 useRef(null)로 초기화해주세요. @jsca90 하단 템플릿에 name input 속성에 ref={nameInput}이라고 해주셨나요 ?

Jun 15 '21 00:06 heonny

React ref에 대해 한번에 와닿는 자료를 못 찾아서 머리가 엉켰었는데 한번에 해결해주셨어요! 감사합니다!

Jun 24 '21 08:06 chinmichael

useRef

javascript에서 특정 Dom을 선택하는 역할 ex) getElementById, querySelector
특정 DOM에 접근할 때 사용한다.
외부 라ㅣ브러리 사용할때 유용하다.
원하는 위치에 ref={} 의 형태로 작성하면 된다.
포커스를 잡으려면 nameInput.current.focus() 형태로 작성하면 된다.

const nameInput = useReft();

const onClick = () => {
    nameInput.current.focus();
}

return(
    <input ref={nameInput} />
    <button onClick={onClick}>클릭</button>
)

Jul 05 '21 12:07 wenodev

@wenodev useReft → userRef 오타났어요

Jul 12 '21 07:07 zineeworld

감사합니다!!!

Aug 09 '21 02:08 jody96

  const onChange = e => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

이 부분에서 기존의 input 객체를 복사하는 이유가 무엇인가요? 코드가 잘 이해가 안가서요 ㅠㅠㅠ [name] < 이게 어떤걸 의미하는지도 잘 모르겠어요. 보통 []은 배열을 의미하고 인덱스 값이 들어가지 않나요? useState로 객체를 다루는 예제는 처음봐서 그런지 잘 이해가 안가서요 ㅠㅠ 그래서 이해하려고 제가 이해 할 수 있는 범주를 바탕으로 코드를 아래처럼 바꿔봤는데 같은 기능을 하는것 같아서요! 그래서 input객체를 복사하고, 그 다음 [name]:value로 값을 할당해주는 이유가 궁금해요!

  const onChange = (e) => {
    const { value } = e.target;
    setInputs({
      name: value
    });
  };

Aug 25 '21 20:08 pjj186

@pjj186

[name] 은 input 태그의 name 속성의 값이에요. input 태그에 변경이 생기면 onChange 함수가 호출되고 그 input 태그의 name 속성의 값이 [name] 으로 가는거에요

코드에서는 지금 name 속성의 값이 name, nickname 인 input 태그가 두개 잇죠 첫번째 input 에 변경이 발생하면 [name] 에 name 이 들어갈 것이고 두번째 input 에 변경이 발생하면 [name] 에 nickname 이 들어가요

만약 [name] 을 안쓰고 작성하신 것처럼 name 만 있으면 nickname 에 대한 값은 업데이트 되지 않아요.

그리고 제 생각에는 inputs 객체를 복사하는 이유가 spread 문법을 쓰지 않는다면 두개의 input 태그중에 하나만 변경이 일어났을때 onChange 함수에서 setInputs({ nickname : 'aaa'}) 를 호출하겟죠? 이건 저희가 useState 를 통해 초기화햇던 객체랑 구조가 다르게 되니 문제가 생기는 것 같아요 저도 공부중이라 제 생각이 정확히 맞다고는 못하겟습니다

Aug 26 '21 02:08 KangChanSong

@KangChanSong 오.. 완전 정확한것같습니다.. 감사합니다. 구글 통해서 찾아보고있었는데 찬송님 설명덕분에 이해가 완전 잘 되었습니다!

Aug 26 '21 07:08 pjj186

useRef() 를 사용하여 Ref 객체를 만들고, 선택하고 싶은 DOM 에 ref 값으로 설정 Ref 객체의 .current 값은 선택한 DOM을 가리킴

Sep 25 '21 09:09 sshusshu

@pjj186

추가 설명드리면, 기존 input객체를 복사해야 하는 이유는, 함수형 컴포넌트에서 상태를 업데이트할 때는 클래스형 컴포넌트와 다르게 값자체가 대체되기 때문입니다.

https://reactjs.org/docs/hooks-reference.html#functional-updates 리액트 공식문서 참고

Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

Nov 17 '21 06:11 chacha912

gitbook 에 utteranc 는 어떤식으로 추가가 가능한건가요?

Oct 27 '22 04:10 jukangpark

Thanks for the detailed information! So far I’ve figured out how to make an calculator showing history. I will continue to learn new technologies. Thank you!

Sep 17 '23 18:09 1ucasdev

react-tutorial react-tutorial copied to clipboard