📯 컴포넌트 설계

🕐 컴포넌트란?

재사용이 가능한 독립적인 기능을 수행하는 '모듈'로서 웹의 구성 요소이다.

🕑 컴포넌트와 객체 지향

객체지향 언어에서는, 계속해서 반복되는 장치를 인터페이스로 제공한다.

이때 인터페이스는, 사용자게에 해당 소프트웨어를 쓰기 위한 메소드를 공개하고, 규격화된 메소드 환경에서 소프트웨어를 개발할 수 있는 환경을 제공해준다.
=> 컴포넌트는 각각 독립된 모듈이다.

🕒 컴포넌트의 역할

1) 데이터 관리

컴포넌트 안의 상태와 더불어 외부로부터 주입된 데이터를 관리한다.

2) 데이터를 UI로 표현

컴포넌트에서 관리하는 데이터를 어떻게 화면에 렌더링 할지에 대한 선인이다.

3) 사용자와의 상호작용

사용자로부터 어떤 인터랙션을 받을지 이벤트 핸들러를 정의해주고, 이벤트 핸들러에서 일어나는 일을 작성한다. 이때, 데이터를 관리하는 조작을 하기도 한다.

🕓 컴포넌트 설계

1) SOLID 원칙

하나의 컴포넌트가 하나의 책임만을 담당한다.
재사용성, 확장성, 관리 용이성이라는 목적을 가지고 있다.

*책임이란?
컴포넌트가 수행하는 행동!

2) 데이터 기반의 설계

외부로부터 주소 목록을 가져와 렌더링하는 페이지를 나누어본다.

function AddressPage() {
  const [addresses, setAddresses] = useState<주소[] | null>(null)

  const handleSaveClick = (id: string) => {
    // save
  }
  const handleUnsaveClick = (id: string) => {
    // unsave  
}

  useEffect(() => {
    ;(async () => {
      const addresses = await fetchAddressList()

      setAddresses(addresses)
    })()
  }, [])

  return (
    <section>
      <h1>주소목록</h1>
      <ul>
        {addresses != null
          ? addresses.map(({ id, address, saved }) => {
              return (
                <li key={id}>
                  {address}
                  <button onClick={saved ? handleUnsaveClick : handleSaveClick}>
                    {saved ? '저장' : '삭제'}
                  </button>
                </li>
              )
            })
          : null}
      </ul>
    </section>
  )
}

주소 목록을 렌더링하는 AddressPage 컴포넌트는 데이터를 외부에서, 데이터를 UI로 표현하며 인터렉션을 받는다.

데이터를 중심으로 컴포넌트를 분리하면,
'주소목록', '주소'를 기준으로 분리할 수 있다.

function AddressPage() {
  return (
    <section>
      <h1>주소목록</h1>
      <AddressList />
    </section>
  )
}

주소목록 데이터를 props로 내려받지 않고, 스스로 데이터를 가져올 수 있다.
또한, 각 데이터를 하나하나 관리하는 AdressItem으로 분리할 수 있다.

function AddressList() {
  const [addresses, setAddresses] = useState<주소[] | null>(null);
  // call fetchAddressList

  return (
    <ul>
      {addresses.map(address => {
        return (
          <AddressItem
            key={address.id}
      address={address.address}
            saved={address.address}
            onSaveClick={handleSaveClick}
            onUnsaveClick={handleUnsaveClick}
            {...address}
          />
        );
      })}
    </ul>
  );
}

이때, 사용자와의 인터렉션은 여전히 컴포넌트에 정의되어 있다.
또한, AddressItem 컴포넌트는 자신이 보여주는 데이터를 컴포넌트 자체에서 관리하지 못한다.

2-1) 역할 중심으로 분리하기

function AddressItem({ id, address, saved }: 주소) {
  const handleSaveClick = () => {
    // save
  }
  const handleUnsaveClick = () => {
    // unsave
  }
  return (
    <li key={id}>
      {address}
      <button onClick={saved ? handleSaveClick : handleUnsaveClick}>
        {saved ? '저장' : '삭제'}
      </button>
    </li>
  )
}

주소 데이터를 기준으로 사용자 인터렉션이 발생하고 있고, 역할에 따라 핸들러가 정의되었고 불필요한 인자가 사라지게 되었다.
주소 아이템 컴포넌트는 하지만, 데이터를 보여주고 저장하고 삭제하는 역할도 수행하고 있다. 따라서 저장과 삭제 역할을 버튼에게 위임할 수 있다.

