[24/08/29-09/04] 안내 및 질문 모음집 #28
Comments
프로토타입 기반의 상속이 클래스 기반 상속보다 복잡해서, 클래스를 많이 사용하게 된다고 결론을 지었는데리액트에선 클래스를 사용하지 않는다고 알고 있습니다.그렇다면 리액트에서 사용하는 상속 방식은 프로토타입 기반일까요? (추가 질문)
렉시컬 환경의 구성 요소를 프로퍼티가 아닌 컴포넌트라고 표현하는 이유 (이성훈)
블록 스코프와 함수 스코프의 외부 렉시컬 환경 참조 차이 (이성훈)
실행 컨텍스트가 이를 구분해서 참조를 저장하는 방법 (이성훈)
VariableEnvironment와의 관련성 (이성훈)
화살표 함수와 일반 함수의 'this' 바인딩 차이점과 이러한 차이가 클래스 메서드와 콜백 함수에서 어떤 영향을 미치는지 (김민석)일반 함수와 화살표 함수의 'this' 바인딩 차이
클로저를 사용하여 프라이빗 변수와 메서드를 구현하는 방법 (김민석)기본적인 사용방법 function createObject() {
// 프라이빗 변수들
let privateVar = 0;
// 프라이빗 메서드
function privateMethod() {
console.log('This is a private method');
}
// 반환되는 객체 (public interface)
return {
// 퍼블릭 메서드들
publicMethod: function () {
privateVar++;
console.log(privateVar);
privateMethod();
},
};
}
const obj = createObject();ES6 클래스와 private 필드를 사용 class BankAccount {
#balance; // private 필드
constructor(initialBalance) {
this.#balance = initialBalance;
}
deposit(amount) {
if (this.#validateAmount(amount)) {
this.#balance += amount;
return true;
}
return false;
}
withdraw(amount) {
if (this.#validateAmount(amount) && this.#balance >= amount) {
this.#balance -= amount;
return true;
}
return false;
}
getBalance() {
return this.#balance;
}
#validateAmount(amount) {
return typeof amount === 'number' && amount > 0;
}
}실 서비스 개발의 경우에서 클로저를 사용하는 경우 (조천산)
const myModule = (function () {
let privateVar = '비밀';
return {
publicMethod: function () {
console.log('비밀 번호: ' + privateVar);
},
};
})();
myModule.publicMethod(); // '비밀 번호: 비밀' 출력
React에서 클로저 개념을 많이 쓴다고 했는데(전혀 인지 못하고 있었습니다..) 언제 어떤 식으로 활용되는지 같이 알아보면 좋을 것 같습니다. (김주영)리액트 훅을 사용할 때 클로저의 개념이 중요하게 사용됨
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}이 코드에서 increment함수는 count와 setCount를 기억하고 있는 클로저 함수임
function Form({ onSubmit }) {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
onSubmit({ name, email }); // name과 email을 클로저로 캡처
};
return <form onSubmit={handleSubmit}>{/* form fields */}</form>;
}handleSubmit 함수는 name과 email state를 클로저로 캡처 |
함수 스코프: 함수가 선언된 외부 환경을 참조합니다. 실행 컨텍스트의 구분: 실행 컨텍스트는 이러한 방식으로 블록 스코프와 함수 스코프를 구분하여 관리
|
프로토타입 기반의 상속이 클래스 기반 상속보다 복잡해서, 클래스를 많이 사용하게 된다고 결론을 지었는데 리액트에선 클래스를 사용하지 않는다고 알고 있습니다. 그렇다면 리액트에서 사용하는 상속 방식은 프로토타입 기반일까요?답변 : 리액트는 클래스 기반 컴포넌트를 사용하지 않고 함수형 컴포넌트를 주로 사용하는 것은 맞다. 하지만 이는 상속이랑 직접적인 관련이 없다고 한다.
22장왜 렉시컬 환경의 구성 요소를 프로퍼티가 아니라 컴포넌트라고 표현하는가?
블록스코프와 함수 스코프는 외부 렉시컬 환경에 대한 참조가 달라지겠지?- 실행 컨텍스트는 이걸 어떻게 구분해서 참조를 저장할까?
- VariableEnvironment와 관련있지 않을까?
24장- 화살표 함수와 일반 함수의 'this' 바인딩 차이점과 이러한 차이가 클래스 메서드와 콜백 함수에서 어떤 영향을 미치는지
- 클로저를 사용하여 프라이빗 변수와 메서드를 구현하는 방법?클로저는 사용하여 함수 내부에 변수를 선언, 이 변수에 접근하는 메서드만을 반환함으로써 프라이빗 변수와 메서드 구현 가능 function createCounter() {
let count = 0; // 프라이빗 변수
return {
increment() { count++; },
getCount() { return count; }
};
}
const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.count); // undefined- 실 서비스 개발의 경우에서 클로저를 사용하는 경우?- React에서 클로저 개념을 많이 쓴다고 했는데 언제 어떤 식으로 활용되는지function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1); // 클로저를 통해 최신 상태에 접근
}, 1000);
return () => clearInterval(timer);
}, []);
return <div>{count}</div>;
}setCount 함수 내부의 콜백은 클로저를 통해 항상 최신의 count 값에 접근할 수 있다. |
24장
|
📚 분량
🎤 발표자
이성훈
질문
😮 지난주 추가 질문
프로토타입 기반의 상속이 클래스 기반 상속보다 복잡해서, 클래스를 많이 사용하게 된다고 결론을 지었는데
리액트에선 클래스를 사용하지 않는다고 알고 있습니다.
그렇다면 리액트에서 사용하는 상속 방식은 프로토타입 기반일까요?
???
22장
24장
The text was updated successfully, but these errors were encountered: