React_입문_3

* useRef로 특정 DOM 선택하기

- 특정 엘리먼트의 크기를 가져오든지, 스크롤바 위치 설정, 포커스 설정 등의 다양한 상황에서 DOM을 직접 선택해야하는 상황이 발생합니다.

- 이때 필요한것이 ref를 사용합니다.

- 함수형 컴포넌트에서 ref 사용시 useRef HOOK 함수를 사용

- reset 버튼을 클릭할 경우 input 에 focus가 맞춰지도록 ref를 사용하였습니다.

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;

 

* 배열 렌더링하기

- 리액트에서 배열을 렌더링 할 경우 key라는 props를 설정해야합니다.

- key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다.

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} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;

 

* useRef 컴포넌트 안의 변수생성

- Hook 은 DOM 선택용도 외에도, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 기능이 있습니다.

- useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않습니다.

- React 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있지만 useRef로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다.