13. 배열에 항목 추가하기 with 복습

출처 - 벨로퍼트

https://react.vlpt.us/basic/13-array-insert.html

 

이제까지 공부한 것을 복습하며 다시금 코드를 읽어보자.

 

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;

• props를 통해 컴포넌트에 값 전달 (5. props 를 통해 컴포넌트에게 값 전달하기)

 

UserList.js

import React from 'react';

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

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

export default UserList;

map 함수

• map 함수(배열 내장함수)를 사용할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용

• 전달받은 파라미터로 값을 변경
  • users 객체가 담긴 배열이 user, key로 이루어진 <User>가 담긴 배열로 변경됨

 

key 가 있어야만 하는 이유는 배열이 업데이트 될 때 효율적으로 렌더링하기 위함

 

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: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;

 

 

👇 하나씩 뜯어보기

const [inputs, setInputs] = useState({
  username: '',
  email: ''
});
const { username, email } = inputs;

• useState : 바뀌는 값을 관리하기 위한 목적 배열 비구조화 할당을 통해 값을 입력해준다
  • 첫번째 원소 : 현재 상태
  • 두번째 원소 : setter 함수

• 이 코드에서 각각 변수의 역할
  • inputs : input태그에 입력되는 value값을 관리하기 위한 객체
  • setInputs : value 값을 설정해주는 함수

• 객체 비구조화 할당을 통해 inputs 이라는 변수에 객체를 넣어준다

 

const onChange = e => {
  const { name, value } = e.target;
  setInputs({
    ...inputs,
    [name]: value
  });
};

• onChange 라는 이름으로 함수 선언
  • e : 이벤드 객체
  • e.target : 이벤트의 DOM 객체
    • 위 코드에 따르면, input 필드에 값을 입력하여 onChange 이벤트가 발생할 때 onChange 함수가 호출되어 e.target = <input name="username" placeholder="계정명" value="계정이름"> 이 된다. 따라서, 객체 비구조화 할당을 통해 name = “username” value = “input에 입력한 텍스트” 가 대입된다.

• setInputs : 위에 useState에서 선언한 setter함수
  • ...inputs : spread 문법을 사용하여 기존 객체의 내용을 복사
  • [name] : value : “username” : “input에 입력한 텍스트” 가 된다.
  • ...inputs 로 기존 객체 내용을 복사하고 [name] : value 에 의해 username의 값이 변경된다.

  {
  	username : 'input에 입력한 텍스트',
      email: ''
  }

 

const [users, setUsers] = useState([
    {
      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'
    }
  ]);

• 이 코드에서 각각 변수의 역할
  • users : input태그로 입력된 user 객체를 배열로 관리
  • setUsers : user객체로 이루어진 list를 설정하는 함수

const nextId = useRef(4);
const onCreate = () => {
  const user = {
    id: nextId.current,
    username,
    email
  };
  setUsers([...users, user]);

  setInputs({
    username: '',
    email: ''
  });
  nextId.current += 1;
};

• useRef : DOM을 선택하는 것과 같은 의미 useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다.

• onCreate 라는 이름으로 함수 선언
  • user 객체에 id에 현재 id값을 넣고 username, email은 단축 프로퍼티 문법 (단축 프로퍼티) 을 활용하여 변수를 받아온다.

• setUsers 로 배열에 user를 추가해준다.

• setInputs 으로 input 필드의 입력 값을 관리하는 useState의 값을 초기화해준다.
• nextId.current += 1 로 아이디 관리를 해준다.