[FE] DOM / React Hooks(UseRef())

React의 ref prop은 HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해 사용

 

    const inputRef = useRef();

input이 HTML element.

ref prop으로 inputRef라는 변수를 넘기면

우리는 이 inputRef객체의 current 속성을 통해 input 엘리먼트에 접근 가능

=> DOM API 이용하여 제어 가능

            <input
                ref={inputRef}
                className={styles.input}
                type="search"
                placeholder="search.."
                onKeyPress={onKeyPress} />

 

ref Prop에는 React API를 이용해 생성한 current 속성을 갖는 특정 형태의 객체만을 할당할 수 있음 

useRef()는 함수형 컴포넌트에서 자주쓰는 훅 함수임.

얘는 React API를 이용해 생성한 current 속성을 갖는 특정 형태의 객체임.

얘를 ref에 넣으면? input 이라는 HTML element에 접근이 가능하여 DOM API를 제어할 수 있음

 

DOM은 HTML, xml 문서의 프로그래밍 interface 임

자바스크립트와 같은 스크립트 언어를 통해  DOM을 수정할 수 있음

웹페이지를 수정하거나 생성하는데 사용되는 모든 property method event는 오브젝트로 구성됨.

 

DOM은 프로그래밍 언어는 아니지만,

DOM이 없다면 자바스크립트 언어는 웹페이지 또는 xml 페이지 및 요소와 관련된 모델이나 개념의 정보를 못가짐.

문서의 모든 element(전체문서, 헤드, 문서안의 table, table header, table cell 안의 text)는 문서를 위한 DOM의 한부분.

각 브라우저 모두 자신만의 방법으로 DOM을 구현함

 

아무튼!

 

.

.

.

---

 

ref prop은 여러가지 HTML엘리먼트 중에서도 input을 제어할 때 많이 사용함

 

useRef() hook을 사용해서 inputRef 객체를 생성함!

<input> HTML 엘리먼트의 ref prop에 넘김. 

(ref prop은 React API를 이용해 생성한 current 속성을 갖는 특정 형태의 객체만을 할당할 수 있음!)

<input ref={input Ref}>

 

inputRef 객체의 current 속성에 input 엘리먼트의 레퍼런스가 저장됨

 

사용할 때는 inputRef가 Input 엘리먼트의 레퍼런스를 저장하고있으니, 이 input을 제어하고싶다?

그러면 inputRef.current.diabled = false;    <== 이런식으로 current로 접근하여 사용가능!

 

import React, { useRef } from "react";

function Field() {
  const inputRef = useRef(null);

  function handleFocus() {
    inputRef.current.disabled = false;
    inputRef.current.focus();
  }

  return (
    <>
      <input disabled type="text" ref={inputRef} />
      <button onClick={handleFocus}>활성화</button>
    </>
  );
}

 

 

 

출처:

[React] ref로 HTML 엘리먼트에 접근/제어하기

12. react-tutorial 고급 (ref)

 

 

useRef의 또 다른 역할

• 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리
• useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않습니다.

 

출처:

12. useRef 로 useRef 로 컴포넌트 안의 변수 만들기 · GitBook

 

 

useEffect

* 네트워크 통신 처음 컴포넌트 렌더링될 때만 하는 방법 쓸 떄 사용하기도, 두번째 파라미터를 비워두기

* state의 상태가 변할 때마다 렌더돼서 어떤 함수를 실행하고 싶을 때