[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 23회차 미션 - 30강 React useRef로 컴포넌트 안의 변수 만들기, 배열에 항목 추가하기

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

컴포넌트가 리랜더링 될때마다 계속 기억해야하는 어떠한 값을 관리할때도 사용할 수 있다.
주로 아래와 같은 상황들이 기억해야하는 상황이다.

useRef로 관리 하는 값은 컴포넌트가 리랜더링 되더라도 값이 바뀌지 않는다는 것을 알아두어야 한다.
자 먼저 이전시간에 만들었던 UserList.js를 조금 수정해보자.

UserList.js

import React from 'react';

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

function UserList({ users }){
    
    return(
        <div>
            {
                users.map(
                    user => (<User user={user} key={user.id}/>) //각 객체마다 가지고 있는 고유값을 설정해주어야 함. key
                )
            }
        </div>
    )
}

export default UserList;

위와 같이 바꿔준다. 기존에 있었던 배열 users를 잘라내서 App.js로 옮겨 붙이고 UserList 함수 안에서는 파라미터 값으로 users를 받아오게 설정해준다.

App.js

import React, { useRef } from 'react';
import UserList from './UserList';

function App() {
  const users = [
    {
        id: 1,
        username: 'bmyu',
        email: 'bomee88@naver.com'
    },
    {
        id: 2,
        username: 'tester',
        email: 'tester@example.com'
    },
    {
        id: 3,
        username: 'sample',
        email: 'sample@example.com'
    }
  ];

  const nextId = useRef(4);

  const onCreate = () => {
    console.log(nextId.current); // 4
    nextId.current += 1;
  }

  return(
    <UserList users={users}/>
  )
}

export default App;

위와 같이 App.js에 users를 붙여넣고 return에서 UserList 컴포넌트에 users={users}로 보내준다. 저장하고 새로고침 해보면 기존 그대로 잘 나온다. 그 다음 nextId를 추가하고 onCreate라는 함수를 하나 더 만들어준다. 여기서 우리가 기억해야 할 것은 useRef를 DOM에서 ref로 불러서 쓰는 것 말고도 이런식으로 변수를 기억하고 싶을때도 쓴다. 또 useRef로 관리해준 이유는 nextId가 바뀐다고 해서 컴포넌트가 리랜더링이 될 필요가 없기 때문이다. 아무튼 이러한 용도로도 useRef를 쓴다는 걸 알아두고 넘어가자.

배열에 항목 추가하기

배열에 항목을 추가하는 퍼포먼스를 만들기 위해서 아래와 같이 코드를 추가해보자.
먼저 CreateUser.js를 하나 더 만든다.

CreateUser.js

import React from 'react';

function CreateUser({ username, email, onChange, onCreate }){
    return(
        <div>
            <input 
                name="username"
                placeholder="계정명"
                onChange={onChange}
                value={username}
            />
            <input
                name="email"
                placeholder="이메일"
                onChange={onChange}
                value={email}
            />
            <button onClick={onCreate}>등록</button>
        </div>
    );
}

export default CreateUser;

그리고 App.js에 CreateUser 컴포넌트를 등록시켜주고 useState를 활용해 아래와 같이 수정해보도록 하자.

App.js

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: '',
  })
  const { username, email } = inputs;
  const onChange = e =>{
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  }
  const [users, setUsers] = useState([
    {
        id: 1,
        username: 'bmyu',
        email: 'bomee88@naver.com'
    },
    {
        id: 2,
        username: 'tester',
        email: 'tester@example.com'
    },
    {
        id: 3,
        username: 'sample',
        email: 'sample@example.com'
    }
  ]);

  const nextId = useRef(4);

  const onCreate = () => {
    setInputs({
      username: '',
      email:''
    })
    console.log(nextId.current); // 4
    nextId.current += 1;
  }

  return(
    <>
      <CreateUser 
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users}/>
    </>
  )
}

export default App;

이렇게까지 수정하고 나면 아래와 같은 화면으로 보여질 것이다.
그러나 아직 인풋창에 써넣고 등록을 눌러도 추가되진 않는다. 이제 배열에 새로운 유저를 등록할 수 있는 코드를 만들어보도록 하자. 참고로 push, splice, sort같은 함수는 사용해주면 안된다. 기존의 배열을 한번 복사해놓고 사용해야 기존 배열의 불변성을 지킬 수 있기때문에 스프레드 연산자를 활용하여 올바른 방법으로 항목을 추가해보자.

App.js에서 onCreate부분만 바꿔보자

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email,
    };
    setUsers([...users, user]); // 스프레드 연산자 활용
    setInputs({
      username: '',
      email:''
    })
    console.log(nextId.current); 
    nextId.current += 1;
  }

user의 값을 받아와서 스프레드 연산자를 활용하여 setUser로 보내고 setInput을 초기화한다.
지금은 …인 스프레드 연산자를 활용했지만 concat 함수를 사용할수도 있다.

 const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email,
    };
    setUsers(users.concat(user)); //concat 함수 활용
    setInputs({
      username: '',
      email:''
    })
    console.log(nextId.current); 
    nextId.current += 1;
  }

이렇게 하고 한번 실행해보자. 아래와 같이 새로운 유저가 잘 등록되고, 아이디값도 하나씩 증가하며 잘 올라가는 것을 볼 수있다.
오늘은 여기까지..
시청 영상 30강 13~14까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp