728x90

8주 3일차 - StatesAirline Client

1. 배운 것

객체 디스트럭처링 할당을 함수의 매개변수에 사용하기
단일 연결 리스트

2. 내용 정리

순수함수는 외부환경에 영향을 받거나 영향을 끼치지 않는다. 따라서 외부의 변수를 함수 안에서 사용하는 함수는 반환값이 외부 변수의 값을 변경시키지 않더라도 비순수함수이다.

객체 디스트럭처링 할당 - 함수의 매개변수에서 사용 예시

function func1(filteredBy = {}) {
    if (filteredBy.num) return filteredBy.num;
    if (filteredBy.str) return filteredBy.str;

    return filteredBy;
}

let obj1;
func1(obj1); // {}

let obj2 = {num : 1};
func1(obj2); // 1

let obj3 = {str:'문자'}
func1(obj3); // '문자'

줌세션

sideEffect가 있는 비순수함수는 useEffect 안에 넣어라.
useEffect의 clean up 다시 정리하기.
useEffect 안에서 종속성 없이 콜백함수가 실행 될 때와 컴포넌트 안에서 함수가 실행될 때 차이점이 있나요 ?
- 최초 렌더링 진행중에 비동기 함수가 있으면 버그가 발생할 수 있다. 따라서 컴포넌트 안에서 실행하지 말고 렌더링이 종료되고 useEffect 안에서 실행시키도록 해야 한다.

Side Effect

부수 효과 : 외부의 상태에 의존하거나 외부의 상태를 변경하는 것.
외부 상태에 의존: 외부에 있는 변수의 값에 따라 함수의 결과가 달라짐
외부 상태를 변경: 외부에 있는 변수의 값을 함수의 결과가 변화시킴.

네트워크 요청, 타이머(fetch, setTimeout) 등은 대표적인 비순수 함수이다. 리액트에서는 이러한 side effect가 있는 코드를 useEffect 안에서 실행시켜 최초 렌더링 단계에서 오작동을 방지함. 하나의 컴포넌트는 하나의 일만 하도록 하기 위함이다.

리액트 컴포넌트의 생명주기

Rendering 단계 : 리액트 컴포넌트가 렌더링(생성)되며 side effect가 없는 단계
Commit 단계 : Dom 업데이트가 끝나고 effect hook이 실행됨.
Cleanup 단계 : useEffect 안에서 실행된 함수를 리턴값으로 후처리.

연결 리스트

배열과 연결 리스트는 선형 자료구조이다. 임의의 위치에 원소를 추가하거나 제거해야 할 경우 연결 리스트를 사용하면 좋다. 대표적인 사용 예시는 메모장과 같은 텍스트 에디터이다.
배열과의 차의점

임의의 위치의 원소를 찾거나 변경하려면 O(n). → 배열: O(1)
임의의 위치의 원소를 추가/제거 하려면 해당 원소의 주소를 알고있을 경우에 한하여 O(1). → 배열: O(n)

종류

단일 연결 리스트: 각 원소가 자신의 다음 원소의 주소를 가지고 있음.
이중 연결 리스트: 각 원소가 자신의 이전 원소, 다음 원소의 주소를 가지고 있음.
원형 연결 리스트: 마지막 원소가 맨 처음 원소와 연결되어 있음. 단일 연결 리스트일수도 있고 이중 연결 리스트일 수도 있음. 둘 다 가능.

연결 리스트 - 단일 연결 리스트

단일 연결 리스트는 각 노드가 현재 노드에서 다음 노드로 한 방향으로만 연결된다.
시작 원소와 끝 원소를 가리키는 포인터를 가지고 있다.

// * 단일 연결 리스트
// * 단일 연결 리스트의 각 노드는 두개의 필드로 구성되어 있다.
// * 1. 데이터 필드 2. 다음 노드의 링크를 담은 필드

// 의사코드
const linkedList = {
  head: {
    value: 15,
    next: {
      value: 3,
      next: {
        value: 94,
        next: {
          value: 50,
          next: null,
        },
      },
    },
  },
};

// 구현 예시
class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class SinglyLinkedList {
  constructor() {
    let init = new Node('head');
    this.head = init; // 시작 노드
    this.tail = init; // 마지막 노드
    // this.head = null;
    // this.tail = null;
    this.currentNode = undefined; // 현재 노드
    this.countData = 0; // 현재 데이터 수
  }
  // length 인스턴스 메서드: 현재 데이터 개수 확인
  length() {
    return this.countData;
  }
  // append 인스턴스 메서드: 마지막에 요소 추가
  append(data) {
    let newNode = new Node(data);
    this.tail.next = newNode; // 노드 생성 시 해당 노드가 다음 노드를 가리키도록 함.
    this.tail = newNode;
    this.countData += 1;
  }
}

const list = new SinglyLinkedList();
list.append(1);
list.append(15);
list.append(24);
list.append(7);
list.append(85);
console.log(list.length()); // 5
console.log(list); // SinglyLinkedList {head: Node, tail: Node, currentNode: undefined, countData: 5}
// countData: 5
// currentNode: undefined
// head: Node {data: 'head', next: Node}
// tail: Node {data: 85, next: null}

참고 자료

딥다이브 p 641 객체 디스트럭쳐링 할당
제주코딩베이스캠프 연결리스트 유튜브 강의 링크

3. 리뷰

3.1 좋았던 점

객체 디스트럭처링 할당을 매개변수에 사용 → 내가 몰랐던 게 뭐였는지 찾아내고 스터디원분께 설명까지 해보았다.

3.2 아쉬웠던 점

막히는게 있을 때 너무 쉽게 포기하지 않았나 생각이 든다.

3.3 notes

소중한 시간 소중하게 쓰자.

4. 할 일

제코베 js100제(앞으로 알고리즘 스터디 진도와 병행)
til양식 개편
토이프로젝트(주말)