reconciliation
HOC 패턴
react hooks가 나오고 나서 hoc 패턴은 많이 안쓰이게 되었다고 들었고, 또한 실제로 사용해본적도 아직은 없는거 같다. 그래서 책에서 언급한 부분을 찾아보니 커스텀 훅이랑 hoc의 대표적인 예시인 react.memo에 대해서 설명은 해주지만 언제 hoc 패턴을 써야하는지는 잘 설명해주지 않는다. 그래서 인터넷에 검색해보니 hoc는 대부분 wrapper 컴포넌트를 리턴해서 props를 조건부로 반환하는 패턴을 가지는데 특히 데이터 로딩이나 사용자의 권한과 관련된 경우에 쓰임. 그러나 충분히 custom hook으로 구현 가능할 것 같고 재사용성이나 유지보수적인 측면에서도 더 좋다고 느꼈는데 다른분들은 hoc에 관련하여 경험이 있는지??
함수 표현식과 선언 식의 차이 (딥 다이브 책 참고)
함수 표현식과 선언식의 차이 -> 호이스팅
- 자바스크립트는 모든 것을 호이스팅한다.
함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다. 따라서 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작한다. 변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터털도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다. 따라서, 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다. 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라고 한다.
- 무슨말이냐면 var a; var a = 10; 과 같이 변수 선언과 할당문이 있다.
- 변수 호이스팅에 의하면 런타임전에 undefined를 할당하고 런타임에 10을 준다
- 함수 표현식도 마찬가지로
var a = a (x,y){
console.log(xy)
}- a 에 undefined를 할당하고 런타임에 함수 객체를 할당하기 때문.
추가
- 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.
- 먼저 참조하면 undefined이지만 함수는 함수 호이스팅에 의해서 호출이 가능하다.
- 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
(const a = function asd (){})console.log(a);
var a = 10;
// undefined