23.02.17-23.02.23 주특기 심화 주차 / React, Todo-List 과제 진행중
TodoList 과제를 하며, 오류가 났던 부분과 해당 부분과 관련있는 개념을 정리해보고자 한다.
useSelector
useSelector로 데이터를 불러올땐 최대한 자세히 부르는게 최적화된다.
아래와 같은 코드일 경우 1번 코드보다도 내가 title을 쓸 경우, 2번처럼 부르는 것이다.
//1번
const todoList = useSelector((state) => state.todos.todos);
...
//2번
const todoList_title = useSelector((state) => state.todos.todos.title);옵셔널체이닝
옵셔널체이닝 : 프로퍼티가 없는 중첩 객체를 에러없이 안전하게 접근할 수 있다.
예를 들어 배열의 경우 해당 배열이 0이나 빈 배열이 아니라 undifined 나 null일 경우 뒤에 오는 동작을 멈추고 undifined 를 반환하게 되는 것이다.
조건부렌더링
map, filter같은 배열에서 쓰이는 함수 중 데이터를 불러오는데는 문제가 없으나, 렌더링할때 오류가 난다면 조건부렌더링을 걸어보자.
// 1번
{todoList.map ((todo) =>
{return
<div key= {todo.id}>
{todo.id} : {todo.title} : {todo.content}
</div>
})
}
//2번
{todoList.length > 0 && todoList.map ((todo) =>
{return
<div key= {todo.id}>
{todo.id} : {todo.title} : {todo.content}
</div>
})
}1번의 경우 조건이 없고, 2번의 경우 조건이 걸려있다.
1번, 2번 모두 데이터를 불러오는 과정에서 console.log(todoList)로 확인한 결과 문제가 없었지만 1번의 경우 새로고침이라던가, 추가같이 렌더링이 필요한 상황에서 todoList.map is not a function 이라는 문구가 나오며 오류가 난 상황이다.
따라서 조건으로 todoList.length > 0 && 이나 todoList !== [ ] 같은 조건을 걸어준다면 렌더링시에도 문제없이 출력된다.
2/21 기준
: 조회 및 추가 기능구현 완료
: 디테일페이지 접속 완료
: 삭제 기능은 가능하나, 동시에 렌더링이되지않고 새로고침해야함
｡˚⋆｡˚ ☁︎˚｡⋆｡˚☽˚｡⋆˚ ☁︎˚