🤔 컴포넌트 분할방법?
외부상태에 의존적인지 여부에 따라 크게 나눌 수 있습니다.
외부상태에 의존적이라는 것은 비즈니스 로직을 품고 있는지를 의미합니다.
프로젝트를 구성할 때 아래와 같이 나눌 수 있습니다.
container
비즈니스 로직을 담고 있으며 상태를 가져와 하위 컴포넌트를 결합합니다.
component
개별 컴포넌트로 비즈니스 로직이 없고(순수한!!) 자체상태를 가질수 있습니다.
page
페이지 단위의 컴포넌트이며 컨테이너 컴포넌트로 구성되어 있습니다.
flow
흐름을 갖고 있는 비즈니스 로직들이 모인 컴포넌트입니다.
최종적으로 정리를 해보면 아래와 같습니다.
🚀 page > flow > container > component
🤔 더미 컴포넌트?
return (
{state.items ? <Books /> : null}
)리액트를 사용하다보면 위와 같이 삼항연산자를 사용하여 작업하는 경우가 굉장히 많습니다.
그러나 위와 같은 코드는 코드가 좀 복잡하거나 삼항연산자를 많이 사용하는 경우 가독성이 떨어집니다.
이를 좀더 선언적으로 보이기 위해 더미 컴포넌트를 사용합니다.!😀
더미 컴포넌트
예시로 maybe라는 컴포넌트가 있습니다.
이러한 더미 컴포넌트를 만들면 아래와 같이 코드가 좀더 깔끔해집니다.
function Maybe({ right, children }) {
return <>{right ? children : null}</>
}return (
<Maybe right={Books} />
)🤔 type alias vs interface
📌 type alias
union 타입을 지원합니다.
내부의 내용에 대한 type을 정의할 때 주로 사용합니다.
요즘 많이 사용하는 추세입니다.
📌 interface
상속지원이 가능합니다.
union 타입을 지원하지 않습니다.
interface라는 키워드 자체가 소통을 의미하는 것 처럼 외부에 사용법을 노출하는 경우, 예를 들어 props와 같이 다른 컴포넌트간에 소통을 할때 사용합니다.
oop적인 관점에서 class에서 주로 사용합니다.
⚡️제네릭
호출되는 시점에서 결정되는 동적타입입니다.
그렇지만 컴파일 타임에 결정됩니다.
