리액트 투두리스트 만들기 (2-1편) : 투두리스트 렌더링하기

 

 

안녕하세요~ 

보니까 이부분 포스팅을 안한것같아서 갑자기 씁니다 !! 

 

 

todos 데이터를 state로 만들어서 갖고있는데요 이를 화면상에 보이도록 만들어줍시다 ! 

 

 

function App() {
   
  const [todos, setTodos] = useState(mockData);
  const idRef = useRef(2);
  const onCreate = (content)=>{
    const newTodo = {
      id:idRef.current+=1,
      isDone:false,
      content:content,
      date : new Date().getTime()
    }
    setTodos([newTodo,...todos])
  }
  return (
    <div className="App">
      <Header/>      
      <Editor onCreate={onCreate}/>
      <List todos={todos}/>
    </div>
  )
}

export default App;

 

그러기 위해서는 

<List> 컴포넌트에 props로 todos를 전달해줍니다. 

 

 

List 컴포넌트 내에서는 props로 받은 todos를 map을 이용해서 렌더링을 해줍니다.

 

import './List.css'

import TodoItem from './TodoItem';
const List=({todos})=>{
    return (
        <div className="List">
            <h4>TODO list</h4>
            <input placeholder="검색어를 입력하세요 "/>
            <div className='todos_wrapper'>
            {todos.map((todo)=>{
               return <TodoItem key={todo.id} todo={todo}/>
            })}
            </div>
           
        </div>
    )
}


export default List;

map은 

todos.map() 을  {} 로 감싸줘서 사용을 합니다. 

map의 괄호 안에는 화살표 함수를 사용해줍니다. 

 

todos.map((todo)=>{

})

 

todos를 돌면서 한개씩을 todo로 생각하고 쓸수있습니다. 

반환을 꼭해줘야합니다. !! return 필수 

 

이렇게 코드를 만들면 

TodoItem에서는 이렇게 todo를 받아와서 {todo.content} 이렇게 사용해야합니다. 

const TodoItem=({todo})=>{
    return  (<div  className="TodoItem">
        <input type="checkbox"></input>
        <div className='content'> {todo.content}</div>
        <div className='date'>Date</div>
        <button>삭제</button>
        </div>)
}

 

 

그런데 ..!  !

 

 {todos.map((todo)=>{
               return <TodoItem key={todo.id} {...todo}/>
            })}

이렇게 todo를 스프레드 연산자를 이용해서 props로 전달해준다면 ? 

 

 

 

받는 쪽(TodoItem)의 코드도 그에 맞춰서 짝을 바꿔줘야합니다. 

const TodoItem=({id,isDone, content, date})=>{
    return  (
    <div  className="TodoItem">
        <input checked={isDone} type="checkbox"></input>
        <div className='content'> {content}</div>
        <div className='date'>{date}</div>
        <button>삭제</button>
    </div>
    )
}

 

 

const TodoItem=({id,isDone, content, date})=>{ 

이렇게요! 

 

이러면 jsx부분에도 todo.content가 아닌 

{content} 로 사용할수있습니다. 

 

 

++ 참고로 화살표함수에서 {} 를 쓰면 return 을 꼭 해줘야합니다. 

 

ex)   틀린 코드 ( 이유 : return 이 없음 ) 

return todos.filter((todo)=>{todo.content.includes(search)});

 

맞는 코드 

 return todos.filter((todo)=>{ return todo.content.includes(search)});

 

 

이유  : 

자바스크립트(ES6) 화살표 함수의 문법 설계

 

 

 

 

요즘에 쿠팡플레이에서 투브로큰걸스를 보고있는데 잼써요 

 

특히 캣데닝스가 이쁨