[TIL] 2020/10/14

yongkini ·2020년 10월 14일
0

Today I Learned

목록 보기
52/173

Today, I Will Learn


  • redux sprint 마무리
  • redux 스프린트 내용 정리
  • Solo Day 어떻게 활용할지? : 
    1) 먼저, redux 복습 제대로 하자. 분명히 효율적인 라이브러리이다. => 블로깅하기
    2) asynchronous 부분 복습해야한다. 이번에 Toy Problems에서 만나니까 기억이 하나도 안난다.
    

Today, I Learned


  • redux sprint 마무리 clear :
    확실히 이전의  state 끌어올리기 등의 방식보다는 store을 따로 두고 관리하는 것이 훨씬 편하긴 했다.
    단지, redux 공식문서에도 나와있듯이 새로운 문법 등을 배우는게 벅찼기는 했지만, 
    후에 state를 많이 쓰게 될 때 혹은 컴포넌트 가계도가 복잡하게 설계되는 경우에 쓰면 좋을 것 같다.
  • 문제는 풀었지만, 일단 redux 스프린트를 통해서 머리 속에 정리된 내용은
    1) 액션 creator => action => store.dispatch => reducer => new state => store에 저장 
    => store에 있는 state를 mapStateToProps를 통해(connect 사용) 실제 컴포넌트의 props에 매핑해주고, 렌더링하도록 하기
    2) store는 redux를 통해 createStore을 import해서 생성하고, 이러한 store에는 subscribe(액션이 보내질 때마다 매개변수로 넣어준 콜백함수를 실행하도록 하는 메서드), 
    getState(리듀서와 리듀서 안의 state 정보들이 저장되어 있는 객체를 리턴함) 등이 있다.
    3) 이 때, createStore를 할 때, 리듀서를 바인드한(묶어준) 객체를 매개변수로 주고 생성한다. + 디폴트 state를 두번째 매개변수로 주고 생성.
    4) react & redux를 같이 쓸 때는 Presentational and Container Components 를 나누어서 코딩한다. 나만의 표현으로 쉽게 말해보면, 
    presentational Components는 여태까지 써왔던 말그대로 프론트엔드를(리액트의 본분과 같은?) 지정해주는 컴포넌트이고,
    Container Component는 백엔드와 같이 state에 있는 정보를 presentational 컴포넌트에 props로 내려주는 역할을 한다(by mapStateToProps)
    이에 더하여, 두 컴포넌트를 이어주기 위해서는 connect라는 redux메서드를 이용한다.
    5) combineReducers()을 통해서 한번에 action send로 여러 리듀서를 호출해서 new state를 리턴할 수 있다. 
    이 때, action에 담긴 type과 일치하는 리듀서만 처리 로직을 실행할 것.
  • 마무리로 공식문서에 있는 toDoList app redux로 만들어보기 따라하기
  • css style에서 삼항연산자를 써서 스타일을 줬다 안줬다 할 수 있음 !
  • onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }}
  • Toy 18번 clear

Planning to Study


  • redux를 이용해서 todoList 내 스스로 만들어보기:
    디자인부터해서 컴포넌트(presentational, container), 액션, 리듀서 설계 등 직접 전부다 이론으로 완성한다음에 => 코딩하기. 
    종이에 앱을 완성할 때까지(이론적으로) 코딩 시작 X.
    원하는 기능 :
    1) 계획 추가
    2) 계획 클릭하면 completed 상태로 바꾸기
    3) 모두 보기, 완성 못한 것만보기, 완성한 것만 보기 filter
    4) 디자인 with css=> todolist는 테이블로 예쁘게 
    5) 현재 시각이 초단위로 계속 변하도록 표시하기
    
profile
완벽함 보다는 최선의 결과를 위해 끊임없이 노력하는 개발자

0개의 댓글