Todo 돌이켜보기_TIL(49)

리액트를 시작하고 매 주차마다 todo를 만들고 있다.

싫타기보다 이렇게까지 하는데 todo를 못만들면 스스로 자괴감이 올꺼같을정도였다.

그래서 많이 했으니까 이제 todo는 왠만큼  만들겠지라고 생각하고 있다가 근래 네이티브 공부를하면서 순수 리액트로 투두를 다시 한번

만들면서 컴포넌트와 state관리 등을 상기시킬켬 다시 만들었다.

 

참고하지않고 처음 맨땅에서 부터 쭉 만들기 시작했는데ㅋㅋ 왠열... 한 1시간에 필요한 기능과 컴포넌트 분리를 다 한것 같다.

처음에는 투두를 어떻게 만들어야될지 몰라서 시작도 못했었는데 지금 만든거 보고 아 진짜 성장하긴 했구나 하는 생각이 들었다..

괜시리 뿌듯하고 난리ㅋㅋ👍

 

뿌듯함도 있지만 중간에 막히는 구간도 있었다. 😱

이 부분 처음 todo 접했을때 엄청 이해안되던 부분이였는데  다시 봐도 조금 주춤하는거 보고 이번 기회에 잘 걸렸다 생각을 했다.

 

1.막혔던 부분

진행중,완료 이 두 구역에 어떻게 투두들을 분리할껏인가?

2.시도

//구역: isActive가 true면 진행 중 false면 완료
<h2>{isActive?:"진행 중":"완료"}></h2>

<구역에 따라서 렌더링이 될 부분>
//itemIsDone:true면 완료이므로 isActive의 반대 값이 나온다.
{todos.filter((item)=>{isActive == !itemIsDone})
  .map((item)=>{return <Todo key={item.id} isActive={isActive}></Todo>})
}

즉 isActive가 진행중이면 isDone은 false인 아이템들만 필터로 거치고 그 필터를 거친 item들을 다시 맵을 돌려서 해당하는 값을 가진

<Todo> 컴포넌트를 렌더링 한다.

 

3.얻은 점

아 이렇게 정리를 하면서도 어렵긴하다.

그래도 반복학습의 힘인지 이해는 잘된다. 이제 나는 이 코드를 가지고 어떻게 써먹어볼까 고민을 해보면 좋을꺼같다.

공부를하면서 느낀 점은 어떻게 써먹을지 미리 고민해보는 습관을 들여야겠다.

 

리액트 투두도 어느정도 해결했으니까 내일은 리덕스로 투두 시작해보고 다음은 툴킷으로 진행해야겠다.😎