useRef : dom 요소 직접 접근은 가능. 렌더링은 불가[자신감up 실습3]

정리

 

위쪽은 inputValue useState 함수를 통해서 검색창 안과 name 출력 변수 간을 연결.

아래쪽은 출력 변수와 검색창을 바로 useRef 함수로 연결해서 사용

하지만 useRef만을 사용하면 출력 변수값을 바꿔주더라도 출력변수가 useState 사용 변수가 아니라면 렌더링 불가.

 

---

 

출력 결과

위 : useState / 아래 useRef

 

useState는 이름 전송 버튼을 눌러야 name 상태변수가 수정

---

코드

import './App.css'

import React, { useRef, useState } from 'react'

function BadInput() {

  const [name, setName] = useState("Guest");

  const [inputValue, setInputValue] = useState("");

 

  const hinputchange = (event) => {

    console.log(event.target.value)

    setInputValue(event.target.value)

  }

 

  const hchangename = () => {

    setName(inputValue)

  }

    return (

      <div className='BadInput'>

 

        <input type="text" value={inputValue} onChange={hinputchange}/>

        <button onClick={hchangename}>이름 전송</button>

        <h1>안녕하세요. {name}님!</h1>

       

      </div>

    )

};

function GoodInput() {

  const [name, setName] = useState("Guest");

  const inputRef = useRef("");

  const refChange = () => {

    setName(inputRef.current.value)

  }

    return (

      <div className='GoodInput'>

        <input type="text" ref={inputRef} onChange={refChange}/>

        <h1>안녕하세요. {name}님!</h1>

 

      </div>

    )

}

function App() {

  return (

    <div className='App'>

      <BadInput/>

      <hr/>

      <GoodInput/>

     

    </div>

  )

}

export default App

---

.current 와 .current.value

 

 

.current: useRef를 사용하여 생성된 참조의 현재 참조값을 가리킵니다. 이는 DOM 요소, 숫자, 객체 등 다양한 것들이 될 수 있습니다.

 

이 예시에서 myRef는 <div> 요소를 참조합니다. myRef.current는 <div> 요소 자체를 가리킵니다.

이를 통해 해당 요소에 대한 직접적인 조작이 가능합니다 (예: 위치 조정, 스타일 변경 등).

 

export default App

import React, { useRef, useEffect } from 'react';

function MyComponent() {

  const myRef = useRef(null);

  useEffect(() => {

    console.log(myRef.current); // DOM 요소 또는 다른 참조된 객체/값

  }, []);

  return <div ref={myRef}>Hello, World!</div>;

}

 

 

---

.current.value: 주로 input, select, textarea 같은 HTML 폼 요소를 참조할 때 사용됩니다. 이는 해당 요소의 현재 값을 (사용자가 입력한 텍스트나 선택한 옵션 등) 가리킵니다.

 

import React, { useRef } from 'react';

function FormComponent() {

  const inputRef = useRef();

  const handleSubmit = () => {

    alert(`Input Value: ${inputRef.current.value}`);

  };

  return (

    <div>

      <input type="text" ref={inputRef} />

      <button onClick={handleSubmit}>Submit</button>

    </div>

  );

}

 

이 예시에서 inputRef는 <input> 요소를 참조합니다. 사용자가 버튼을 클릭하면, handleSubmit 함수가 호출되며 inputRef.current.value를 통해 현재 입력 필드의 값을 가져옵니다