'2016/03/05'에 해당되는 글 1건

  1. 2016.03.05 Getting Started with Redux (2)

먼저, 잡담부터 시작.

예전에 태훈님한데 egghead을 지나가듯 들었는데 정수형이 다시 알려줘서 redux 강의를 들었다. redux강의 하나를 들었는데 다른 강의를 보지 않아도 돈을 내고 들을만 하다고 생각한다.

내가 본 건 [getting-started-with-redux] 인데  영상의 컨셉이 redux가 왜 필요한지 부터 시작해서 redux을 간단하게 만들면서 적용하는 과정이다. 영어긴 한데 누가 [정리한 글]도 있고 주로 코딩을 하기 때문에 보는데 무리가 없었다.


다시 돌아와서, 내가 이 강의를 들으면서 고민했던 부분을 정리하려고 한다. 이미 전반적인 내용을 정리한 글은 많아서 난 좀 이슈 위주로 정리. 


- stateless functional components의 존재

 : 난 이게 왜 필요한지 한참을 고민했다. 말그대로 상태가 없는 함수형 컴포넌트다. 여기서는 기본적으로 상태을 최소한으로 유지하고 각 컴포넌트가 가지고 있기 보다 container에서 관리하기 때문에 가능하면 상태를 관리하지 않도록 한다. 근데 이게 생각보다 잘 안되는지 기능적으로 개발할 때 상태를 가지지 못하게 한게 이 컴포넌트인 것 같다. 이건 이해했는데, 이게 성능이 빠르다고 하는게 이해가 안됬다. 왜냐하면, 이 컴포넌트는 그냥 함수라 기본적인 life cycle이 없다. 그래서  "shouldComponentUpdate"를 활용해서 내가 virtual dom의 비교을 smart하게 할 수 없었다. 그리고 코드를 봐도 왜 빠른지 알 수가 없었는데 [링크]을 통해 이해했다. 정리하면 아직 옵티마이제이션되는건 없고 미래에 될 거다 이다. 그리고 pureRender나 shouldComponentUpdate가 오/남용이 많은가 보다.


- Provider와 connect의 존재

: 동영상을 따라면서 동영상처럼 한 JS에 작성했던게 아니고 클래스별로 잘라서 사용했는데, 이게 문제가 redux의 store을 각 컴포넌트에서 접근해서 사용하기가 너무 귀찬고 매번 prop으로 넘기는데 이게 뭔가 싶었다. 한참 짜증이 났는데 일단 끝까지 보자라는 생각으로 봤더니 끝나기 몇 회 전에 이 문제를 해결하는 방법을 알려줬다. 공통적으로 가지고 다니는 store나 route같은 객체가 있다면 Provider나 connect가 써야 한다. 잊지는 않겠지만, 난 이거 나중에 알아서 좀 짜증났음. 그리고 Provider을 사용할 때 context가 들어오는 시점이 construct가 아니라 "componentWillMount"부터 들어와서 좀 삽질했다.


- arrow function

: 이게 뭔지는 알았는데 실제로 사용하다보니 react에는 이게 2가지 패턴이 있다. 바로 반환하는 경우는 {}을 사용하지 않고 그냥 ()을 사용한다. 좀 더 정확히 말하면 => 는 바로 반환할 때는 별도의 brace을 넣지 않고 할 수 있는데 jsx때문에 ()을 넣는다. 근데 난 이게 정말 눈에 안뜀. 이것도 몇 번 삽질.    

const Footer = ({ currentFilter, onFilterClick }) => ( <p> <FilterLink filter='SHOW_ALL'>All</FilterLink> </p> ); const Footer = ({ currentFilter, onFilterClick }) => ( // 이렇게 쓰고 몇 번 헤멤 doSomething(); return ( <p> <FilterLink filter='SHOW_COMPLETED'>Completed</FilterLink> </p> ); );



- destructuring

: ES6의 문법중에 , 초반에 눈에 잘 안들어왔던 문법이 destructuring이다. 익숙해지면 완전 편한데 처음에 좀 걸리적거렸음.

{
  filter,
  currentFilter,
  children,
  store
}

{...todo}

[...state, todo(undefined, action)]

{ ...state, completed: !state.completed}



- es6/7은 꿀

: destructuring, import, arrrow...을 es5로 개발한다고 생각하면 좀 답답했을것 같다. 그리고 babel에 "stage-0" preset을 사용하면 es7나 제안중인 [static property]도 사용할 수 있다는건 흥미로웠다. 다만, 실무에 써보라고 한다면 스킬이 아직 좀 부족한것 같다. 그리고 아직 트랜스파일링 된 코드를 보는게 눈에 잘 들어온다. -_-;


- export이슈

: export하는 부분을 빼먹은 적이 많아서 아래 메세지를 여러번 만났다. 이것 때문에 나도 삽질 좀 많이 함.

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `TodoApp`.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `TodoApp`.


- 폴더 구조

: 어떻게 폴더 구조를 가져가야 할 지 고민이 된다. 찾아보니 몇 가지 제안([링크], [링크]...)들이 있던데, 아직 내가 실제로 만들어보지 않아서 그런지 뭔가 공감이 안된다. -__-;



전반적으로 이 강의를 듣고 나서 react+redux을 어떻게 활용해야 할 지에 대한 감은 잡혔다. 다만, 많이 만들어보지 않아서 그런지 의문점들은 몇 개 있다. 

예를 들면, 스케일이 커지면 redux처럼 하나의 store로 가는게 좋은 방법인지 잘 모르겠다. 그 밖에 Presentational Component의 단위를 가능하면 작게 쪼개길 기대하는데 이게 뭔가 난 부자연스럽다. 왠지 virtual dom때문에 하는 작업처럼 느낌..., 객체가 커지면 새로 만드는 비용은 크게 문제가 없는지 등등 디테일은 좀 경험이 필요할 것 같다.

여튼 egghead,io강의는 훌륭함,



Posted by 전용우
TAG , , ,

댓글을 달아 주세요

  1. sjsj 2016.07.19 14:12  댓글주소  수정/삭제  댓글쓰기

    안뇽하세요~
    링크걸어주신 https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree?course=getting-started-with-redux
    강의는 유료인가요? 강의가 2분씩 되잇어서 혹시 더 결제해야 볼수있는건가 해서 문의드려요! 좋은글보고갑니다.