React의 useRef 와 JavaScript의 객체 구조 분해 할당

💬 목차

• React의 useRef
  • input 객체에 포커스를 거는 예제
• React의 useState와 useRef의 차이점
  • export JS
  • 렌더링 js
• 객체 구조분해 할당
• 기출 변형!
• 💡 TIPS!
  • setInterval와 setTimeout의 차이점
  • setTimeout
  • setInterval

 

 

 

React의 useRef

 

• .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환함
• 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook
• JavaScript의 querySelector 역할을 함

Ref
reference, 즉 참조

 

 

---

 

 

input 객체에 포커스를 거는 예제

 

  

    
    
    
    
  
import { useRef, useEffect } from "react";
import "./styles.css";

function App() {
	const inputRef = useRef();

	function focus() {
		inputRef.current.focus();
	}

	return (
		<div>
			<input ref={inputRef} type="text" placeholder="아이디 또는 이메일" />
			<button>Login</button>
			<br />
			<button onClick={focus}>focus</button>
		</div>
	);
}

export default App;

 

포커스 버튼을 클릭하면 focuse 함수가 실행되며,

useRef()를 이용해 ref가 inputRef인 input 태그에 포커스를 맞춰줌!

 

 

 

 

---

 

 

 

 

 

 

React의 useState와 useRef의 차이점

 

export JS

※ upVar() 함수가 실행되어도 다시 호출하면 varCount=0 으로 계속 초기화되기 때문에 실질적으로 값이 올라가지 않는다.

 

구분	설명
const [변수명, set변수명] = useState(기본값)	getter와 setter을 세팅한 뒤 useState에 기본값을 설정해줄 수 있다. set 할 경우 자동으로 렌더링이 된다
useRef(기본값)	값은 변하지만 렌더링은 되지 않는다

  

    
    
    
    
  
import { useState, useRef } from "react";

function App() {
	const [stateCount, setStateCount] = useState(0);
	const refCount = useRef(0);
	let varCount = 0;

	function upState() {
		setStateCount(stateCount + 1);
	}

	function upRef() {
		++refCount.current;
	}

	function upVar() {
		++varCount;
	}

	return (
		<div>
			<div>stateCount : {stateCount} </div>
			<div>refCount : {refCount.current} </div>
			<div>varCount : {varCount} </div>
			<br />
			<button onClick={upState}>state up</button>
			<button onClick={upRef}>ref up</button>
			<button onClick={upVar}>var up</button>
		</div>
	);
}

export default App;

 

 

---

 

 

렌더링 js

  

    
    
    
    
  
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
	<StrictMode>
		<App />
	</StrictMode>
);

 

 

 

 

---

 

 

 

 

객체 구조분해 할당

const {변수명} = 

변수를 {}에 담는 이유가 뭘까!?

 

  

    
    
    
    
  
const {ds} = useStores();
const {parentRef} = props;

위와 같은 코드를 확인하고 의문이 생겨 찾아봄!!

 

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이라고 한다.

 

 

아래에서 예를 들어 해석하자면,

 

오브젝트 구조

  

    
    
    
    
  
let object ={
	a : "aaaa"
};
// const a = object.a; 
const {a} = object;

 

arr(배열) 구조

  

    
    
    
    
  
var x = [1, 2, 3, 4, 5];

var [y, z] = x;

console.log(y); // 1
console.log(z); // 2

 

 

 

---

 

 

 

기출 변형!

 

선언에서 분리한 할당

  

    
    
    
    
  
var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

 

 

기본값

기본값 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용합니다.

  

    
    
    
    
  
var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

 

 

변수 값 교환하기

  

    
    
    
    
  
var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

 

 

 

일부 반환 값 무시하기

  

    
    
    
    
  
function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

 

 

변수에 배열의 나머지를 할당하기

  

    
    
    
    
  
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

 

 

선언 없는 할당

  

    
    
    
    
  
var a, b;

({a, b} = {a: 1, b: 2});

 

 

 

 

---

 

 

 

 

 

💡 TIPS!

 

setInterval와 setTimeout의 차이점

구분	설명
setTimeout()	어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우 사용
setInterval()	웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 사용

 

 

---

 

 

setTimeout

  

    
    
    
    
  
function add(x, y) {
  console.log(x + y);
}
setTimeout(add, 2000, 3, 4); // 2초 후 7 출력

 

첫 번째 인자는 실행 시킬 함수를 받는다.

두 번째 인자는 지연 시간(ms)를 받는다.

세 번째 부터는 첫 번째 인자로 넘어온 함수가 인자를 받는 경우, 이 함수에 넘겨줄 값을 명시한다.

 

 

setTimeOut 함수는 타임아웃 아이디(Timeout ID)를 반환하는데, 이 타임아웃 아이디는 내부적으로 생성되는 타이머 객체를 가리키고 있다.

clearTimeout 함수에 타임아웃 아이디를 인수로 주어 타임아웃을 취소할 수 있다.

 

  

    
    
    
    
  
const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);
clearTimeout(timeoutId);

 

 

 

---

 

 

setInterval

어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용

 

  

    
    
    
    
  
setInterval(() => console.log(Math.floor(Math.random() * 10)), 2000);

//3
//2
//8
//...

위 예제의 경우 2초마다 랜덤한 수를 출력한다.

 

 

setInterval 함수도 인터벌 아이디(Interval ID)를 반환하는데, 이 아이디 역시 내부적으로 생성되는 타이머 객체를 가리키고 있다.

clearInterval 함수에 인터벌 아이디를 인수로 주어 반복되는 함수를 취소할 수 있다.

 

  

    
    
    
    
  
const intervalId = setInterval(() => console.log(count++), 2000);
//1
//2
//3
clearInterval(intervalId);

 

 

 

 

 

 

 

---

참고사이트

const {} = props es6 문법 구조분해할당(Destructuring assignment)이란

web docs

[React] useRef란?

자바스크립트의 setTimeout()과 setInterval() 함수