예전에 많이 사용하던 방식이다.
기능(JS)과 UI(JSX)로 나눈다.
프레젠터는 stateless, 컨테이너는 stateful한 경향이 있다.
(필요 시 프레젠터도 UI 관련한 상태를 가질 수는 있다.)
재사용이 가능하다.
프레젠터 컴포넌트는 UI만 표현하기 때문에 컨테이너 컴포넌트 의존도가 낮아 다양한 컨테이너와 조합하여 재사용할 수 있다.
구조 파악이 쉽다.
기능과 UI가 명확히 분리되어 구조 파악에 용이하다.
이 패턴을 소개한 Dan Abramov는 2019년 기준으로 이 패턴을 더이상 추천하지 않고 Hook 사용을 권장하고 있다.
최근에 가장 많이 사용하는 방식이다.
Custom Hook을 만들어 반복되는 로직을 함수로 뽑아내어 사용한다.
(JS 함수에서 로직을 공유할 때 또 다른 함수로 분리하는 것과 같은 방법이다.)
Custom Hook은 이름이 use로 시작하는 자바스크립트 함수로, 다른 Hook을 호출한다.
조건부 함수가 아니어야 한다.
같은 Hook을 사용하는 다른 컴포넌트의 state와 effect는 독립적이다. (공유하지 않는다.)
만든 커스텀 훅의 이름이 use로 시작하지 않으면, 이 함수가 Hook을 호출하는지 알 수 없어 Hook 규칙 위반 여부를 체크할 수 없다.
컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되어야 한다.
Hook을 React 함수의 최상위에서 호출해야만 useState
와 useEffect
가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해주기 때문이다.
Hook은 React 함수 컴포넌트와 Custom Hook에서 호출해야 한다. 일반적인 JavaScript 함수에서 호출해서는 안된다.
작은 단위의 컴포넌트를 재사용성이 강하게 설계한다.
Atomic 패턴을 따르기 위해서는 디자인도 이 패턴의 원칙에 맞게 진행되어야 한다.
Story book과 시너지 효과를 낸다.
초기 개발 시간이 많이 소요될 수 있지만, 잘 설계해두면 중장기적으로 개발 기간을 단축할 수 있다.
에러검색하다가 우연히 들렸는데 대단하시네요 ㄷㄷ 어떻게 단기간에 이렇게 하실수가 있으신거죠??