들어가며😃

알면 알수록 중요한 개념들이 쏟아져 나오는 요즘이다. 개발을 시작할 당시엔, 인강에서 강사가 치는 코드를 따라하며 개발을 하다 보니 함수를 왜 저렇게 만들지? 에 대해 생각하기 보단, 우선 코드를 따라치고 코드 자체를 이해하는게 우선이였다. 유지보수를 좋게 하기 위해 리팩토링, 가독성과 재사용성을 높이는 클린코드를 작성하는 것이 중요하다 해도 아 그렇구나~ 하고 넘어갔었다. 하지만 이번에 관심사 분리라는 소프트웨어 개발의 원칙을 배우고 나니, 왜 코드를 분리해야하는지, 유지보수가 왜 중요한지 정확히 알게 되었다. 정말 중요한 개념을 배웠고, 앞으로 내가 이 원칙을 잘 지켜 코드를 잘 짤 수 있도록 개념을 정리해보는 오늘의 포스팅이다.



관심사의 분리(Separation of Concerns)란?

관심사란 하나의 모듈이 수행하고자 하는 목적이다. 그리고 분리란 각 모듈들이 한번에 여러 관심사를 처리하지 않고 하나의 관심사만 처리하도록 하는 것이다. 즉, 하나의 함수는 하나의 기능만 하라는 것이다.

관심사를 왜 분리하는 건데? 🤷🏻‍♀️
관심사를 분리하면 코드에 하나의 목적만 가지게 된다. 그렇다는 말은 코드가 수정될 이유가 한가지만 존재하게 되는 것 이다. 예를 들어 마이페이지 편집 페이지에 인증/인가 로직이 있고, 닉네임 수정에 대한 유효성 검사 로직이 있다고 하자. 그런데 만약 인증/인가와 유효성 검사에 수정사항이 생기면 컴포넌트의 코드를 이리저리 살피고, 각 기능을 담당하는 코드를 찾고, 수정해줘야한다. 그런데 인증/인가와 유효성 검사 로직이 마이페이지 편집 부분에만 있을까? Never…. 그렇단 말은 수정해줘야 할 컴포넌트를 일일이 찾아다니며 하나하나 수정해줘야한다는 것이다. 그렇기 때문에 인증/인가, 유효성 검사를 다루는 핵심 모듈을 하나로 제한하고, 나머지에서 불러와 사용하는 형식으로 설계가 되어있다면 추후 기능에 변경이 생겼을 때, 해당 모듈만 수정하면 되기에 변화에 유연하게 대응할 수 있게 되는 것이다.

소프트웨어는 계속해서 변화한다. 하드웨어는 말 그대로 hard => 어렵다. 뭐가? 수정하기가.
반면, 소프트웨어는 상대적으로 수정하기 쉽다. 단순히 코드의 일부만 수정하면 소프트웨어의 동작을 변경할 수 있다. 이말은 즉슨, 소프트웨어는 변화에 유연하게 대응할 수 있어야한다 라는 말이다. 만약 소프트웨어 변경이 힘들다면 이건 하드웨어나 마찬가지인 것이다. 이러한 이유로 소프트웨어는 변화에 필연적이며, 좋은 소프트웨어일수록 기존의 기능을 수정하는 것과, 기능을 확장하는 것을 잘 할 수 있어야한다. 이것이 바로 그 중요한 ‘유지보수’ 개념인 것이다. 그래서 관심사를 분리하는 것 = 유지보수를 잘 할 수 있게 되는 것 이기 때문에, 관심사의 분리는 소프트웨어를 만드는 프로그래밍에서 가장 기본이 되는 원칙인 것이다.



비슷한 개념

  • 단일 책임 원칙(Single Responsibility Principle) : 똑같은 말이지만, 관심사라는 용어 대신 책임이라는 용어를 쓴다.
  • KISS(Keep it Simple, Stupid) : 여기서 Stupid란 멍청이가 아니라 단순하다는 의미로, 각 모듈을 간단하고, 단순하게 만들라는 것이다. Simple is the Best 는 역시 진리다,,



리액트에서 관심사를 분리하는 법 - Custom hook

리액트자체가 UI를 구축하기 위한 라이브러리로써, 리액트가 가지는 가장 핵심적인 관심은 UI와 UI를 변경시키는 로직이 될 것이다. 그래서 초기에는 Presentational - Container 패턴이라고해서, 오로지 UI를 다루는 프레젠터 부분과 로직만을 다루는 컨테이너로 컴포넌트를 두 계층으로 분리시키는 방법이 유명했다. tmi_나도 이 기법으로 리액트를 입문했다.
하지만 Hook이 등장하고 나서는 해당 패턴을 많이 사용하지 않는다. 왜냐하면 Custom Hook이란 기법이 더 효율적으로 관심사를 분리할 수 있다고 판단되었기 때문이다.

커스텀 훅이란 리액트에서 기본적으로 제공하는 훅들(useEffect, useState)을 이용해서 만든 함수이다. 그래서 이름을 use로 시작하는게 관례이다. 커스텀 훅을 사용하여 로직을 분리하면, 커스텀훅 하나를 여러 컴포넌트에서 호출하여 재사용할 수 있고, 컴포넌트 자체는 간결하게 유지할 수 있다. 그래서 리액트에서는 관심사를 커스텀 훅으로 분리하여 코드를 이해하기 쉽고 유지 보수하기 쉽도록 하는 것이다.





Computer Science 지식을 공부할수록 리액트’만’ 배워서는 뭐,,개발은 할 수 있겠지만 개발을 ‘잘’ 할 수 없다는 것을 깨닫게 된다. 코드를 작성하는 것는 개발의 정말 작은 일부분일 뿐이라는 것,, 코드를 작성하는 행위 하나하나에도 Computer Science의 원리와 개념이 내포되어 있다는 것을 배운다. 아직 배울것이 많지만 이번 공부를 통해 이전보다는 더 원칙에 기반한 코드를 짤 수 있는 사람이 되었고, 리액트에 커스텀 훅이 왜 있는지, 왜 사용하는지 정확히 알고 사용할 수 있는 사람이 된 것 같다. 오늘은 뿌듯함을 느끼기보단 반성을 열심히 했다. 열심히 공부하자,,,아자!🥹