과제

클래스형 컴포넌트 TodoList. li로 뿌려준다.

map()을 이용해서 li를 뿌려준다.
이때 각각의 상태를 업데이트 해야하는데, 골머리를 썩었다.
어떻게 고유한 li를 집어줄 것인가?
문득 리액트에서 뭣모르고 사용했던 map이 생각났다.
속성중에 key가 있었는데, 지정하면 고유한 식별자로서 리액트가 구분하기 더 쉬워진다했다.
알기론 배열의 인덱스는 사용하면 안된다.

오잉?
리액트는 기본적으로 index를 key로 사용한다..!!!

?!

그런데 왜 사용하면 안되는지, 이번파트를 마치고 찾아보겠다

일단 index를 li태그를 map으로 뿌려줄때 data속성을 사용하여 뿌려주었다.

 ...map(({ text }, idx) => `<li data-key=${idx}>${text}</li>`)

//가져올때는 이렇게
e.target.dataset.key

과제니까 나머지 코드는 공개하지 못하지만...깃허브에!
아무튼 잘 작동한다.

관찰자 패턴 vs 부모에게 몰빵

형제 컴포넌트에서 state가 변경되었을때 알아차리는 방법을 생각해보았다.
구조는 App밑에 todoList와 todoCount존재할 때.

1. 관찰자패턴
2. 부모컴포넌트가 상태를 가짐
3. contextApi 사용.

이왕이면 직접 구현하는게 좋아보이니 3번을 제외한 두가지 방식을 사용할 수 있을 것 같다.
근데 문제가 있듬

• 강의보고 따라친 코드는 각 컴포넌트마다 appendChild()를 이용하여 App 아래에 붙인다.
  따라서 App에서 renderChild()를 반복하게 되면, 인스턴스가 반복생성됨.
• todoList에 직접 접근이 불가능함. => 정확히 무슨 뜻인지 모르겠다 ㅎㅎ...

흠.
일단 두가지 방식을 다 사용해서 만들어봐야 알것같다...
추가로 아예 html에 부모로 사용할 태그를 선언해두는것도 괜찮을것 같다...

---

Observser Pattern vs pub-sub pattern

사실, 자세히 모르고 사용했다. 이러한 패턴이 존재하고, 어떻게 쓰이는지 두루뭉술하게 알고 썻다.
그래서 커밋 메시지도 pub-sub패턴이라고 보냈다.

둘의 차이는 뭘까?

어떤곳에서는 같은 패턴이라 하고
어떤곳에서는 다른 패턴이라 한다.

분명한건, 공급하는 객체와 구독하는 객체가 있다는 것이다.

출처

이벤트 채널을 따로 만드냐 안만드냐의 차이정도인가...

pub-sub은 비동기, observer은 동기적으로 많이 사용한단다.
그럼 js에선 pub-sub이 더 맞는것 같기도하고?

디자인 패턴에대해 나중에 자세히 알아봐야 할것 같다.
어차피 방법론이긴 하지만, 알아두면 좋지!

---

비동기

비동기는 동작원리 시리즈에서 따로 정리하겠지만, 강의에서 짚고 넘어간 포인트를 알아보자.

• 비동기 : 특정 연산이 끝날때까지 실행을 멈추지 않고 다음 코드를 실행함.
  addEventListener, setTimeout, setInterval, XHR 등.

이중 XHR에 대해 조금만 더 알아보자. ajax의 전신.

const xhr = new XMLHttpRequest();
xhr.addEventListener("load",(e) => {
...성공/실패 했을때의 콜백
})
xhr.open('GET',url);
xhr.send();

간단하다.

하지만 일반적인 콜백패턴은, 중첩해서 사용한다. 최소 두세번.
이를 콜백 지옥이라 함.

callback(){
	callback2(){
    	callback3(){
          callback4(){
        	//....
          }
        }
    }
}

XHR은 비동기를 포기하고 동기적 방식으로 콜백지옥을 없애버릴수도있다.
=> 처리되는동안 브라우저가 멈춘다...안티패턴임

비동기 다뤄보기

api를 불러올때, 초보 개발자들은 렌더링을 잘못한건지 api콜을 잘못한건지 구분하기 어려움.
따라서 더미 데이터를 활용하여 먼저 렌더링 후 api콜.
또한, api콜관련 처리 기능은 api.js에 몰아넣는다.