[TIL] Day-28

• App에서 모든 상태를 중앙 관리 하기 때문에 자식 컴포넌트 끼리 의존성이 없다.
• 필요한 기능이 있다면 컴포넌트만 추가하고 부모의 상태를 이용하면 된다.
• 자식의 상태에 어떤 값이 들어가는 지에 따라 화면이 그려진다.
  → 어떤 상태가 바뀌면 그 상태를 사용하는 컴포넌트가 동시에 렌더링이 되도록 해야 함
• 자식들은 부모의 상태를 물려받아서, 부모의 상태가 변하는 것에 따라 자식들이 변화되도록 해야함 → 흐름을 이해해야 함
• 부모의 어떤 상태를 바꾼다는 것은 그 상태를 사용하는 자식 컴포넌트를 바꾼 상태대로 화면에 다시 그리는 것(렌더링)
• initialState는 컴포넌트가 복수의 데이터를 사용할 때만 쓰는 듯 하다.

• 조건에 따라 보여야 하는 컴포넌트는 display속성을 상태 값(boolean)에 따라 block / none으로 지정해주면 된다.

$loading.style.display = this.state ? 'block' : 'none'; 

• target의 상위 부모에 접근하고 싶으면 Closest를 사용해 먼저 꺼내 온다.

$breadcrumb.addEventListener('click', (e) => {
    const $breadcrumbItem = e.target.closest('.Breadcrumb__item');
    const { id } = $breadcrumbItem.dataset;
    onClick(id);
  });

• root노드와 폴더, 파일 노드를 구분은 data-id를 부여 유무로 할 수 있다. → 클릭 이벤트 발생 시 id가 넘어오는가?

const nextPaths = id ? [...this.state.paths] : []; 

• 인덱스 찾기와 요소 찾기

const pathIndex = nextPaths.findIndex((path) => path.id === id); // 클릭된 id랑 같은 데이터의 인덱스를 찾는다.
const node = this.state.nodes.find((node) => node.id === id); // 클릭된 요소와 같은 id를 가진 데이터를 찾는 것

• 참조형인 state는 각 요소를 변경하는 것이 아닌, 값 자체를 재할당 해야한다. → 기존의 값을 깊은 복사해서 원하는 대로 변경 후 그 값을 state에 재할당 해야함

• 서버 요청은 없는 데이터가 필요할 때만 한다. 현재 state로 할 수 있는 일은 최대한 state를 이용해서 한다.