[Step 4 실습] 옵저버 패턴 학습 (전진우) #29
Conversation
| function debounce(func) { | ||
| let frameId; | ||
| return function () { | ||
| if (frameId) { | ||
| cancelAnimationFrame(frameId); | ||
| } | ||
| frameId = requestAnimationFrame(func); | ||
| }; | ||
| } |
There was a problem hiding this comment.
| function debounce(func) { | |
| let frameId; | |
| return function () { | |
| if (frameId) { | |
| cancelAnimationFrame(frameId); | |
| } | |
| frameId = requestAnimationFrame(func); | |
| }; | |
| } | |
| function debounce(func) { | |
| let frameId; | |
| return () => { | |
| cancelAnimationFrame(frameId); | |
| frameId = requestAnimationFrame(func); | |
| }; | |
| } |
바로 cancel 해버려도 되지 않을까요!?
이름은 debounceOneFrame 처럼 조금 더 명시적으로 지어주면 좋을 것 같아요!
| if (value !== null && typeof value === "object") | ||
| return observable(value); |
There was a problem hiding this comment.
오... 객체면 다시 한 번 씌워주는군요 ㅎㅎ 좋습니다 👏👏👏
| if (value !== null && typeof value === "object") | ||
| return observable(value); | ||
|
|
||
| if (currentObserver && typeof observers !== "undefined") { |
There was a problem hiding this comment.
observers가 undefined일 수가 있나요?
| this.updateState(); | ||
| this.render(); |
There was a problem hiding this comment.
updateState에서도 render를 실행하고 있기 때문에, 컴포넌트가 생성되는 시점에 render 함수가 총 두 번 실행될 것 같아요!
| observe(() => { | ||
| console.log("ItemsView 컴포넌트에서 옵저버..."); | ||
| console.log(this.$props); | ||
| }); |
There was a problem hiding this comment.
- observable을 통해서 만든 객체가 observe내에서 사용 되고,
- observable의 값이 변경 되면 observe를 실행한다
이런 흐름인데 지금은 observe에 observable로 씌워진 친구가 없어서, updateState는 최초에 1회만 실행되겠네요!
다만 컴포넌트가 생성되는 시점에 updateState를 실행하기 때문에, 이 컴포넌트의 상위 컴포넌트가 렌더링되는 경우에만 다시 생성되지 않을까 싶어요.
| template() { | ||
| const { todoItems } = this.$props; | ||
|
|
||
| return ` | ||
| <ul> | ||
| ${todoItems | ||
| .map( | ||
| ({ done, name, updateState }, index) => ` | ||
| <li data-id="${index}"> | ||
| <input type="checkbox" ${ | ||
| done ? "checked" : "" | ||
| } id="toggle-btn" ${updateState ? "class='updated'" : ""}/> | ||
| <input type="text" ${ | ||
| done ? "class='todo checked'" : "class='todo'" | ||
| } id="title-${index}" value="${name}" ${ | ||
| updateState ? "" : "readOnly" | ||
| } /> | ||
| <button class="btn" id="update-btn">${ | ||
| updateState ? "완료" : "수정" | ||
| }</button> | ||
| <button class="btn deleteBtn" id="delete-btn">삭제</button> | ||
| </li>` | ||
| ) | ||
| .join("")} | ||
| </ul> | ||
|
|
||
| `; | ||
| } |
There was a problem hiding this comment.
곰곰이 생각해보면, ItemsViews 컴포넌트는 클래스로 만들 필요 자체가 없는거죠..!
단순하게 함수로 표현해도 되지 않을까요?
| export default class ItemAppender extends Component { | ||
| template() { | ||
| return ` | ||
| <div class="input-container"> | ||
| <input type="text" placeholder="새로운 할 일을 입력해주세요" id="append-input" class="append-input"/> | ||
| <button class="btn" id="append-btn">추가</button> | ||
| </div> | ||
| `; | ||
| } | ||
| } |
There was a problem hiding this comment.
앞선 내용과 동일합니다!
state를 사용하고 있지도 않고,
props를 사용하고 있지도 않기 때문에 그냥 함수로 만들어서 사용해도 무방할 것 같아요~
3주차 피드백 해주신걸 늦게 확인해서 해당 내용은 5주차에 적용해서 올려보겠습니다!!!
🎯 완료한 Task
옵저버 패턴 어플리케이션 적용
피드백
학습 시간
몰입
미션