<star />

1. 동기 (Synchronous) 란 무엇일까? - 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉, A작업이 모두 진행 될때까지 B작업은 대기해야한다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다. 대기 중인 태스크들은 현재 실행 중인 실행 컨텍스트가 팝되어 실행 컨텍스트 스택에서 제거되면, 다시 말해 현재 실행 중인 함수가 종료하면 비로소 실행되기 시작한다. 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 (single thread) 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시..

1. 변수 호이스팅 console.log(foo);// ReferenceError : foo is not defined let foo; let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조 에러 (ReferenceError) 가 발생함. console.log(z);// undefined var z; var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계" 와 "초기화 단계" 가 한번에 진행됨. 선언 단계에서 실행 컨텍스트의 렉시컬 환경, 즉 스코프에 변수 식별자를 등록하여 자바스크립트 엔진에 변수의 존재를 알림 👉🏻 그리고 즉시 초기화 단계에서 undefined 로 변수를 초기화함. 👉🏻 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하기 땜에 에..

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다. 🌟 A closure is the combination of a function and the lexical environment within which that function was declared. 모든 함수형 언어가 가지고 있는 가장 중요한 특성임. 스코프의 속성을 활용한 상위/외부 식별자를 접근함. (은닉성과 스코프 체인 제어) 1) 렉시컬 스코프 - 자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어다. - 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라, 함수를 어디에 정의했는지에 따라 상위 스코프를 결정함. 이를 렉시컬 스코프 (정적 스코프)라 한다. const x = 1; function foo() { const x = 1..

function as a child 는 컴포넌트의 자식으로 함수를 사용하는 방법임. 리액트에서는 기본적으로 하위 컴포넌트들을 children 이라는 prop 으로 전달해 주는데, children 으로 컴포넌트 대신 함수를 사용하여 아래와 같이 사용할 수 있음. // children 이라는 prop 을 직접 선언하는 방식 별명 : {nickname}} /> // Info 컴포넌트로 감싸서 children 으로 만드는 방식 {nickname=> 별명: {nickname}}

컨텍스트는 재렌더링 여부를 결정할 때 레퍼런스 정보를 사용하기에 Provider 의 부모 컴포넌트가 재렌더링 되었을 경우, 의도치 않게 하위 consumer 컴포넌트의 재렌더링이 일어날 수 있음. function App (props) { return ( ); } 위 코드는 Provider 컴포넌트가 재렌더링 될 때마다 모든 하위 consumer 컴포넌트의 재렌더링이 발생하는 코드임. 왜냐? value prop을 위한 새로운 객체가 매번 생성되기 때문임. function App(props) { const [value, setValue] = useState({ etc: 'etc' }); return ( ); } 이를 방지하기 위해선 위의 코드처럼 value 를 직접 넣는 것이 아니라~ 컴포넌트의 state ..

컨텍스트 (Context) 가 뭐야? 😃 - 리액트 컴포넌트들 사이에서 데이터를 기존의 props 를 통해 전달하는 방식 대신, 컴포넌트 트리 (component tree) 를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공함. 이를 통해 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있지용. 1) 컨텍스트는 언제 사용해야 하나? - 기존 props 를 통해 데이터를 전달하는 기존 방식은 실제 데이터를 필요로 하는 컴포넌트까지의 깊이가 길어질수록 복잡해짐. 반복적인 코드를 계속해서 작성해야 하기때문에 비효율적이고, 직관적이지도 않음! 이럴 때 컨텍스를 사용하면 깰끔하게 개선할 수 있음. 💪🏻 1. 컨텍스트는 데이터를 매번 컴포넌트를 통해 전달할 필요 없이 컴포넌트 트리로 곧바로 전달하게 해 줌. 아래 코..