props 를 받아올 때 주의 사항, ({props}) 와 (props) 의 차이

todos 배열을 props 로 넘겨준 경우,
하위 컴포넌트가 그냥 (todos) 로 받으면 객체 한겹 쌓여서 받아진다

const todoList = (todos) => {
    console.log(todos);
    return(
        <div>           
            {todos.length ? todos.map((todo, index ) => <TodoItem todo={todo} key={index}/>) : null}
        </div>
    )

const todoList = ({todos}) => {
    console.log(todos);
    return(
        <div>           
            {todos.length ? todos.map((todo, index ) => <TodoItem todo={todo} key={index}/>) : null}
        </div>
    )

따라서 todos 배열을 바로 받기 위해서는 객체 안의 배열을 나타내는 ({todos}) 로 받아야 한다. (값 추가했음)

좋은 웹페이지 즐겨찾기