[React] Day 15 - useRef로 컴포넌트 안의 변수를 만들어 배열에 항목 추가하기

📌저번시간에 useRef를 배울때 컴포넌트에서 특정 DOM을 선택해야할 때, ref를 사용한다고 했다. 그 이외에도 ref의 사용법은 있다. 바로, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것이다.

App.js 변경

import React from 'react';

import UserList from './qoffhvjxm/UserList';

function App() {

  const users = [

    {

      id: 1,

      username: 'dndhk',

      email: 'dndhk@gmail.com'

    }, {

      id: 2,

      username: 'Lee',

      email: 'Lee@gmail.com'

    }, {

      id: 3,

      username: 'dada',

      email: 'dada@gmail.com'

    }

  ];

  return (

    <UserList users={users}></UserList>    

  );

}

export default App;

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}></User>

      ))}

    </div>

  );

}

export default UserList;

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

APP.js 변경

import React, {useRef} from 'react';

import UserList from './qoffhvjxm/UserList';

function App() {

  const users = [

    {

      id: 1,

      username: 'dndhk',

      email: 'dndhk@gmail.com'

    }, {

      id: 2,

      username: 'Lee',

      email: 'Lee@gmail.com'

    }, {

      id: 3,

      username: 'dada',

      email: 'dada@gmail.com'

    }

  ];

  const nextId = useRef(4);

  const onCreate = () => {

    // 나중에 사용할 함수 내용 넣어주기

    nextId.current += 1;

  };

  return (

    <UserList users={users}></UserList>    

  );

}

export default App;

 

 

➡️배열에 항목 추가하기

 

CreateUser.js 추가

import React from 'react';

function CreateUser({onChange, username, onCreate, email}) {

  return (

    <div>

      <input

        name="username"

        placeholder="계정명"

        onChange={onChange}

        value={username}>

      </input>

      <input

        name="email"

        placeholder="이메일"

        onChange={onChange}

        value={email}>

      </input>

      <button onClick={onCreate}> 등록 </button>

    </div>

  );

}

export default CreateUser;

중간결과사진

 

➡️우선 버튼을 등록 버튼을 눌렀을때 input 값에 적었던 값이 잘 사라지게 한다.

    ➕Input 값과, users 값을 useState를 사용하여 컴포넌트의 상태로서 관리하기

 

APP.js 변경

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

import UserList from './qoffhvjxm/UserList';

import CreateUser from './qoffhvjxm/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: 'dndhk',

      email: 'dndhk@gmail.com'

    }, {

      id: 2,

      username: 'Lee',

      email: 'Lee@gmail.com '

    }, {

      id: 3,

      username: 'dada',

      email: 'dada@gmail.com'

    }

  ]);

  const nextId = useRef(4);

  const onCreate = () => {

    // 나중에 사용할 함수 내용 넣어주기

    //

    setInputs({

      username: '',

      email: ''

    });

    //

    nextId.current += 1;

  };

  return (

    <>

      <CreateUser

        username={username}

        email={email}

        onChange={onChange}

        onCreate={onCreate}

      ></CreateUser>

      <UserList users={users}></UserList>

    </>

  );

}

export default App;

//

//

사이에 있는 부분이 내용이 추가된 내용이다.

 

➡️불변성을 지키면서 배열에 새 항목을 추가하기

 

📌spread 연산자

이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있다. 

const cat = {
  name: '고양이'
};

const cuteCat = {
  name: '고양이',
  attribute: 'cute'
};

❓이렇게 특성을 설명을 했지만, spread 연산자를 사용하면 간결해질 수 있다.

const cat = {
  name: '고양이'
};

const cuteCat = {
  ...cat,
  attribute: 'cute'
};

❓이런식으로 원래 있던 요소는 적지 않고 원래 있던 객체에 특성을 더해서 새로운 객체를 만들 수 있다.

 

APP.js 변경

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

import UserList from './qoffhvjxm/UserList';

import CreateUser from './qoffhvjxm/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: 'dndhk',

      email: 'dndhk@gmail.com'

    }, {

      id: 2,

      username: 'Lee',

      email: 'Lee@gmail.com '

    }, {

      id: 3,

      username: 'dada',

      email: 'dada@gmail.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}

      ></CreateUser>

      <UserList users={users}></UserList>

    </>

  );

}

export default App;

//

//

사이에 있는 부분이 내용이 추가된 내용이다.

결과사진