ref를 왜 쓰는걸까요.. 바로 돔에서 가져오면 안되는 이유.. 알수없어요..

[wmakerjun]

ref를 왜 쓰는걸까요.. 바로 돔에서 가져오면 안되는 이유.. 알수없어요..

[zereight]

특정 DOM에 대한 컨트롤이 특정한 시점에 필요할때

ex) 특정 시점에 특정 엘리먼트에 focus 줄 때

[yujo11]

특정 DOM에 접근할 필요가 있을 때

[wmakerjun]

언제 특정 DOM에 접근하는 경우가 생길까요?

[jho2301]

리액트로 컴포넌트를 원하는대로 컨트롤 할 수 없을 때, 바닐라JS로 컨트롤해야할 때

[zereight]

document 객체안쓰고 ref를 써야하는 이유는 무엇인가요

[wmakerjun]

궁금궁금해요

[jho2301]

createRef하면 current 프로퍼티로 돔요소에 접근하는데 시점에따라 가져오는 경우도 있고 못가져오는 경우도 있기때문에 이를 확정적으로 해주려고 하는것같아용..

[bucketHaneul]

리액트로 코드를 짰는데, 특정 input에 focus를 주는 등 특정 DOM에 접근 해야할 때 ref를 씁니당

[wmakerjun]

ref를 안쓰면 focus를 못주게 만들어진 이유가 뭘까요? 불편한것 같은데 ㅠㅠ 리액트 이슈에 비슷한 이슈가 있을까요? 😭

[seojihwan]

자식 컴포넌트, element에 접근하기 위해 사용

[swon3210]

이 말은 왜 ref 대신 document.querySelector 를 쓰면 안되는지에 대한 말로도 해석할 수 있을 것 같은데, 저는 그 이유가 더 궁금합니다

[swon3210]

단순히 참조를 여러번 수행하지 않기 위해서 일까요?

[swon3210]

아하 리액트 엘리먼트 객체와 DOM 상의 객체는 엄밀히 말해서 대상이 다르기 때문에, 개발자가 의도하는 대상을 가리키게 만들기 위해서 ref 를 쓰는거군요

[zigsong]

• 특정 DOM에 대한 focus가 필요할 때
• 컴포넌트의 생애주기 동안 값을 유지하고 싶을 때

[Tanney-102]

dom 접근을 매번 하기보다 해당 dom에 대한 참조를 '기억한다'가 핵심 아닐가요

[sunhpark42]

• dom 에 접근하기 위해서 (focus, select 등)
• 초기화 되면 안되는 변수 값을 이용할 때
• 렌더링이 불필요한 값을 수정할때 리렌더가 되지 않게 하기 위해서

[sunhpark42]

로또에서는 초기화되면 안되는 값(interval id)를 위해서 이용했습니당

[2SOOY]

• 로또, 페이먼츠 때 focus와 같은 이벤트를 활용하기 위해서 ref를 이용하였습니다 :)
• 추가로 ref를 활용하면 react 통제 내에서 개발이 가능하다고 생각합니다.

[dudtjr913]

useInterval 커스텀 훅을 만들 때 사용했었습니다. setInterval은 마운트될 때 한 번만 실행되게 하고, 콜백 함수가 계속 실행되는데, 이 때 ref로 콜백 함수를 업데이트 해주지 않으면 이전의 콜백 함수를 참조하게 되었습니다. 그래서 ref의 프로퍼티인 current를 업데이트해주어 변경된 콜백 함수를 사용할 수 있게 만들었습니다.

[devhyun637]

• 특정한 DOM에 직접 접근을 해서 사용해야 할 때 (ex. focus)
• 렌더링이 일어나지 않은 상황에서 reset을 할때도 사용했습니다..(맞는 방법인지는 모르겠음)

[0307kwon]

jsx의 attribute로 제어가 불가능하고 dom api를 사용해야만 접근이 가능한 곳에 ref를 쓰는 것 같습니다.

바로 dom에서 가져오지 않고 ref를 쓰지 않는 이유는 리액트의 생애 주기 내에서 관리하기 위함인 것 같습니다!

[yungo1846]

1. 특정 DOM에 접근해야할 때
2. 함수형 컴포넌트에서 리렌더링 될 때마다 초기화되면 안되는 값을 변수로 선언하고 싶을 때
3. useEffect hook의 dependency array에 변수를 추가하고 싶을 때

[ddongule]

어떤 특정한 DOM에 접근해야 할 때 사용합니다~!

• 체프의 답변을 듣고 추가 >>ㅑ!
  document.queryselector를 하게되면 real DOM을 직접 건드리게 된다. ref를 사용하면 virtual DOM을 건드리는 것이기 때문에 React에서 요소를 제어할 수 있다.

[SunYoungKwon]

이벤트가 발생시 이벤트 객체를 통해 DOM 요소를 선택하는 경우 외에 특정 DOM에 접근이 필요할 때 사용했습니다.

• 예) 특정 DOM요소에 focus 줄 때

[hchayan]

명령형, 선언형 프로그래밍과 관련이 있지 않을까요?

[Puterism]

리액트에서의 HTML 요소는 컴포넌트로 관리됩니다. 따라서, DOM 선택자로 접근하는 것은 리액트에서 통제되는 요소가 아니기 때문에 일종의 사이드 이펙트로 취급된다고 생각합니다. 그래서 HTML 요소에 직접 접근하기 위해서는 ref라는 참조 객체가 필요하게 되었다고 생각합니다.

[bigsaigon333]

1. jsx는 React.createElement 의 syntatic sugar에 불과합니다. 따라서 jsx로 생성된 react element가 V-DOM에 추가(갱신)되고, 재조정 과정을 거쳐 Real DOM 에 반영됩니다. 따라서 React Component에서는 Real DOM에 직접적으로 접근할 방법이 없습니다. Real DOM에 접근해야만 하는 경우에는 react 에서 제공하는 ref를 이용하여 Real DOM에 접근할 수 있습니다.

2. useRef 훅은 plain object이므로, 함수 호출이 종료되어도 저장하고 싶은 값이 있는 경우에도 사용할 수 있습니다. 이를 활용하면, 함수 컴포넌트에서도 처음 mount 되었을때만 수행하는 로직을 작성할 수 있습니다.