🔫 React_04 useRef

🎮 useRef로 특정 DOM 선택하기

• JavaScript에서 특정 DOM을 선택해야 할 경우 getElemnetById, querySelector와 같은 DOM Selector 함수를 사용하여 DOM을 선택
• 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야하는 상황이 발생할 수 있다.
  => ref 사용

🎲 ref

• ref를 사용할 때 useRef Hook 함수 사용
• InputSample에서 초기화 버튼을 누르면 포커스가 초기화 버튼에 남아있다.
  => 초기화 버튼을 클릭했을 때 이름 imput에 포커스가 잡히도록 구현
  
  
• useRef를 사용해서 Ref 객체 생성
  => 선택하고 싶은 DOM에 ref 값으로 설정
  => onReset 함수에서 input에 포커스하는 focus() DOM API 호출

// InputSample.js
import React, { useRef, useState } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });
  const nameInput = useRef();

  const { name, nickname } = inputs;

  const onChange = (e) => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

🎲 배열로 랜더링

• 먼저, 그대로 코드 작성해보기

// UserList.js
import React from "react";

function UserList() {
  const users = [
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com",
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com",
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com",
    },
  ];
  return (
    <div>
      <div>
        <b>{users[0].username}</b> <span>({users[0].email})</span>
      </div>
      <div>
        <b>{users[1].username}</b> <span>({users[1].email})</span>
      </div>
      <div>
        <b>{users[2].username}</b> <span>({users[2].email})</span>
      </div>
    </div>
  );
}

export default UserList;

• 컴포넌트 재사용을 위한 리팩토링
  => 한 파일에 여러 개의 컴포넌트를 선언할 수 있다.

// UserList.js
import React from "react";

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com",
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com",
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com",
    },
  ];

  return (
    <div>
      <User user={users[0]} />
      <User user={users[1]} />
      <User user={users[2]} />
    </div>
  );
}

export default UserList;

• 동적인 배열을 렌더링해야할 때 map() 사용
  • map() : 배열 안에 있는 각 원소를 변환하여 새로운 배열을 반환
    => 리액트에서 동적인 배열을 렌더링할 때 map()을 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환

// UserList.js
import React from "react";

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com",
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com",
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com",
    },
  ];

  return (
    <div>
      {users.map((user) => (
        <User user={user} />
      ))}
    </div>
  );
}

export default UserList;

• 리액트에서 배열을 렌더링할 때 key라는 props를 설정하지 않으면 에러 발생
  => key 값은 각 원소들마다 가지고 있는 고유값으로 설정 : 지금은 id가 고유 값

return (
  <div>
    {users.map((user) => (
      <User user={user} key={user.id} />
    ))}
  </div>
);

• 배열 안의 원소가 가지고 있는 고유한 값이 없는 경우, map()은 콜백함수의 두 번째 파라미터 index를 key로 사용할 수 있다.

return (
  <div>
    {users.map((user, index) => (
      <User user={user} key={index} />
    ))}
  </div>
);

🎲 useRef로 컴포넌트 안의 변수 만들기

• useRef Hook은 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리 할 수 있다.
  => useRef로 관리하는 변수는 설정 후 바로 조회 가능
  (리액트 컴포넌트에서 상태는 상태를 바꾸는 함수를 호출 후, 렌더링한 다음 업데이트 된 상태를 조회할 수 있다.)

• useRef로 관리하는 변수를 사용하여 다음과 같은 값을 관리 할 수 있다.

  • setTimeout, setInterval을 통해 생성된 id
  • 외부 라이브러리를 사용하여 생성된 인스턴스
  • scroll 위치

import { useRef } from "react";

const refContariner = useRef(초기값);

refContariner.current += 1; // 값 수정
refContariner.current; // 값 불러오기

• useRef에 저장된 값에 접근하기 위해 .current를 사용
  => useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자!

• useRef는 어떤 가변값을 유지하는데 유용
  => useRef로 관리하는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다.
  (useState는 값이 변경될 때마다 리렌더링이 일어난다.)

• 예제 코드

// useState 부분 주석처리 하면서
// const, useRef, useState 비교해보기
import { useRef, useState } from "react";

export default function Example() {
  let count1 = 0;
  const count2 = useRef(0);
  const [count3, setCount3] = useState(0);

  const Check = () => {
    count1 += 1;
    console.log(`count1 : ${count1}`);
    count2.current += 1;
    console.log(`count2 : ${count2}`);
    setCount3(count3 + 1);
  };

  return (
    <>
      <h2>예제</h2>
      <p>count1 : {count1}</p>
      <p>count2 : {count2.current}</p>
      <p>count3 : {count3}</p>
      <button onClick={Check}>check</button>
    </>
  );
}

1. const와 useRef
   

• check 버튼을 클릭하면 각각의 값에 1씩 추가하는 함수를 넣어 상태 확인
• check 버튼을 클릭했을 때 콘솔창에서 const 값이 변하는 것, useRef는 object를 리턴하는 것을 확인

2. const와 useRef 확인을 위한 리렌더링
   

• 리렌더링을 위해 버튼을 눌러 값을 변경한 후, 코드 수정 후 저장
  => 리렌더링이 되면서 const 값은 0으로 초기화, useRef값은 리렌더링 전 저장되었던 값이 나타나게 된다.

3. const, useRef 그리고 useState
   

• useState는 값이 변경될 때마다 리렌더링이 일어난다.
  => useState으로 인해 리렌더링이 일어나면서 useRef 값도 함께 변경되지만 const값은 초기화가 되어 1만 출력된다.

추가적으로 공부할 부분

• useState의 비동기적 값 할당

참고

• 벨로퍼트와 함께하는 모던 리액트
• useRef