React 리액트 - 레퍼런스(Ref)

 

 

useReference

 

 

useRef란?
: 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook

- Ref는 reference, 즉 참조를 뜻한다

- ref == DOM

리액트는 돔을 지양하기 때문에 돔을 사용하는 것을 권장하지 않는다

때문에 돔과 동일하게 쓸 수 있는 reference가 있다

 

 

Name - useState 사용

 

 

사용자가 입력창에 이름을 입력하고 버튼을 누르면 '님' 존칭이 붙도록 함

 

 

import React, { useState } from 'react';

const Name = () => {
  const [inputValue, setInputValue] = useState("");
  const [name, setName] = useState("");
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleNameChange = (e) => {
    const value = e.target.value;
    setInputValue(value);

    // input이 변경되면 name을 다시 원래 입력값으로 되돌린다
    setName(value);

    // 버튼 다시 활성화
    setIsSubmitted(false);
  };

  const handleOnClick = () => {
    if (isSubmitted) return;

    setName(inputValue + " 님"); // 화면에 보이는 값만 님 붙이기
    setIsSubmitted(true);        // 버튼 비활성화
  };

  return (
    <div>
      <p>{name}</p>
      <input 
        type="text"
        placeholder="이름을 입력하세요"
        value={inputValue}
        onChange={handleNameChange}
      />
      <button onClick={handleOnClick} disabled={isSubmitted}>
        SUBMIT
      </button>
    </div>
  );
};

export default Name;

 

 

- 이름을 입력한 후 SUBMIT버튼을 비활성화해 추가적으로 '님'이 붙지 않도록 함

- 새 입력값이 들어오면 다시 활성화

 

 

<결과화면>

 

 

+

다른 방법으로 풀이

 

 

import React, { useState } from 'react';

const Name2 = () => {
  const [name, setName] = useState("");

  const handleNameChange = (e) => {
    setName(e.target.value)
  };

  const [count, setCount] = useState(0)

  const handleOnClick = () => {
    setCount(count + 1)
    if(!(count>0)){
      if(name.includes("님")){
        setName(name + name.slice(name.length, -1).replaceAll("님", "") + "님")
      }else{
        setName(name + "님")
      }

    }
  };

  return (
    <div>
      <p>{name}</p>
      <input 
        type="text"
        placeholder="이름을 입력하세요"
        onChange={handleNameChange}
      />
      <button onClick={handleOnClick}>
        SUBMIT
      </button>
    </div>
  );
};

export default Name2;

 

 

<결과화면>

 

 

- 새로고침 없이 다른 이름 SUBMIT하는 경우 동작 오류

 

 

Name - useRef 사용

 

 

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

const Name3 = () => {
  const [name, setName] = useState("");

  const handleNameChange = (e) => {
    setName(e.target.value)
  }

  const nameRef = useRef() // 이름에 대한 입력값을 그대로 가지고 오고 싶을 때 사용
  const handleNameOnclick = () => {
    console.log(nameRef.current.innerText)
  }

  return (
    <div>
      <p ref={nameRef} >{name}</p> {/*p태그에 ref를 하나씩 심어 가져온다*/}
      <input 
        type="text"
        placeholder="이름을 입력하세요"
        onChange={handleNameChange}
      />
      <button onClick={handleNameOnclick}>
        SUBMIT
      </button>
    </div>
  );
};

export default Name3;

 

 

- useRef()를 사용

 

 

<결과화면>

 

 

- 이름에 대한 입력값을 화면에서 가져온다

-> 실제 DOM에서 텍스트를 가져오는 역할

 

=> 기존의 state에서 입력값을 가져오는 것과 다름

=>결과값은 동일하나 텍스트를 가져온 위치가 다르다

 

 

 

https://developernew.tistory.com/431

리액트 React 설치방법 feat. VS Code

 

https://developernew.tistory.com/436

React 리액트 - 상태(state)