[React+Typescript] Todos 앱만들기 화살표함수 주의

 

 

React와 Typescript로 Todos 앱만들기를 공부하던 중 오류 발생!

 

 

오류 코드

import { useRef, useState, useEffect } from 'react';
import { Todo } from './Type';
import './App.css';

import Editor from './components/Editor';
import TodoItem from './components/TodoItem';


function App() {

  const [todos, setTodos] = useState<Todo[]>([])


  const idRef = useRef(1)

  const onClickAdd = (text:string) => {
    setTodos([
      ...todos,
      {
        id : idRef.current++,
        content : text
      },
    ])
  }

useEffect(()=> {
  console.log(todos)
},[todos])

  return (
    <div className='App'>
      <h1>Todo</h1>
      <Editor onClickAdd = {onClickAdd}/>
      <div>
        {todos.map((todo)=> {
          <TodoItem key={todo.id} {...todo}/>
        })}
      </div>
    </div>
  );
}

export default App;

 

• map을 이용해 todos 리스트의 todo 항목들을 하나씩 TodoItem으로 Props 해주려는데 오류가 발생했다
• 눈 씻고 찾아봐도 다른 오류는 못찾겠어서 결국 GPT님께 찾아갔다

 

지선생님 답변

 

• 화살표 함수에 중괄호 { } 를 사용하면 명시적으로 return을 사용해야 한다
• return 을 사용하지 않으면 암묵적으로 undefined를 반환!
• return을 쓰기 싫다면 중괄호 { }  대신 괄호 ( )로 사용하면 된다!

 

 

수정된 코드

import { useRef, useState, useEffect } from 'react';
import { Todo } from './Type';
import './App.css';

import Editor from './components/Editor';
import TodoItem from './components/TodoItem';


function App() {

  const [todos, setTodos] = useState<Todo[]>([])


  const idRef = useRef(1)

  const onClickAdd = (text:string) => {
    setTodos([
      ...todos,
      {
        id : idRef.current++,
        content : text
      },
    ])
  }

useEffect(()=> {
  console.log(todos)
},[todos])

  return (
    <div className='App'>
      <h1>Todo</h1>
      <Editor onClickAdd = {onClickAdd}/>
      <div>
        {todos.map((todo)=> (
          <TodoItem key={todo.id} {...todo}/>
        ))}
      </div>
    </div>
  );
}

export default App;

 

 

결과

 

 

• 중괄호만 괄호로 수정했는데 바로 오류 해결!
• 화살표 함수 쓸 때 습관처럼 중괄호를 쓰는데 주의해야겠다!