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