참고로 이때, 위 컴포넌트를 이용하는 AddressList 컴포넌트는 다시 작성된다.

function AddressList() {
  const [addresses, setAddresses] = useState<주소[] | null>(null);
  // call fetchAddressList

  return (
    <ul>
      {addresses.map(address => {
        return <AddressItem key={address.id} {...address} />;
      })}
    </ul>
  );
}

버튼에 따라 위임해보자

function AddressItem({ id, address, saved }: 주소) {
  return (
    <li key={id}>
      {address}
      {saved ? <SaveAddressButton id={id} /> : <UnsaveAddressButton id={id} />}
    </li>
  )
}

function SaveAddressButton({ id }: { id: string }) {
  const handleSaveClick = () => {
    // save
  }
  return <button onClick={handleSaveClick}>저장</button>
}

function UnsaveAddressButton({ id }: { id: string }) {
  const handleUnsaveClick = () => {
    // unsave
  }
  return <button onClick={handleUnsaveClick}>삭제</button>
}

3) 일반적인 인터페이스 설계

일반적인 인터페이스란,

1. 특정 도메인에 대한 맥락을 가지고 있지 않아 어느 도메인에든 사용할 수 있는 컴포넌트
2. 사용자 입장에서 내부를 보지 않고도 컴포넌트의 역할을 이해할 수 있는 인터페이스

따라서, 우리는 위에 살펴본 컴포넌트에서 문제를 발견할 수 있다.
바로, '주소'라는 특정 도메인과 강하게 연결되어 있다는 것인데,
이를 해결하기 위해서 도메인 맥락을 제거해야 한다.
제거하면 코드는 다음과 같아진다.

// before: AddressItem
function FlexListItem({ text, button }: { text: string, button: ReactNode }) {
  return (
    <FlexLi>
      {text}
      {button}
    </FlexLi>
  )
}
const FlexLi = styled('li')``

이렇게 수정된 FlexListItem 컴포넌트는 다른 도메인에서도 재사용할 수 있다.

🎴 디자인 패턴

🕐 패턴이란?

양식, 무늬, 변동, 모범 즉 되풀이되는 사건이나 물체의 형태

🕑 디자인 패턴이란?

재사용성을 지닌 객체지향 소프트웨어 요소
소트프웨어 개발을 할 때 일반적으로 발생하는 문제들에 대한 가장 효과적인 해결 방법이다. 즉, 특정 구현을 직접 제공하지는 않지만, 특정한 상황에서 구조적인 문제를 해결하는 방식이다.

🕒디자인 패턴의 장점

1. 좋은 설계는 구현을 쉽게 한다.
2. 효율적인 의사소통이 가능하다.
3. 객체 지향 원칙을 지킬 수 있다, 따라서 유연하고 확장가능한 코드 설계가 가능하다.
4. 설계 우선 주의, 바람직한 설계가 가능하다.
5. High Level View, 큰 그림을 볼 수 있어, 이해도가 높아진다.

🕓 디자인 패턴의 역할

1. 쉽게 변경하는 방법을 제공
2. 추상화의 위임: 변경되는 부분을 추상화하고 인터페이스를 통해 모듈에 위임
3. 상속보다 구성으로 해결: 상속보다 더욱 유연함

🕔 언제 사용할까?

특정 부분이 계속 변경될 것이라고 예상되는 경우

• 🌀 MVC구조
  -> 사용자의 정신 모델(이렇게 될 것이다)와 컴퓨터에 존재하는 디지털 모델 사이의 격차를 해소하는 것, 즉, 역할에 따라 모듈을 분리한다.
  -> Controller가 View를 통해서 Event를 생성하면, Modal에게 명령을 수행하고, View를 통해 사용자에게 전달(View의 갱신)

🕕 디자인 패턴의 종류

💬 Layout Components

페이지의 전체 구조와 배치를 정의하는 역할을 하며,
이를 통해 개발자는 컴포넌트들의 위치와 독립되어 개별적으로 관리하고 구성할 수 있다. 따라서, 재사용성과 유지보수성이 향상된다.
컴포넌트들이 그들이 어디에 위치해야 하는지에 대한 장소 정보를 알 필요가 없다는 개념에서 출발하였다.

are used for,,,

