useRef

const ref변수명 = useRef( initialValue );

useRef 적용하기

현재 Form.jsx 파일 안의 <input>에 연결된 changeInputDate에 의해 계속해서 렌더링되는 현상이 발생한다.

Form.jsx

import React, ( useContext } from 'react';
import  { TodoContext } from './TodoStore.js';

const Form = () => {
    const { addTodo, changeInputDate } = useContext(TodoContext);
    
    return (
        <>
            <form action="">
                <input type="text" name="" onChange={changeInputDate}/>
                <button onClick = {addTodo}>ADD</button>
            </form>
        </>
    );
}

useRef를 사용해서 컴포넌트 내에서 상태값을 유지하면서 DOM에 대한 직접적인 접근하도록 하여 좀 더 간단한 코드를 작성해보자.

Form.jsx

import React, ( useContext, useRef } from 'react';
import  { TodoContext } from './TodoStore.js';

const Form = () => {
    
    const inputRef = useRef(false);
    const { addTodo } = useContext(TodoContext);
    
    const addTodoData = (e) => {
        e.preventDefault();   // form 전송 방지
        addTodo(inputRef.current.value);
    }
    
    return (
        <>
            <form action="">
                <input type="text" ref={inputRef}/>
                <button onClick = {addTodoData}>ADD</button>
            </form>
        </>
    );
}

그다음 App.js에서 const [newTodo, setNewTodo] = useState();와 setNewTodo가 사용된 changeInputData 함수를 삭제하고 다음과 같이 수정한다.

App.js

. . .

export const TodoContext = React.createContext();

function App() {
    const [todos, setTodos] = useState([]);  // todos

    // Today
    const now = new Date();
    const dailyKey = Number(new Date(now.setDate(now.getDate()+1)).toISOString().substring(0,10).replace(/-/g,'')); // YYYYMMDD (number)
  
    const loading = useFetch(setTodos, `http://localhost:4000/initialtodos/${dailyKey}`);
  
    const addTodo = (newTodo) => { // addTodo : 새로운 todo를 배열에 추가하는 함수
    setTodos([...todos, {'todoCode': `${dailyKey}${todos.length + 1}`, 'date': dailyKey, 'title': newTodo, 'contents': '', done: false, edit: false}]);
  }
    
    . . .
}

export default App;