인터프리터
자바스크립트 인터프리터는 자바스크립트 코드를 실행하는 프로그램입니다. 이 인터프리터는 자바스크립트 코드를 한 줄씩 읽고, 해당 코드를 실행하며 결과를 즉시 반환합니다.
자바스크립트 인터프리터는 일반적으로 웹 브라우저나 Node.js와 같은 서버 측 런타임 환경에서 사용됩니다. 이를 통해 웹 페이지의 인터랙션 및 동적인 기능을 제공하거나, 서버 측에서 데이터를 처리하는 등 다양한 용도로 사용됩니다.
인터프리터는 자바스크립트 코드를 실행하기 위해 컴파일 단계를 거치지 않습니다. 대신, 코드를 한 줄씩 읽어서 실행하며, 필요한 경우에만 해당 코드를 해석하고 실행합니다. 이러한 특성 때문에 자바스크립트는 빠르게 프로토타이핑이 가능하다는 장점을 가지고 있습니다.
스코프 체인
스코프 체인(Scope Chain)은 자바스크립트에서 변수와 함수에 접근할 수 있는 유효 범위를 결정하는 메커니즘입니다. 스코프 체인은 코드에서 변수나 함수를 참조할 때, 현재 스코프에서 해당 식별자를 찾지 못하면 상위 스코프로 이동하며, 최상위 전역 스코프까지 이동하여 해당 식별자를 찾습니다.
이러한 스코프 체인은 중첩된 함수에서 외부 함수의 변수에 접근할 수 있는 클로저(Closure)를 만들어내며, 변수명 충돌을 방지하고 프로그램의 모듈화를 도와주는 등의 역할을 합니다.
간단하게 요약하면, 스코프 체인은 변수와 함수에 접근할 수 있는 범위를 결정하는 메커니즘이며, 현재 스코프에서 해당 식별자를 찾지 못하면 상위 스코프로 이동하여 찾습니다. 이를 통해 클로저와 모듈화를 구현할 수 있습니다.
https://ljtaek2.tistory.com/140
React Hook
컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.
복잡한 컴포넌트들은 이해하기 어렵습니다
Class은 사람과 기계를 혼동시킵니다.
useEffect
이는 side effects를 가능하게 해주는 훅이다.
React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다.
Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. (useEffect와 이 세 가지 메서드를 비교하는 예시가 Using the Effect Hook 문서에 있습니다.)
예를 들어, 이 예시는 React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트입니다.
규칙✌️
최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)
캡슐화
객체의 속성(data fields)과 행위(메서드, methods)를 하나로 묶고
실제 구현 내용 일부를 외부에 감추어 은닉한다.
