React 주말 #6

#6 침대에서 뒹글

useRef 로 특정 DOM 선택

자바스크립트에서는 우리가 특정 DOM을 선택해야할 때, getElementById, querySelector 같은 DOM selector 함수를 사용해야한다.

리액트에서 가끔식 DOM을 직접 선택해야 하는 상황이 올 수 있다.
이 때, 리액트에서 ref라는 것을 사용한다.

함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용한다.

클래스형 컴포넌트에서는 우리가 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용하는데 현재는 중요하지 않는다.

전에 만든 InputSample 초기화 버튼을 클릭했을 때 이름 input 에 포커스가 잡히도록 useRef 를 사용하여 기능을 구현하겠다!

InputSample.js

import React, { useState, useRef } 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; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // 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;

useRef() 를 사용하여 Ref 객체를 만들어주고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해야한다.

이 때, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르킨다.

위의 코드에서 onReset 함수에서 input에 포커스를 하는 focus( ) API를 호출해줬다.

nameInput.current.focus();

결과는...

초기화를 눌렀을 때, 이름 input 태그에 focus가 들어온다.

그리고

const refContainer = useRef(initialValue);

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다.

배열 렌더링하기

이번에는 리액트에서 객체가 아닌 배열을 렌더링하는 방법을 알아보겠다.

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'
  }
];

이렇게 배열이 존재한다고 가정해보자!

어떻게하면은 이 배열을 컴포넌트로 렌더링할 수 있을까?
그냥 코드 그대로 작성을 하면되는데, 우리는 src 폴더에 UserList라는 파일을 생성해서 다음과 같이 컴포넌트를 생성한다.

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[1].email})</span>
      </div>
    </div>
  );
}

export default UserList;

위에처럼 코드를 작성해봤는데, 다시 사용하는 코드를 일일히 넣는건 비효율적이라 컴포넌트를 재사용 할 수 있도록 새로 만들어보겠다.

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;

이제 컴포넌트를 App 파일에서 렌더링해보겠다.

App.js

import React from 'react';
import UserList from './UserList';

function App() {
  return (
    <UserList />
  );
}

export default App;

결과는...

만약 배열이 100개 이상이면 하나하나 조회해가면서 렌더링하는 방법은 비효율적이라 이럴 때, 자바스크립트 배열의 내장함수인 map( )을 사용하면된다.

map() 함수는 배열안에 있는 각 요소를 변환하여 새로운 배열을 만들어준다.

리액트에서는 동적인 배열을 렌더링을 할 때는 map 함수를 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 바꿔준다.

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>
      {users.map(user => (
        <User user={user} />
      ))}
    </div>
  );
}

export default UserList;

이렇게 작성하면 일일히 각 배열의 요소를 반복해가면서 쓰는게 아니라 한 번만 map 함수를 쓰면 모든 요소가 렌더링된다.

하지만 브라우저의 콘솔로 가보면 특정 에러가 보일 것 이다.

리액트에서는 배열을 렌더링할 때, key라는 props를 설정해줘야한다.
key 값은 각 요소들의 고유값을 설정해야 해서 위의 같은 경우에는 id가 고유 값이다.

key prop을 추가하면...

UserList.js

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

만약에 배열안에 고유값이 없다면, map 함수를 사용할 때 설정하는 콜백함수의 두 번째 파라미터인 index를 key로 설정해둬된다.

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

여기서 정리하자면...

map 함수에서 key가 필요한 이유는

• Map에 key 값이없다면 중간의 값이 바뀌었을때 그 하위 값들이 전부 변하기 때문인다. key값을 사용한다면 key를 이용해 중간의 값을 추가하게 된다.

참고 : 벨로퍼트와 함께하는 모던 리액트

느낀점 :

• 오늘은 useRef와 배열을 렌더링에 대해 알아보는 시간을 가졌습니다.
• map 함수는 배열를 새롭게 리턴하기 때문에, 리액트에서 많이 사용되고 있고, useRef는 아직 헷갈리는 부분이 있을 수 있어서 다시 공부해야겠다.