바닐라 자바스크립트로 컴포넌트를 만들어보는 연습을 하고 있었다.
this.searchInput = new SearchInput({
$target: document.querySelector('#search-keyword'),
onSearch: this.setEvent,
searchHistory: this.searchHistory,
});해당 코드는 App.js 모든 컴포넌트의 상위 컴포넌트에서 SearchInput 컴포넌트와 SearchHistory 컴포넌트를 주입받아 사용하고 있는 부분이다.
유저가 입력한 검색어가 searchHistory 컴포넌트의 state 데이터로 활용되기 때문에 searchInput을 생성할 때 searchHistroy 객체를 넘겨주었다.
하지만 이 방법은 컴포넌트끼리의 의존성을 높이는 문제점이 있다.
객체들과 협력 그리고 의존성
객체들은 공동의 목표를 위해 서로 협력할 수 있다.
하지만 객체 각각의 자율성은 보장되어야한다.
요즘 재밌게보고 있는 객체지향의 사실과 오해에서 적절한 예시가 나온다.
앨리스라는 객체에게 음료를 마신다라는 행동을 하게 되면 앨리스와 연결되어있는 음료객체에서는 음료의 양을 줄인다라는 행동을 하게 될 것이고 그렇게 되면 음료의 양 즉, 상태는 변화하게 된다.
하지만 앨리스는 음료를 마신다라는 행동을 할 뿐이지 음료가 어떻게 줄지 아니면 줄지 않을지는 모른다. 그저 음료객체에게 명령을 하면 그에 맞는 행동은 음료객체 알아서 정하게 되는것이다.
해당 예시가 이해를 돕는데 아주 중요한 역할을 했다.
searchInput은 searchHistory에 대한 모든 것을 알 필요가 없다. searchInput은 검색어를 입력하고 검색어를 저장하라는 명령만 내리면 된다. 검색어를 저장할지 말지는 searchHistory에서 결정한다.
다만 우리의 목표를 위해서는 히스토리에 검색어를 저장해야겠다.
해결
this.searchInput = new SearchInput({
$target: document.querySelector('#search-keyword'),
onSearch: this.setEvent,
checkDuplication: this.searchHistory.checkDuplication,
});검색어가 히스토리에 저장되기 이전에 이미 히스토리에 있는 정보인지를 확인하는 checkDuplication이 있다.
searchInput은 그저 중복을 확인해달라는 명령만 던지면 된다.
그에 대한 구현사항은 searchHistory에 있다. searchHistory가 알아서 중복체크를 해줄것이다.
checkDuplication = (newData) => {
if (this.state.find((data) => data === newData)) {
return this.state;
}
if (
this.state.length === 5 &&
!this.state.find((data) => data === newData)
) {
this.deleteHistory();
}
this.setState([...this.state, newData]);
};searchHistory에서 중복을 체크해주는 메서드이다. 중복체크 후 알아서 히스토리에 데이터를 저장할 것이다.
아니면 checkDuplication 말고 searchInput에서 onAddHistory라는 명령을 던지면 searchHistory 안에서 알아서 중복을 체크하고 데이터를 집어넣는 식으로 구현해도 된다.
오해하지 말자
객체의 의존성을 분리하는 것은 객체끼리 떨어지게 납두는 것이 아니다.
객체는 협력해야한다. 협력해서 문제를 해결하고 목표에 나아가야한다.
다만 이전 코드처럼 다른 객체에 직접 접근해서 상태를 변경한다는 식의 코드는 객체의 자율성을 해치고 여러가지 문제점을 일으킬 수 있다는 것이다.
그렇기 때문에 명령만 던지자.
그에 맞는 행동은 객체가 알아서 할 것이다.
