리액트의 useRef를 활용한 id값 지정

저번 포스트에서 배열을 출력하는 법에 대해서 작성했다. 하지만 각 항목에 고유한 id값을 지정하는 것을 빼서 추가적으로 설명하겠다.

useRef를 이용한 변수 지정

배열에 id값을 주는 법은 간단하게 지역변수를 만들어 데이터를 줄수 있다. 하지만 리액트 특성상 리렌더링이 실시되면 지역변수는 초기화가 된다.

function App() {
  const [render, setRender] =useState(false);
	const i = 1;
	console.log(i);
	const increase = () => {
    	i++;
	  	console.log(i);
  		};
  	const rerender = () => {
    	setRender(!render)
  		};
  return (
    <div>
      <button onClick={increase}>up</button>
      <button onClick={rerender}>rerender</button>
      <b>{i}</b>
    </div>
  );
};

이러한 코드는 버튼을 누르면 변수 i의 값은 오르지만 출력값은 바뀌지 않는다. 그리고 App.js가 리렌더링 되면 다시 변수 i의 값은 1이 된다.

하지만 useRef를 사용하면 리렌더링이 되어도 저장된 데이터를 사용할 수 있다.

function App() {
  const [render, setRender] =useState(false);
	const i = useRef(1);
	console.log(i);
	const increase = () => {
    	i.current++;
	  	console.log(i);
  		};
  	const rerender = () => {
    	setRender(!render)
  		};
  return (
    <div>
      <button onClick={increase}>up</button>
      <button onClick={rerender}>rerender</button>
      <b>{i.current}</b>
    </div>
  );
};

현재 만드는 프로젝트에서 input의 값을 useState로 관리하기때문에 input에 문자열을 기록할때마다 리렌더링이 일어난다. todoitem에 id값을 계속해서 넣는다고 했을때 id값이 계속 초기화된다면 배열을 출력하는 것에도 문제가 생긴다.

useRef 사용법

useRef의 사용법은 간단하다

1.useRef import 하기

import { useRef } from 'reaact';

2.useRef로 변수 지정

const i = useRef(1);

3.useRef 값 가져오기 및 수정

i.current++;
/*useRef의 값은 "변수명.current"로 가져오기 및 수정이 가능하다.

프로젝트에 적용

useRef를 todolist에 적용해서 아이템마다 id를 지정해 주겠다.

function TodoInput({inputValue, setInputValue, todoList, setTodoList, nextId}){
    const onChange = (e) => {
      setInputValue(e.target.value);
    };
    const addItem = ()=>{
      if(inputValue === ''){
        alert('한글자 이상 입력해 주세요.');
      } else{
      const todos = {
        id: nextId.current,
        inputValue
      };
      const addList = [...todoList,todos];
      setTodoList(addList);
      nextId.current += 1;
      setInputValue('');
    };
  };
  return(
     <div className='input'>
        <input name='text' type='text' placeholder='해야할일' onChange={onChange} value={inputValue}></input>
        <button onClick={addItem}>입력</button>
    </div>  
  );
};
export default TodoInput;

우선 useRef의 값은 메인 페이지인 Home.js에서 props.nextId로 넘겨주었다. 각 아이템의 데이터로 inputValue와 id값으로 nextId를 주었고 아이템이 추가될때마다 nextId의 값이 1올라가도록 설정하였다.

마무리

이제 배열을 렌더링하는 것까지 완성되었다. 이제 새로운 일을 추가하고 삭제하는 배열 수정을 해보겠다. 배열 수정하는 방법과 리액트의 렌더링하는 순서를 같이 포스팅해볼까 한다. 원래는 한개의 포스트에 담으려했지만 너무 길어지는 관계로 여기서 끝내보겠다~!