React.useRef()

elinapark·2021년 12월 12일
0

useRef

컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리할 때 사용할 수 있다.
useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링되지 않는다.

새로운 아이디의 값을 4부터 시작하는 useRef을 작성해보았다.

const [ids, SetIds] = useState([
	{ id : 1,
      name : first,
      age : 20,
    },
    { id : 2,
      name : second,
      age : 22
    },
    { id : 3,
      name : third,
      age : 23
    },
    ])
    
const nextId = useRef(4)

예제를 통해 useRef 활용하기

예제를 통해 input 을 통해 입력되는 데이터를 등록, 삭제, 수정 및 업데이트할 수 있는 기능을 구현하였습니다.
부제로 나이에 해당하는 숫자를 클릭하면 스타일이 변하는 토글이벤트를 추가하였습니다.

App.js

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

function App() {

  const [inputs, setInputs] = useState({
    id: "",
    name: "",
    age: "",
  });

  // 비구조화 할당?
  const { id, name, age, } = inputs;

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

  const [users, setUsers] = useState([
    { id : 1,
      name : first,
      age : 20,
    },
    { id : 2,
      name : second,
      age : 22
    },
    { id : 3,
      name : third,
      age : 23
    },
  ]);

  const nextId = useRef(4);

  const onCreate = () => {
    const newUser = {
      id: nextId.current,
      name,
      age,
    };

    setUsers([newUser, ...users]);
    // concat으로도 할 수 있다.
    // setUsers(user.concat(newUser))

    setInputs({
      name: "",
      age: "",
    });
    
    nextId.current += 1;
  };

  const onRemove = (id) => {
    // user.id 인 값을 빼고 나머지 값을 불러오게 하면 삭제기능 완성
    setUsers(users.filter((user) => user.id !== id));
  };

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

  const onModify = (user) => {
    setInputs({
      name: user.name,
      age: user.age,
      id: user.id,
    });
  };

  const onUpdate = () => {
    setUsers(
      users.map((user) =>
        user.id === id
          ? { ...user, name: name, age: age }
          : user
      )
    );

    setInputs({
      name: "",
      age: "",
      id: "",
    });
  };

  return (
    <div>
      <CreateUser
        name={name || ""}
        age={age || ""}
        onChange={onChange}
        onCreate={onCreate}
        onUpdate={onUpdate}
      />
      
      <UserList
        users={users}
        onRemove={onRemove}
        onToggle={onToggle}
        onModify={onModify}
      />
    </div>
  );
}

export default App;

CreateUser.js

import React from "react";

function CreateUser({ name, age, onChange, onCreate, onUpdate }) {
  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
      />
      <input
        age="age"
        placeholder="나이"
        onChange={onChange}
        value={age}
      />
      <button onClick={onCreate}>등록</button>
      <button onClick={onUpdate}>수정완료</button>
    </div>
  );
}

export default CreateUser;

User 함수와 UserList.js

import React from "react";

function User({ user, onRemove, onToggle, onModify }) {

  return (
    <div>
      <span>{user.name}</span>
      
      <b
        style={{
          cursor: "pointer",
          color: user.active ? "red" : "black",
          fontSize: user.active ? "2em" : "1em",
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.age}
      </b>
      
      <button 
      	onClick={() => onRemove(user.id)}
        >삭제</button>
      <button 
      	onClick={() => onModify(user)}
        >수정</button>
    </div>
  );
}

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

export default UserList;
profile
틀린 내용이나, 개선해야 할 사항을 발견하신다면 댓글로 편하게 남겨주세요. 감사합니다.🙇

0개의 댓글