시작하면서,
Javascript is EveryWhere 2020 에서 당근마켓 원지혁님이 발표하신 Declarative에 대해 살펴보는 시간을 갖게 되었습니다.
Thinking in Relay에서 리액트 컴포넌트는 "선언적" 이다라고 말했습니다.
컴포넌트는 선언적이다: 컴포넌트는 개발자로 하여금 어떻게(How) UI를 그려야 할지에 대한 고민없이 주어진 상태에 기반해서 어떤(What) UI가 생겨야하는지 적기만 하면 되도록 도와준다.
그렇다면 Declarative에 대해 React, express 예시를 통해서 생각해봅시다.
Declarative에 대해 고민하기
Declarative는 "선언"을 의미합니다.
뭘 선언하지?
예를 들면 우리는 변수를 만들때, char, int, let, const 등 변수를 선언 합니다.
이때, 변수는 어떤(What)에 해당합니다. 우리는 변수를 어떻게 쓸지 고민을 하는 대상으로 보기 때문이죠.
이제 이 변수를 통해 어떻게(How) 가공할 지 고민을 하게 됩니다. Imperative(명령)을 하게 되는 것이죠.
React에서 component를 보면 props를 통해 상태, 컴포넌트 등을 전달해주고 있습니다.
return문 안에서는 어떤(What)걸 보여줄지 나타내고 상태를 받아와 함수를 통해 가공을 하고 있죠.
발표자 분께서 express 예시를 통해서 설명을 추가적으로 해주셨는데
미들웨어에서 주로 처리할 때, 아래와 같이 함수를 넣어버리는 경우가 많을 것입니다.
app.use(redirectIfNotLoggedIn);
그러면 우리는 미들웨어를 확인하기 위해서 redirectIfNotLoggedIn까지 직접 파일을 찾아가 함수를 보게 되겠죠.
이 찜찜함을 해결하려고 발표자분은
app.use(redirectIf(req=>!req.user, '/login')) 과 같이 작성하셨습니다.
여기서 보면 redirectIf와 NotLoggedIn을 분리했고 notLoggedIn에 대한 사항을 함수에서 바로 표현하면서 명료하다고 보여집니다.
결론
현재 개인적으로 진행하는 프로젝트에서도 의미를 알기 위해서 끝까지 수직으로 내려가서 함수를 확인하는 코드로 되어있는 부분이 있는데 발표자님처럼 중간을 구현하고 이를통해 option으로 구분할 수 있도록 작성해보는 시간을 가져보려고 합니다. 왜냐하면 redirectIf도 경우가 다양한 option이기 때문이죠.
코딩을 하다가 Declarative에 대해 다른 분들도 생각해보는 시간이 있으면 좋겠습니다.
참고
