OCEAN-WARD BOUND

React에서 상태 관리와 클로저 문제 해결안녕하세요 Ocean입니다.최근 프론트엔드 면접에서 React에서 상태를 어떻게 관리하는지, 그리고 이 과정에서 발생하는 클로저 문제에 대해 질문을 받았습니다. 사실 이 문제는 생각해본 적이 없어서 답변을 잘 못했었는데, 여러 자료를 찾아보니 좋은 글들이 많았습니다. 그래서 이 기회를 통해 관련 자료들을 정리해보았습니다.참고 글1. React useState의 동작 원리와 클로저2. React Hook은 실제로 어떻게 동작할까? (번역)3. React Hooks: 마술이 아니라 그저 배열일 뿐이다 (번역)React의 useState훅은 함수형 컴포넌트에서 상태를 관리하는 중요한 도구입니다. 또한 useState는 클로저를 설명하는 아주 좋은 예이기도 합니다.이번..

이 책을 선택한 이유는? 본격적인 타입스크립트 학습에 앞서, 타입스크립트의 필요성이 대두된 보다 근본적인 이유가 궁금했습니다. 깊게 배운 언어가 Js뿐이기 때문에 정적 타입 언어가 낯설었고, 기존의 Js만으로도 크게 문제 없이 개발을 할 수 있으니 추가적으로 타입을 명시하는 행위가 크게 와닿지 않았어요. 그러한 궁금증에 답이 될까 싶어서 해당 저서를 선택하게 되었습니다.이 책의 주요한 특징으로는 어떠한 정적 타입 언어의 국한된 기술서와 같은 것이 아닙니다. 정적 타입 언어의 필요성과 특징들을 알기 쉽게 전달하는 개념서에 가까워요. 그래서 정적 타입 언어의 기능(타입 추론, 제네릭 등)들을 다양한 언어로 예시를 들어서 설명합니다. 타입스크립트 만을 위한 저서는 아니지만 타입스크립트의 예시도 많이 등장하기 ..

// 반복문을 이용한 팩토리얼 알고리즘 function factorial(n){ let result = 1; if(n > 0){ for(let i = 1;i

자바스크립트의 코드를 보다보면, 변수나 리터럴 앞에 ... 붙어있는 것을 볼 수 있을 것입니다. 이는 ES6에서 도입된 기능으로 사용되는 형식에 따라서 Rest 파라미터와 스프레드 문법으로 분류될 수 있습니다. Rest 파라미터 Rest 파라미터 (나머지 매개변수)는 함수의 매개변수 앞에 세 개의 점 ...을 붙여서 정의한 매개변수를 의미합니다. 간단하게 말하면, Rest 파라미터는 함수에 전달된 인수들을 배열로 변환하여 전달 받는 것 입니다. const rest = function(...rest){ console.log(rest); }; rest(1,2,3,4,5); // [1, 2, 3, 4, 5] //전달 받은 인수들을 배열로 변환한다. 또한 Rest 파라미터는 일반 매개변수와 함께 사용할 수 있습..

자바스크립트의 완전히 기본적인 개념만 알던 비교적 과거에, 클로저란 개념은 정말 어렵고 난해했습니다. 하지만 자바스크립트의 근간을 이루는 렉시컬 스코프와 실행 컨텍스트를 이해하니 조금은 클로저란 개념에 가까워진 것 같습니다. 이번 글에서는 앞서 말한 실행 컨텍스트와 렉시컬 스코프의 동작 원리를 세부적으로 설명하면서 클로저를 이해하기 보다는 대략적으로 설명하면서 어색한 개념인 클로저와 조금 가까워지는 그런 글이 됐으면 좋겠습니다. (정리하기 귀찮아서 그런건 진짜 아닙니다.) 클로저 (Closure) 우선, 클로저는 자바스크립트 고유의 특징적인 개념은 아닙니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어와 렉시컬 스코프로 동작하는 언어의 특징을 사용한 일종의 패턴, 개념이라고 생각하시면 될 것 같습..

this? 일반적인 프로그래밍 언어에서의 this는 객체지향언어에서 생성자 함수를 이용해 새로운 객체를 생성할 때 그 새롭게 생성된 객체를 가리키는 식별자입니다. 하지만 자바스크립트에서 this는 조금 더 다양한 맥락에서 사용할 수 있고, 다른 방식으로 동작합니다. 아래의 예제를 보겠습니다. const foo = function(){ console.dir(this); }; this가 어떤 객체를 가리키고 있는지를 출력해주는 간단한 함수입니다. 이 함수의 this는 해당 함수를 "어떻게" 호출하냐에 따라서 this가 가리키는 객체가 달라집니다. // 일반 함수로 호출 foo(); // Window // 일반 함수로 호출 시엔 전역 객체 window를 가리킨다. // obj 객체의 메소드로 호출 const ..

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이다. var 키워드로 선언된 변수는 다른 언어와는 구별되는 독특한 특징들이 있다. var 키워드 ( ~ ES5) 1. 변수 중복 선언 허용 var x = 1; var y = 1; var x = 100; // 같은 스코프 내에서 변수의 중복 선언을 허용함. // 초기화문이 있는 변수 선언문은 JS 엔진ㅇ에 의해 var 키워드가 없는 것 처럼 동작 var y; // 초기화문이 없는 변수 선언문은 무시된다. console.log(x); // 100 console.log(y); // 1 위 예제와 같이 만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이..

스코프란? 모든 식별자(변수 이름, 함수 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라고 한다. 스코프 = 식별자가 유효한 범위 (유효 범위) function foo(){ var x = 10; console.log(x); } foo(); // 10 console.log(x); // ReferenceError: x is not defined 위의 코드를 보자. 변수 x는 함수 안에서 정의되었기 때문에 x의 스코프는 foo 함수 내부이다. 이 변수 x의 유효 범위, 즉 스코프는 함수 내부인 것이다. 스코프가 함수 내부이기 때문에 함수 외부에서는 변수 x를 참조할 수 없다. 따라서 변수 x의 스코프는 지역 스코프이다. var x = "g..

1. ?. (옵셔널 체이닝 연산자) ES11에서 도입된 옵셔널 체이닝 연산자(?.)는 연산자 ?.는 좌항의 피연산자가 null이나 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. var elem = null; var value = elem?.value; //?.연산자 좌항이 null이기 때문에 value에는 undefined가 반환. console.log(value); //undefined 옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다. 다시 말해, 내가 참조할려는 객체 변수가 존재할 때는 프로퍼티를 참조하고 아니라면 그냥 undefined 반환을 명령하는 연..