🤔 좋은 아키텍쳐란?
- 네이밍만 잘해도 70%는 먹고 들어간다.
- 코드가 비대해지기 전에 잘게 쪼갠다.
🤔 함수형보다 class형 컴포넌트를 선호하는 이유??
- 코드량이 확연히 적어진다.
- 코드가 몰려있어 응집성이 좋다. 즉,보기 좋다
- 좀 더 선언적이다.
- 실행컨텍스트, 프로토타입 등 부가적인것들을 몰라도 사용할 수 있어 러닝커브가 낮은편이다.
🤔 react hook은 클로져다??
NO!
const [A, B] = useState();
A값을 바꾸려면 B를 사용해야한다.
B는 다른 함수의 콜백으로 사용되는데 이때 클로져가 잡히면 hook 자체는 클로져가 아니다.
그러므로 메모리 사용량에 대해서 신경쓰지 않아도 됩니다. (GC가 알아서 해줌)
📚 generator
코루틴 함수의 구현체라고 할 수 있습니다.
코루틴 함수는 caller 가 함수를 call 하고, 함수가 caller 에게 값을 return 하면서 종료하는 것에 더해 return 하는 대신 suspend(혹은 yield)하면 caller 가 나중에 resume 하여 중단된 지점부터 실행을 이어갈 수 있습니다.
즉, 리턴을 여러번하며, 마지막 리턴한 지점부터 코드가 시작됩니다.
- 사용법은 함수명 앞에 *를 붙입니다.
- yield 키워드를 사용하여 리턴합니다. (함수를 끝내지 않음, done:false)
- return 키워드는 아예 함수를 종료합니다. (done: true)
function* test() {
let a = 1;
while (true) {
if (a === 3) {
return a;
}
yield a++;
}
}
const i = test();
// next 메소드를 통해 함수를 실행한다.
// 언제까지? yield나 return이 나올 때까지!
console.log(i.next()); // Object {value: 1, done: false}
console.log(i.next()); // Object {value: 2, done: false}
console.log(i.next()); // Object {value: 3, done: true}next 메소드를 통해 리턴된 값은 object 형태로 value값과 done:진행여부가 있습니다.
done 플래그를 통해 계속 진행할지를 알려주고 있습니다.
yield가 되면 잠시 멈춤, 그치만 안에 내용은 계속 유지가 되고 있습니다.
🤔 generator 언제사용하나??
안과 밖에서 서로 커뮤니케이션할 때 사용합니다.
내부 상태값을 계속 유지하고 있어 안과 밖에서 서로 핑퐁한다는 느낌으로!!!
const delay = ms => new Promise(resolve => {
setTimeout(() => { resolve(); }, ms)
});
function *main() {
console.log('시작')
yield delay(3000)
console.log('3초 뒤')
}
const iter = main();
const { value } = iter.next(); // value값은 promise가 된다.
value.then(() => {
console.log('promise 완료' )
console.log(iter.next())
})콘솔에는 어떻게 찍힐까.?
시작 -> (3초 뒤에..) -> promise 완료 -> 3초 뒤
위 코드를 보면 마치 동기적 코드인것 처럼 보입니다.
즉, 이 컨셉을 적용한게 redux-saga라고 합니다.
async/await는 promise에 최적화되어 있으며 구현은 generator기반으로 되어있습니다.
*키워드 => async, yield => await