분활하면이나, 리스트, 모달 등에 사용된다.
이를 적용하면,
1. 컴포넌트 트리 깊이가 낮아진다.
2. 레이아웃 컴포넌트는 무상태이므로, 리렌더링되지 않는다.
3. 시각적인 테스트에 유용하다.

examples

// App Component acting as the parent component to render a Layout Component

import { SplitScreen } from "./SplitScreen";

const LeftComponent = ({ name }) => {...}
const RightComponent = ({ message }) => {...}

function App() {
  return (
    <SplitScreen leftWeight={1} rightWeight={3}>
      <LeftComponent name="hyein" />
      <RightComponent message="She is always sleepy......." />
    </SplitScreen>
  );
}

export default App;

-> 해당 코드에서 SplitScreen 컴포넌트가 LeftComponent 와 RightComponent를 나누어서 보여주고 있는 것을 알 수 있다.
width 값을 조정해서 자식 컴포넌트의 너비값을 조절하고 있다.

import styled from "styled-components";

export const SplitScreen = (props) => {
  const {children, leftWeight, rightWeight} = props;
  const [left, right] = children;

  return (
    <Container>
      <Pane weight={leftWeight}>{left}</Pane>
      <Pane weight={rightWeight}>{right}</Pane>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
`;

const Pane = styled.div`
  flex: ${(props) => props.weight};
`;

-> SplitScreen 컴포넌트는 다음의 예시와 같다.
각각 왼쪽, 오른쪽의 요소들을 props로 내려 받고 있으며, main을 감싸는 Container 컴포넌트와 이를 나누고 있는 Pane 컴포넌트를 볼 수 있다.

이렇게, 유연하고 재사용성이 있는 SplitScreen 컴포넌트를 만들 수 있다.
결론적으로, 이를 활용하면, screen을 나누고 싶을 때 언제든지 재사용할 수 있으며,
각 컴포넌트들은 자신들의 위치와 상관없이 독립적으로 관리될 수 있다.

💬 HOC (Higher Order Component) Pattern

HOC는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.

are used for,,,

• 많은 컴포넌트들에서 복잡하지만 같은 로직을 공유하여 코드를 반복해야 할 때 주로 사용한다.
• 원래 있었던 컴포넌트에 추가적인 기능을 넣고 싶을 때에도 사용한다.
  
  즉, HOC를 이용하면, 코드를 다시 쓰지 않고도, 로직을 사용할 수 있다.
  HOC는 순수함수로 기대된다. 이때 HOC는 다른 컴포넌트들처럼 대문자로 시작하지 않아도 된다. (jsx가 안에 완전히 들어가는 게 아니므로)

HOC -> SomeComponent ---> New Component

examples

function withStyles(Component) {
  return props => {
    const style = { padding: '0.2rem', margin: '1rem' }
    return <Component style={style} {...props} />
  }
}

const Button = () = <button>Click me!</button>
const Text = () => <p>Hello World!</p>

const StyledButton = withStyles(Button)
const StyledText = withStyles(Text)

-> 위의 코드에서 각 Button, Text 컴포넌트들은 StyledButton과 StyledText로 변환되어 withStyles 로직이 적용될 수 있다.

💬 Provider Pattern

여러 컴포넌트들이 데이터를 사용할 수 있게 해야 하는 상황일 때 사용한다.

are used for...

계속해서 props를 내리는 방식은, 규모가 커질 수록 관리하기 어려워지며
데이터가 필요하지 않는 컴포넌트일지라도, props를 받게 될 수 있다는 단점이 있다.
즉, props drilling에 의존하지 않고 직접 데이터에 접근할 수 있도록 설계한다.

examples

const DataContext = React.createContext()

function App() {
  const data = { ... }

  return (
    <div>
      <DataContext.Provider value={data}>
        <SideBar />
        <Content />
      </DataContext.Provider>
    </div>
  )
}

-> 컴포넌트들을 Provider로 감싼 뒤, createContext 메서드를 통해 Context 객체를 만들어 낸다. 이후 Provider 컴포넌트는 value라는 prop으로 하위 컴포넌트들에게 내려줄 데이터를 받는다. 해당 컴포넌트의 모든 자식 컴포넌트들은 해당 provider를 통해 value prop에 접근 가능하다.(이떄, Provider는 HOC로 Context 객체 제공)

이후 자식 컴포넌트들은 useContext 를 활용하여 data에 접근할 수 있다.

💬 Compound Component Pattern

부모 컴포넌트가 자식 컴포넌트와 암시적으로 state를 공유할 수 있는 방인이다.
여러 컴포넌트들이 모여서 하나의 동작을 할 수 있도록 도와준다.
하나의 완벽한 컴포넌트를 구성하는 암시적 상태 공유 컴포넌트 API 집합을 제공하는 방법이다.

are used for...

select 구성요소에서 이와 비슷한 맥락을 볼 수 있다.

//html
<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

//CustionSelect.js
<CustomSelect
  options={[
    {value: '1', display: 'Option 1'},
    {value: '2', display: 'Option 2'},
  ]}
/>

위에서는 option은 굉장히 유연하지만, 아래의 경우, option의 상태를 외부에서 관리하고 있다.
참고

examples

이를 ContextAPI 와 Compound Component Design Pattern 으로 해결할 수 있다.

//내부 상태를 암시적으로 공유할 Context와 Context Provider Component를 만든다.
const ToggleContext = React.createContext()
ToggleContext.displayName = 'ToggleContext'

function Toggle({children}) {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)

  return (
    <ToggleContext.Provider value={{on, toggle}}>
      {children}
    </ToggleContext.Provider>
  )
}


//useContext 훅을 만든다.
function useToggle() {
  const context = React.useContext(ToggleContext)
  if (context === undefined) {
    throw new Error('useToggle must be used within a <Toggle />')
  }
  return context
}

//서브 컴포넌트들의 api를 받는다
function ToggleOn({children}) {
  const {on} = useToggle()
  return on ? children : null
}

function ToggleOff({children}) {
  const {on} = useToggle()
  return on ? null : children
}

function ToggleButton({...props}) {
  const {on, toggle} = useToggle()
  return <Switch on={on} onClick={toggle} {...props} />
}

//적용
//App.jsx
function App() {
  return (
    <div>
      <Toggle>
        <ToggleOn>The button is on</ToggleOn>
        <ToggleOff>The button is off</ToggleOff>
        <div>
          <ToggleButton />
        </div>
      </Toggle>
    </div>
  )

💬 Container/Presentational Pattern

비즈니스 로직으로부터 뷰를 분리하는 방식이다.

1) Presentational Components
props를 통해 데이터를 받는 컴포넌트로,
데이터를 화면에 표시하는 것이 주기능이며 styleSheet를 포함한다.
즉, 어떻게 화면에 표시할 것인가를 담당하는 컴포넌트이다.
하지만, 데이터를 수정하거나 가져오지 않는다. 그저 화면에 보여주기만 하고, state를 따로 가지거나 외부로부터 데이터를 가져오는 동작을 하지는 않는다.

2) Container Components
Presentational 컴포넌트에 데이터를 전달하는 것이다. Container 컴포넌트 자체는 화면에 아무 렌더링을 일으키지 않는다. 따라서 스타일시트도 포함되지 않는다.

how?

이러한 패턴은 React Hook으로 대체 가능하다.
아래 코드와 같이 커스텀 훅을 만들 수 있다.

export default function useDogImages() {
  const [dogs, setDogs] = useState([])

  useEffect(() => {
    fetch('https://dog.ceo/api/breed/labrador/images/random/6')
      .then(res => res.json())
      .then(({ message }) => setDogs(message))
  }, [])

  return dogs
}

💬 uncontrolled component

스스로 내부 상태를 관리하는 컴포넌트
제어되는 컴포넌트(controlled component)는 onPropChange 콜백과 값 prop 쌍을 필요로 하며, 컴포넌트 내 표현은 이에 의해 완전히 제어된다.

💬 Module Function

모듈 스코프 내에 변수를 선언하고, 명시적으로 외부에 export 하지 않으면 바깥에서 해당 변수를 접근할 수 없게 하는 패턴이다.

how?

math.js 모듈이 몇 가지 함수를 가지고 있다.

  return x + y;
}
function multiply(x) {
  return x * 2;
}
function subtract(x, y) {
  return x - y;
}
function square(x) {
  return x * x;
}

이때 함수들을 외부에서 사용하려면 이들을 export 해야 한다.
또한, 함수를 쓰는 쪽에서 import 구문을 사용하여 이들을 불러와야 한다.

import { add, multiply, subtract, square } from './math.js'

출처

리액트디자인패턴
리액트디자인패턴patterns
리액트디자인패턴넥스트리블로그
SLASH22_지속가능한성장과컴포넌트
변경에유연한컴포넌트
변경에유연한컴포넌트2
FEConf2023