command and query

커멘드는 뭐고 쿼리는 뭐여..

일단 회사에서 스터디 하다가 역할 분리 관련해서 얘기가 나왔는데, 그 때 CQRS 패턴에 대해서 얘기가 나왔다. 하지만 CQRS는 찾아보니 DB에서 데이터를 찾을 때 Query(조회)와 Command(변경)을 나누어서 처리하는 기법이더라.
그런데, 프론트에서도 비슷한 경우가 있는 것 같아서 생각해보았다.

프론트에서 어따 써먹어요..

지금 생각나는건, 일단 프론트도 백엔드를 통해서 처리하거나 state같은 값을 보면 이것들도 데이터를 변경하고 조회한다.
그런데, 가끔 코드를 보면 이 두가지가 동시에 되어 있는 경우가 있다.
유저 리스트에서 유저를 변경하고 나서 response값으로 변경된 유저 리스트를 준다거나..그런 경우 말이다.
이러면 코드를 볼 때, 다음과 같은 일이 일어난다.

???: 아니 여기 코드랑 API 보니까 분명 유저 리스트 저장인데 response는 뭐가 오길래 이거로 state를 저장하지?

그렇다. 정확한 역할 분리를 위해서 프론트엔드 개발자도 코드를 짤 때 Command(변경)와 Query(조회)로 나누는 것이 좋다.
뭐..백엔드 개발자와의 원만한 합의가 필요하겠지만

Before

const [users, setUsers] = useState([]);
function addUser(user) {
  const { data } = fetch.put('url/user', user);
  setUsers(data);	
}

function addButtonClickEvent() {
  //  ...user 가져오는 코드
  addUser(user);
}

After

function addUser(user) {
  fetch.put('url/user', user);
}

function getUsers() {
  fetch.get('url/user');
}

function addButtonClickEvent() {
  //  ...user 가져오는 코드
  addUser(user);
}