Frontend

렉시컬 스코핑

💡 렉시컬 스코핑 : 변수의 유효 범위를 결정하는 규칙 중 하나이다.- 스코프는 함수를 호출할 때가 아닌 선언할 때 생긴다.- 함수 외부에서는 함수 내부에서 선언된 변수에 접근할 수 없다.- 정적 스코프라고도 불린다.  렉시컬 스코핑(lexical scoping) 많이들 헷갈리는 개념인데 스코프는 함수를 호출할 때가 아니라 선언할 때 생긴다.호출이 아니라 선언! 정적 스코프라고도 불린다.  다음 코드에서 console이 어떻게 찍힐지 예상해 보기var name = 'zero';function log() { console.log(name);}function wrapper() { var name = 'nero'; log();}wrapper();  정답: zero스코프는 함수를 선언할 때 생긴다.log..

스코프 체인

💡 스코프 체인 : 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라 한다. 💡내부 함수에서는 외부 함수의 변수에 접근 가능하지만 외부 함수에서는 내부 함수의 변수에 접근할 수 없다.  전역변수와 지역변수의 관계에서 스코프 체인(scope chain)이란 개념이 나온다.내부 함수에서는 외부 함수의 변수에 접근 가능하지만 외부 함수에서는 내부 함수의 변수에 접근할 수 없다.  모든 함수들은 전역 객체에 접근할 수 있다.var name = 'zero';function outer() { console.log('외부', name); // zero function inner() { var enemy = 'nero'; console.log('내부', name); // zero } ..

Hook의 규칙

🧐 React Hooks란? 함수형 컴포넌트에서 state 관리와 Life Cycle을 다룰 수 있게 하는 기술이다.🧐Hooks의 도입 이유? 클래스형 컴포넌트에서 발생하는 몇몇 불편한 점들을 극복하기 위해- this 값의 변경- 떨어지는 가독성- HOC패턴의 Wrapper 지옥 🧐Hook의 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 한다.- 반복문, 조건문 또는 중첩된 함수 내에서 Hook을 호출해서는 안 된다.- 모든 렌더링에서 동일한 순서로 Hook을 호출해야 한다. 오직 React 함수 내에서 Hook을 호출해야 한다.- 일반적인 JavaScript 함수에서 호출해서는 안 된다. - React 함수 컴포넌트에서 Hook을 호출해야 한다.  Hook 이란?2018년 ..

리액트버전 18부터 등장하는 Batching 개념

🧐  Batching 이란 여러 상태가 한 번에 변경될 때, 리액트는 이러한 변경 사항을 일괄 처리하여 렌더링 주기를 최적화하는 방식을 의미한다. Batching리액트 버전 18부터 더욱 강화되었다.이벤트 처리 방식의 개선으로, 성능을 향상하는데 도움이 된다.리액트가 UI 업데이트를 처리할 때 여러 업데이트를 일괄로 처리하여 렌더링 주기를 최적화하는 방식을 의미한다.  기존상태(State)가 업데이트되면, 해당 컴포넌트와 그 자식 컴포넌트들이 모두 다시 렌더링 되었다.이러한 방식은 작은 업데이트도 큰 렌더링 작업으로 이어질 수 있어 성능 문제가 발생할 수 있었다.  버전 18여러 상태 업데이트를 한꺼번에 처리하여 렌더링 작업을 최적화한다.예를 들어, 여러 상태가 한 번에 변경될 때, 리액트는 이러한 변..