관심사의 분리

[ReactJS] 관심사의 분리와 Custom Hook

관심사의 분리 각각의 관심사에 따라 코드를 분리하는 기법 코드가 하나의 관심사만 신경쓰도록 분리하는 것 관심사의 분리의 특징 특정한 변화에 대응하기 위해 읽고 이해하고 수정해야 하는 코드의 단위를 줄일 수 있어 유지 보수에 용이해진다. 하나의 코드가 하나의 기능을 담담하기에 여러 역할이 혼재된 코드보다 단위별로 재사용하기 쉬워진다. 코드의 기능 테스트 또한 쉬워진다. 관심사의 분리가 잘 된 소프트웨어는 낮은 결합도와 높은 응집도란 특징이 나타난다. 낮은 결합도 (Loose Coupling) : 코드가 얽혀있지 않고 관심사에 따라 독립적으로 잘 분리되어 있다. 높은 응집도 (High Cohesive) : 동일한 목적(관심사)를 가진 코드끼리 잘 모여있다. KISS 원칙 Keep It Simple, Stup..

[ReactJS] Component의 분리와 재사용 (관심사의 분리)

컴포넌트 분리 관심사의 분리 관심사의 분리란 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것을 말한다. 프로그램을 구별된 '개개의 관심사를 해결하는 부분'으로 분리하는 디자인 원칙이다. 컴포넌트 별로 관심사를 분리하면 확장성과 재사용성을 높일 수 있다. 컴포넌트를 분리하는 이유 React에서 컴포넌트는 다양한 역할을 한다. 어떤 컴포넌트는 UI를 표현하고자 하고, 또 어떤 컴포넌트는 동작하는 로직을 담을 수 있다. 위의 두 역할을 모두 담는 컴포넌트 또한 존재하고, 하나도 담지 않는 컴포넌트도 존재할 수 있다. 이처럼 컴포넌트는 재사용할 수 있는 최소 UI 단위임에도 불구하고, 웹의 복잡도와 해당 컴포넌트에서 수행하려고 하는 역할에 따라 얼마든지 복잡해질 수 있다. 따라서 '관심사의 분리'..