react.vlpt.us를 읽고 공부한 내용입니다.

useRef

JavaScript에서는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.

엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있습니다.

이럴 때 리액트에서 ref 라는 것을 사용합니다.

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 을 가리키게 됩니다.

배열 렌더링

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;

배열 렌더링에는 Key값이 필요하다. Key가 없는 경우 동적인 배열을 다시 렌더링할 때 비용효율이 떨어진다.
모든 배열을 다시 렌더링 해야 하기 때문이다. 고유값을 지닌 Key가 있다면 동적인 배열의 변경된 부분만 효율적으로 렌더링할 수 있다.
항목 추가
항목 제거
항목 수정

useEffect

용어

마운트 : 처음 나타남
언마운트 : 사라짐

useEffect 구조

함수
첫번째 인자는 함수, 두번째 인자는 배열(주로 deps 라고 칭한다.)이 들어간다.

cleanup 함수

useEffect 안에서 return 할 때 실행된다.
useEffcet의 뒷정리를 한다. -> state에서 값 지울때 실행됨

deps

deps 에 특정값을 넣게 되면, 컴퍼넌트가 마운트 될 때, 지정한 값이 업데이트 될 때 useEffect 실행된다.
deps에 값이 없다면 useEffect가 최신 값을 가리키지 않게 된다.
deps에 값이 없다면 컴포넌트가 리렌더링 될 때마다 호출이 된다.
deps에 값을 넣는것을 기본이라고 생각하는게 좋다.