관심사의 분리

• 관심사는 간단히 말하면 하나의 모듈이 수행하고자 하는 목적!

관심사 분리의 이유

• 코드가 수정될 이유를 한가지로 제한하기 위함-> 유지보수에서 장점으로 이어짐

단일 책임 원칙 (SRP)

• 관심사의 분리와 유사한 개념. 하지만 관심사와 책임 표현의 차이

KISS (keep it simple stupid)

모듈은 간단하고 단순하게 만들어라.복잡하게 만들면 유지보수가 힘들어진다.

custom hook

react hook의 발표 이후 react 내 컴포넌트 선언법의 트렌드는 class -> 함수형으로 옮겨졌다.문법의 단순함, 교착상태로 인한 버그 발생 위험x, 그 중 하나는 custom hook의 편리함과 유용성

React 의 관심사

• 1. UI : JSX
• 2. 로직(UI를 변경시키는 코드): 유저 입력에 반응 event API 호출 스크린 변화 등

presentational - container 패턴

presentational : UI 가 어떻게 구성되어야 하는지에만 집중하는 컴포넌트
Container : UI 를 구성하고 변화하기 위한 로직에만 집중하는 컴포넌트

하지만 custom hook 이 후로 특정 상황이 아니면 많이 사용하지 않게 된 패턴

custom hook 패턴

• 리액트가 기본적으로 제공하는 react hook 을 이용해서 만든 함수.

custom hook 의 조건

• react hook 을 호출하여야 하는 함수여야 한다.
• 함수의 이름은 use로 시작해야 한다.
  custom hook 예시

const useLightMode= () => {
	const [isLightMode,setIsLightMode] = useState(true);
	const changeMode = () => {
      setIsLightMode((prev) => !prev)
  }
    return [isLightMode,changeMode]
}

이러한 형태로 UI 로직을 다루는 다양한 코드를 개별적으로 JSX 외부로 분리할 수 있다. presentational 의 경우 로직 UI 두가지로 밖에 구분하지 못한다.

return 값을 배열로 하는게 좋은가 객체로 하는게 좋은가?
배열의 경우 이름을 구분하지 않기 때문에 순서만 지켜주면 된다.
한편으론 이름을 구분하지 않기 때문에 특정 값만 사용하고 싶더라도 전 항목을 호출해야한다.
객체는 이름을 일치시켜줘야 한다. 고로 특정 값만 사용시에 편리함.
커스텀 훅의 기능이 많아질수록 (return 값이 많아질수록) 객체가 유리할 것.
하지만 커스텀 훅의 대부분은 두가지 기능을 하고 모두 사용되는 경우가 잦아서 배열로 많이 사용하는 편이다.

횡단 관심사 (cross-cutting concerns)

여러가지 서비스를 거쳐가는 관심사.
비즈니스로직 : 구매, 장바구니, 추천상품 등은 이커머스 서비스의 비즈니스 로직이다.
위 비즈니스 로직을 모두 관통하는 실행 동작

• 인증 & 인가 (회원 구분)
• 로깅 (고객 활동에 대한 로그)
• 트랜잭션 처리
• 에러 처리

의존성 역전 원칙 (Dependency Inversion Principle)

유연성이 극대화된 시스템을 만들기 위한 원칙. 소스 코드의존성이 추상에 의존하며 구체에는 의존하지 않는 것을 의미.
추상 : console.log('')가 브라우저 콘솔에 찍히는 현상을 결과적으로만 인지하고 있는 상태
구체 : localstorage.setItem 의 경우 구체에 해당. 우리의 코드 내부가 아닌 외부의 구체적인 요소를 사용하고 해당 브라우저에서 만약의 변경사항이 일어나 localstorage의 사용법이 변경된다면 우리 코드 내부를 모두 수정해야 한다.

결론적으로 우리는 목적을 추상화해야한다.
추상화의 예시

tokenRespositoryInterface
	save(token:string):void
	get():string
	delete():void

interface: 두가지 다른 요소들이 소통하는 지점을 의미함.
interface를 실제로 구현해야하는 입장에서는 interface 단에서 정한 약속만 지켜진다면 내부 기능 구현은 어떻게 하든 상관이없다.
API가 대표적인 예시다.
구현을 어떻게 하든 통신규약만 맞춰지면 백엔드와 프론트엔드는 소통이 가능함. API 처럼 모든 기능을 구현할 때 interface를 지정하고 구현하는 습관을 들여보자.
의존성 역전 원칙은 의존성의 흐름이 바뀌는 원칙.

의존성 주입 (dependency injection)

의존성 주입이란 특정한 모듈에 필요한 의존성을 내부에서 가지고 있는 것이 아니라 해당 모듈을 사용하는 입장에서 주입해주는 것.
함수 내부에 값을 가지고 있는게 아니고 인자를 이용해서 함수에 주입해주는 것과 같은 개념이다.

개방 폐쇄 원칙(Open-closed Principle)

소프트웨어 개체는 확장에 대해 열려있어야 하고 수정에 대해서는 폐쇄적이여야 한다는 원칙