[우아한테크코스] 페이먼츠 2단계 회고

제어 컴포넌트와 비제어 컴포넌트

Keep

- 제어 컴포넌트와 비제어 컴포넌트의 차이를 알게 됐다.

- 페이먼츠 1단계에서는 제어 컴포넌트만 사용했지만 2단계에서는 용도에 맞게 제어/비제어 컴포넌트를 적용했다.

 

Problem - Try

1. DOM을 적절하게 활용하지 못했다.

- 비제어 컴포넌트로 Form을 구현할 때 input 태그에 있는 value에 접근하기 위해서 ref를 사용했다.

- ref를 이용하는 방법이 잘못된 방법이라 생각하진 않는다. 하지만 ref 이외의 DOM에 접근하는 방법을 몰랐기 때문에 아쉬운 점으로 적었다.

- Form 태그의 onSubmit 이벤트 발생 시 전달받은 event.target 객체와 태그의 id를 같이 활용하면 ref를 사용하지 않고 input 태그의 value에 접근할 수 있다.

 

예시 코드

const handleSubmitForm = event => {
    event.preventDefault();

    const inputValue = event.target['input-test'].value;
    
    console.log(inputValue);
  };

  return (
    <>
    	...
      <Form onSubmit={handleSubmitForm}>
        <Input id="input-test" />
        ...
      </Form>
    </>
  );

 

- 이뿐만 아니라 pattern 속성처럼 HTML 태그에 유용한 기능들이 있다. 따라서 MDN 공식 문서의 input 태그 속성들과 다른 예시 코드를 보면서 HTML 속성을 잘 활용하는 법에 대해서 공부하려 한다.

 

컴포넌트 디렉터리 분리

Keep

- 컴포넌트의 수가 증가되고 컴포넌트 디렉터리가 복잡해졌다. 불편함을 느끼고 컴포넌트 디렉터리 관리 방법에 대해서 찾아봤고 그중 atomic 디자인을 공부하고 비슷하게 적용했다.

- 컴포넌트와 디렉터리 분리에 대해서 앞으로도 꾸준히 고민해야겠다.

 

Problem - Try

1. Atomic 디자인을 적용하려 했지만 현실과 타협을 했다.

- Atomic 디자인 패턴은 최소 단위인 Atom 컴포넌트를 활용해서 Molecules, Organism 계층의 컴포넌트를 만들어가는 패턴이다. 하지만 미션에서는 Atom부터 다시 구현해서 적용하지 않고, 계층 별로 Atom -> Molecules -> Organism 순으로 유연하게 분리만 진행했다. 따라서 'Atomic 디자인을 적용시켰다!'의 느낌보다는 '컴포넌트를 Atom, Molecules, Organism이라는 디렉터리에 분리해서 관리했다.'의 느낌에 가깝다.

- Atomic 디자인도 좋은 패턴이지만, 현재는 '컴포넌트 디렉터리를 분리하는 기준'이 필요하다. 따라서 Atomic 디자인을 더 연습하기보다는 컴포넌트 디렉터리를 분리하는 기준에 대해 찾아보고 스스로에 맞는 방법을 선택하려 한다. 현재로써는 '이 컴포넌트가 공유되는가?'를 기준을 사용하고 있다.