ch09~12 스터디 내용 질문 정리 🧹

[zelkovaria]

🔍 질문 내용

• ‘함수가 외부 상태를 변경하면 상태 변화를 추적하기 어렵다’를 해결하기위해 제시한 대응법들에 있던 옵저버, 객체를 불변 객체로 전환, ..복사 등에 대한 해결 방법이 궁금해요
• 프로퍼티 참조시 var value = elem && elem.value;나 elem?.value나 결국 비슷한 결과가 나오는데 후자가 더 개선된 방법이라고 이해하면 될까요? 각각 어떤 상황에 쓰는게 좋은지 궁금해요
• 함수형 컴포넌트가 React에서 주류가 된 이유 중 하나는 일급 객체로서의 간결함이라는 장점때문이라는 내용을 본 적이 있습니다..! 함수형 컴포넌트가 클래스 컴포넌트보다 더 나은 이유가 비슷한 내용인지 궁금해요
• 리액트를 순수함수로 구성하는게 좋은 이유가 궁금해요
• 함수 선언문은 표현식이 아닌 문이므로 변수에 할당할 수 없다. 에 대한 설명중

  var add = function add(x, y) {
      return x + y;
  }
  
  console.log(add(2, 5));
  

  변수에 할당할 수 없다고 하지만 굉장히 할당 되는 것처럼 보이는데, 설명을 읽어봐도 이부분이 아직 완벽하게 이해되는 것 같지 않아서 헷갈려요
• function 생성자 함수를 사용하면 일반 함수와 클로저와 관련하여 어떤 차이점이 있는건지 이해가 잘 되지 않아요

✨ 기타 내용

• useEffect와 디펜던시(feat. 객체 값 비교)
• 실행컨텍스트(feat. 함수와 클로저)

[CH4MD0M]

리액트 deep dive 책 참고하기 좋은 것 같아서 공유드립니다! (진작에 찾아볼껄,,,🥲)

useEffect

• 196p ~
• dependency 관련한 설명이 있습니다.

VDom, Fiber

• 128p ~
• 공유 드린 유튜브, 블로그 글보다는 간단하게 다루고 있습니다.
• 블로그
• 유튜브

Function 생성자 함수와 클로저

스터디 때, 제 설명이 좀 부족했어서 추가 내용을 작성하려고 합니다..!

function outer() {
    var x = 10;
    
    // 일반 함수
    function inner1() {
        console.log(x);  // 10 출력
    }
    
    // Function 생성자 함수
    var inner2 = new Function('console.log(x);');
    
    inner1();  // ok
    inner2();  // ReferenceError: x is not defined
}

outer();

함수 정의가 평가되어 함수 객체를 생성할 때 자신이 정의된 환경(위치)에 의해 결정된 상 위 스코프의 참조를 함수 객체 자신의 내부 슬롯 [[Environment]]에 저장한다. 이때 자신의 내부 슬롯 [[Environment]]에 저장된 상위 스코프의 참조는 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 가리킨다. - 딥다이브 391p.

일반적인 함수 선언이나 함수 표현식은 그들이 정의된 렉시컬 환경을 [[Environment]] 슬롯에 저장합니다.
반면에, Function 생성자로 만든 함수는 항상 전역 스코프를 [[Environment]] 슬롯에 저장합니다.

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. - 딥다이브 388p.

렉시컬 환경에는 클로저가 생성된 시점의 스코프에 있는 모든 지역 변수가 포함되어 있습니다.
Function 생성자로 만든 함수는 항상 전역 스코프를 참조하므로, 생성된 시점의 스코프를 알지 못합니다.

위 예제에서 inner2 함수는 outer 함수 내부에서 선언이 되었지만, outer 함수의 지역 변수인 x에 접근할 수 없습니다.
따라서, Function 생성자 함수로 선언한 함수는 클로저를 생성할 수 없습니다.