241116 TIL

• Udemy <한 입 크기로 잘라먹는 리액트>
  • 컴포넌트의 주목적은 UI를 렌더링 하는 거다. 그러니 상태를 변경하는 로직이 컴포넌트 내부에 비대해지는 것은 원래 목적과는 조금 다른 방향이 될 수 있다.
  • useState 훅으로 만든 상태와 상태 변경 함수는 컴포넌트 내부에서만 사용 가능하다. 때문에, 상태 변경 로직을 컴포넌트 외부로 떼는 게 어려우며, 이런 문제를 해결하기 위해 등장한 것이 useReducer이다.
  • useReducer를 이용하면 컴포넌트 외부에서 상태를 변경하는 로직을 사용할 수 있다.
  • [state, dispatch] = useReducer(reducerFunc, initState) 형태로 사용하고, useReducer의 첫 번째 인자로 전달한 reducerFunc를 컴포넌트 밖에 선언하는 식으로 활용한다. reducerFunc에서는 변경할 상태를 리턴해줘야하고, useReducer 훅은 리턴된 값으로 state를 자동으로 업데이트 해준다.
• React 공식문서
  • reducer를 사용한 state 관리는 state를 직접 설정하는 것과 약간 다르다. state를 설정하여 React에게 “무엇을 할지”를 지시하는 대신, 이벤트 핸들러에서 action을 전달하여 '사용자가 방금 한 일'을 지정한다. 즉, 이벤트 핸들러를 통해 tasks를 설정하는 대신 task를 추가/변경/삭제하는 action을 전달한다.
  • action 객체에는 어떠한 데이터를 넣을 수도 있지만, 어떠한 상황이 발생하는지에 대한 최소한의 정보를 type이라는 프로퍼티로 담고 있는 게 일반적이다.
  • reducer를 사용하면 이벤트 캐치와 로직을 분리할 수 있다. 이는 조금 더 가독성 좋고 유지보수하기 좋은 코드를 생산하는 데 도움이 된다.
• 스터디 준비: this에 대해서
  • 자바스크립트는 생성자 함수로 프로토타입의 생성자를 만든다. 그리고, 일반 함수라면 Callee와 함께 Constructor라는 내부 슬롯이 존재하고, 사용자가 어떤 형태로 함수를 호출할지 알 수 없기 때문에, 필연적으로 모든 함수는 다른 클래스 기반 언어와 마찬가지로 인스턴스를 가리킬 this라는 값을 가질 수밖에 없다.
  • this는 렉시컬 환경에 기본 저장되기 때문에, 인스턴스가 아니더라도 어떠한 값은 지정을 하게 될 수밖에 없다. 그런 의미에서 일반 함수의 this가 전역 객체를 가리키게 된 게 아닐까 싶다.
  • 자바스크립트는 태생이 유연성을 극대화하는 쪽의 철학을 보유하고 있다. 때문에, 하나의 함수가 만들어지더라도 다양한 맥락(객체 의존)에서 사용되는 것이 전제되었다. 그래서 메서드에서의 this가 메서드를 호출한 객체를 가리키게 되는 것도 이러한 유연성과 재사용성을 극대화 한 방향이라고 생각된다.
  • 이벤트 핸들러의 콜백 함수에서 this는 이벤트 핸들러가 부착된 DOM 요소를 가리킨다. e.currentTarget과 같은 값을 가지는 것이다.
  • setTimeout이나 Promise와 같이 비동기 함수의 콜백 함수 this도 사용에 주의해야 한다. 비동기 처리가 등록되는 시점에서의 함수 실행 컨텍스트와 실제 실행되는 시점의 실행 컨텍스트에 차이가 존재할 수 있기 때문에, 실행 방식에 따라 this가 다른 값을 가질 수 있기 때문이다.
  • 이러한 this의 유연성은 코드의 예측 가능성을 떨어트리기 때문에 안정적인 프로그램을 만드는 데 방해 요소가 된다. 그런 이유로 ES6부터 화살표 함수가 등장했다. 화살표 함수는 단순히 함수를 축약형으로 간단하게 선언할 수 있다는 장점만 갖는 것이 아니다. 화살표 함수는 this 값을 갖지 않으며, 상위 스코프의 this를 그대로 참조한다는 점에서 this가 가리키는 대상을 예상 가능하게 하고 직관적으로 만들어줄 수 있다. 이 점을 잘 알고 사용하자.

React의 여러 훅에 대해 들어가기 시작하니까 헷갈리고, 왜 쓰는지에 대해 이해하는 데에도 어려움이 좀 있다. 아직 처음 공부하니 그럴 수밖에 없다고 생각하지만, 마음이 조급하긴 하다. 침착하게 하나씩 잘 공부해 봐야겠다.