[TIL] 0513

yoon Y·2022년 5월 13일
0

2022 - TIL

목록 보기
84/109

과제 전형 연습을 위해 프로그래머스 데브매칭 때 출제되었던 검색 앱을 구현했다. 기존에 만들어놓은 클래스 기반 베이스 컴포넌트로 만들었는데, 문제점을 발견했다. 특정 자식 컴포넌트만 부분 렌더링할 수 있도록 개선을 했지만, 부모의 상태가 여러 개이고, 각 상태가 각 자식 컴포넌트와 매칭되어있을 때에도
상태 하나가 바뀌면 그걸 안쓰는 컴포넌트까지 리렌더링되어서 매우 비효율적이었다. 구독 패턴을 도입할 필요성을 느꼈다.

  setup() {
    this.state = {
      searchData: [],
      selectedWords: [],
    };
  }
  
  ...
  
  reRender() {
    const { searchData, selectedWords } = this.state;
    if (selectedWords.length > 5) {
      selectedWords.shift();
    }
    this.SelectedList.setState({ items: selectedWords });
    this.WordList.setState({ data: searchData });
  }

구독 패턴에서 쓰인 개념들 학습

객체의 getter, setter

private 변수를 지정한 후, 이 변수에 접근하기 위해 getter, setter를 이용한다.
-> 속성의 원본을 지켜야 할 때

get: 속성 접근 시 호출할 함수를 바인딩
-> 속성 접근 시 그 값에 그대로 접근하는게 아니라 함수를 통해 어떤 로직을 실행시켜 변경된 값으로 접근할 수 있다
실제 프로퍼티이름과 get으로 지정한 이름은 달라야한다
실제 프로퍼티를 어떤 식으로 변경한 속성인 것

getter, setter를 쓰지 않고 변수에 직접 접근할 시의 문제점

생성자를 통한 프로퍼티 속성은 객체가 처음 생성될 때만 실행되어 만들어지기 때문에 생성 이후 프로퍼티를 접근해서 수정할 시 처음 의도한 것과 다른 값을 얻을 수 있다

setter
하나의 속성이 다른 속성에 영향을 끼칠 경우 이런 외부 영향까지 컨트롤하기 위한 것.

getter
1. setter를 거치지 않고 외부 영향을 끼칠 수 있는 속성을 직접 바꾸지 못하도록 보호.
2.또한 원본 그대로가 아닌, 원하는 형태로 변경된 속성 값을 사용하고 싶은 경우 사용.

class Time {
  constructor(start, end) {
    this._start = start;
    this._end = end;
    this._duration = end - start;
  }
  
  setStart(newStart) { // 연관된 속성까지 바꿔준다.
    this._start = newStart;
    this._duration = this._end - this._start;
  }
  
  getStart() { // setter를 거치지 않고 수정되지 않도록 보호한다.
    // (start만 바꾸면 duration까지 수정해줘야하기 때문에)
    return this._start;
  }
}
const time = new Time(0, 20);
time.setStart(5);
console.log(time.getStart());

위의 경우 처럼 특정 목적이 있는 경우 설정한다.

Object.defineProperty

객체의 프로퍼티를 접근하거나 수정할 때(재할당), 특정 로직을 포함시킬 수 있게 하는 메소드.
get과 set으로 설정

https://mygumi.tistory.com/161
https://blog.woolta.com/categories/3/posts/143

profile
#프론트엔드

0개의 댓글