먼저, 잡담부터 시작.
예전에 태훈님한데 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강의는 훌륭함,
