React가 비전공자에게 어려운 이유

이번에 비전공자를 대상으로 강의를 하면서 느낀 점들

1. Class와 Instance에 대한 이해가 선행되어야 한다.

OOP라는 난해한 말로 이해의 진입 장벽을 높일 필요는 없다고 생각한다.
그럼에도 Class와 Instance, Method와 Properties, 그리고 Method Overriding 정도에 대한 이해는 갖춰져있어야 한다.
그래야 React.Component 및 관련된 Life cycle Hook이 덜 Magic처럼 느껴지지 않을까

2. Immutable의 개념과 왜 중요한지

React와 관련 생태계에서 자주 사용하는 개념이 Immutable이라는 개념이다.
불변성이 좋은지에 대해 어느 정도의 공감이 형성되어있어야 된다.
그냥 Immutable이라는 키워드 하나 주고 Component내에서 state를 바꾸 때는 this.setState를 쓰고 redux state의 reducer는 nextState = reducer(currentState, action) 형태이다 라고만 설명하는 것은 주입식 교육이다.

3. 비동기 코드가 왜 생기고 이걸 어떻게 다루는 지

(function() {

  console.log('this is the start');

  setTimeout(function cb() {
    console.log('this is a msg from call back');
  });

  console.log('this is just a message');

  setTimeout(function cb1() {
    console.log('this is a msg from call back1');
  }, 0);

  console.log('this is the end');
})();
// 실행 순서는?

Promise API에 대한 완벽한 이해가 되어야 한다.
그리고 이에 대한 이해가 상당히 갖춰졌다고 판단됐을 때 async-await을 소개해주면 좋다.
Promise 생략하고 바로 async-await을 소개하는 건 진짜 외워서 쓰라는 것 밖에 안된다.

4. React-Redux와 React-Router는 최후에 배워야 한다.

덜 중요하기 때문에 마지막 순간에 가르쳐야된다는 건 아니다.
다만 React에 대한 단단한 이해가 어느정도 갖춰진 뒤에,
그리고 Redux없는, Router없는 React 세상이
어떤 불편한 점들이 있는지를 체감을 하게끔 하고 나서야 가르쳐야 된다고 생각한다.
개인적으로 Redux로 Todo list 실습하는 건 좋지 않다고 생각한다.

5. 함수를 자유자재로 다뤄야 한다.

doD(doA(doB())doC())() 혹은 () => () => () => ({}) 와 같은 문법을 보았을 때 동공이 아주 조금만 흔들릴 정도로 함수를 자유자재로 다룰 수 있어야 한다.

6. 자료 구조를 자유자재로 다루어야 한다.

기본적인 .map, .reduce뿐 아니라 lodash까지 먼저 한번 실습을 해보는 것이 좋다. 그리고 실제 API 응답같은 mock data를 만들고 이걸 Frontend에서 사용할 수 있게끔 임의로 가공하는 실습을 해보는 것이 좋다.

이번 강의를 하면서 아쉬운 부분도 많았다. ES6 수업을 앞서 2주동안 수업했다기에