11주 1일차 - react custom components 리팩토링, BFS

11주 1일차 - react custom components 리팩토링, BFS

1. 배운 것

• css - transition
• onFocus, onBlur
• 데일리코딩 8번 - BFS 트리 순회
• 종합 퀴즈 7번 - styled component 재사용

2. 내용 정리

• onFucus: 포커싱 된 경우 이벤트 설정
• onBlur: 포커싱 해제된 경우 이벤트 설정

데일리코딩 8번 - BFS 트리 순회

let bfs = function (node) {
  let queue = [node]; // root(시작 노드)를 배열에 넣은 상태로 큐를 선언, 초기화.
  const visitedNodeValues = []; // 방문한 노드의 정보를 담을 배열 선언.

  while (queue.length > 0) { // 큐에 요소가 있는 한 반복문 실행

    const currentNode = queue[0]; // 현재 노드
    queue.shift(); // Dequeue 시키기 (큐: 선입선출)

    visitedNodeValues.push(currentNode.value); // 현재 노드의 value를 방문한 노드의 value를 담는 배열에 추가

    currentNode.children.forEach((child) => queue.push(child)); // 탐색
  }
  return visitedNodeValues;
};

// 이 아래 코드는 변경하지 않아도 됩니다. 자유롭게 참고하세요.
let Node = function (value) {
  this.value = value;
  this.children = [];
};

// 위 Node 객체로 구성되는 트리는 매우 단순한 형태의 트리입니다.
// membership check(중복 확인)를 따로 하지 않습니다.
Node.prototype.addChild = function (child) {
  this.children.push(child);
  return child;
};

• 참고) 이진 트리 BFS 구현 의사코드 : 자료구조 큐 사용.
  1. 큐 변수 = [ ], 방문한 노드의 value를 저장하는 변수 = [ ] 변수 2개를 빈 배열로 선언.
  2. 시작하는 노드(root)를 큐에 넣는다.
  3. 큐 안에 값이 있는 한 반복문을 계속 실행하면서
     1. 큐에서 현재 노드를 Dequeue하고 현재 노드의 value를 노드의 value를 저장하는 변수에 추가.
     2. 만약 Dequeue 된 현재 노드가 left 프로퍼티를 가지고 있다면 큐에 추가한다.
     3. 만약 Dequeue 된 현재 노드가 right 프로퍼티를 가지고 있다면 큐에 추가한다.

종합 퀴즈 2번

• CSS-in-JS 방법으로는 렌더링 속도는 느리다. css코드를 js로의 변환과정을 거쳐야 함.
• 따라서 css 작성 후 js 코드로 변환하는 등의 추가적인 작업이 필요하므로 css 작성을 위해 여러 라이브러리가 필요하다.

종합 퀴즈 3번

• styled components 라이브러리 사용 시 전역 스타일 컴포넌트 <GlobalStyle /> 컴포넌트는 자식 요소를 가져선 안된다. 렌더링이 되지 않음. (createGlobalStyle does not render chilren.)

종합 퀴즈 7번

• styled components 에서 컴포넌트 재사용시 () 소괄호로 감싼다. ex) const closeBtn = styled(Button)…;

줌 세션 - react custom component 과제 해설

• npm start 안하고도 storybook을 켠 상태만으로도 구현 확인이 가능하다. 코드는 ide에서 작성, 결과는 storybook으로 확인 가능. (storybook에 해당 컴포넌트를 등록한 경우에만)
• 이벤트 버블링: 자식 이벤트 발생이 부모 이벤트까지 영향을 끼침. 자식에서 e.stopPropagation(); 메소드를 실행하여 방지 가능.
• & : 둘 다 가진 요소(ex: 동적으로 추가한 클래스명)
• : 자식 선택자 (직계 자식만 선택. 자식의 자식은 x)

더 공부할 것

• BFS 트리 순회 https://about-tech.tistory.com/entry/Algorithm-BFS-Queue-자바스크립트primePassword-문제-구현
• 백준 1260번 풀이 https://jaekwan.tistory.com/113