[2025 1학기 React.js 스터디] 이종민 #4주차

 

useRef 란 ?

 DOM 을 직접 선택해야 하는 상황에서 사용되는 Hook 함수입니다. 예시로 사용법을 써보겠습니다.

import React, { useState, useRef } from 'react';

우선 import에 useRef를 써준 뒤

const nameInput = useRef();

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

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

 

위 코드의 nameInput.current.focus(); 의 .current를 사용하여 .focus의 DOM API를 호출하겠다는 뜻입니다.

 

배열 랜더링

UserList 속 users라는 배열이 있습니다. 이를 렌더링 할때 배열이 고정적이라 하나하나 조회하며 렌더링해도 상관없겟지만, 동적인 배열을 렌더링하지 못합니다. 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야합니다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 지금의 경우엔 id 가 고유 값입니다. key 를 사용하게 되면 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하여 효율적이게 할 수 있습니다.

 

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

내부에서 배열을 직접 선언하는것이 아닌 부모 컴포넌트에서 선언하고 자식 컴포넌트에 props로 전달합니다. 

왼쪽 부모컴포넌트, 오른쪽 자식컴포넌트

useRef()를 사용해 nextId 라는 변수를 부모 컴포넌트에 만든 뒤 값을 수정 할때에는 .current 값을 수정하면 되고 조회 할 때에는 .current 를 조회하면 됩니다.

 

배열에 항목 추가하기

 

우선 input 두개와 항목을 추가하기 위한 등록 버튼이 있는 컴포넌트를 만들어줍니다. 배열에 변화를 줄때는 const이므로 불변성을 지켜줘야 합니다. 항목을 추가하는 방법은 두가지가 있습니다. spread 연산자를 사용하는 방법과 concat 함수를 사용하는 방법이 있습니다.

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

우선 useState를 사용해 입력값을 받아옵니다.

왼쪽은 spread 연산자를 쓴 방법이고 오른쪽은 concat함수를 사용한 방법이다

concat 함수 : 기존의 배열을 수정하지 않고, 새로운 원소가 추가된 새로운 배열을 만들어줍니다.

spread 연산자(...) : 배열을 복사해줍니다.

 

배열에 항목 제거하기

삭제버튼을 누르면 onClick이 된 id가 onRemove 함수로 실행된다.

const onRemove = id => {
    setUsers(users.filter(user => user.id !== id));
};

내장 배열 함수인 filter를 사용하는데 이 함수는 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만들어줍니다.

위처럼 onRemove함수를 적으면 배열에서 onRemove된 id가 삭제되므로 제거를 할 수 있다 ! (삭제는 좀 쉽군요 헤헤)

 

배열 항목 수정하기

const onToggle = id => {
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  };

id값을 비교한 뒤 다르다면 그대로 두고, 같다면 active값을 반전시킵니다. UserList 컴포넌트에서 onToggle를 받아와서 User 에게 전달해주고 배열항목제거를 할때와 같이 id를 받아와서 호출해줍니다.

onToggle로 인해 클릭을 하면 색이 바뀌는것을 알 수 있습니다 !!

 

마운트/언마운트

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출됩니다.

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부릅니다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하시면 되는데요, deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다.

제거하고 추가할 때마다 출력되는것을 볼 수 있습니다 !

 

이번에는 deps 에 특정 값을 넣어보도록 하겠습니다. deps 에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 됩니다. 그리고, deps 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 됩니다.

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]);

useEffect 안에서 사용하는 상태나, props 가 있다면, useEffect 의 deps 에 넣어주어야 합니다.

만약 useEffect 안에서 사용하는 상태나 props 를 deps 에 넣지 않게 된다면 useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않게 됩니다.