컴포넌트를 만드는 이유는 무엇일까?
재사용성, 유지보수의 용이성이다.
반복되는 코드를 Copy & Paste를 하게 된다면 그 부분을 수정할 때 모든 부분을 찾아 수정해야하고, 어떤 부분에 어떻게 되어있는지에 대해 전부 기억할 수 없게 되고 코드가 많아지면 점점 더 유지보수가 힘들어지고 난이도가 크게 증가한다.
하지만, 너무 많은 컴포넌트화는 예상하지 못한 변경점이 생겨 버그로 이어진다.
그렇다면, 잘 만들어진 컴포넌트는 무엇일까?
첫번째, Atomic design pattern 적용, 제일 작은단위 부터 컴포넌트를 만드는 것이다.
ATOMS -> MOLECULES -> ORGANISMS -> TEMPLATES -> PAGES
원자 -> 분자 -> 유기체 -> 템플릿 -> 페이지
이렇게 작은단위부터 컴포넌트를 만들게 된다면, 의도하지 않은 변경들을 최소화 할 수 있고, 수정을 하였을때도 사이드이펙트를 최대한 줄이다 보니 재사용성을 올릴수 있다.
두번째, 컴포넌트가 상태를 갖고 있는가 ?
상태를 갖지 않는 컴포넌트는 state를 갖지 않고 props로만 어떻게 보여줄지에 집중을 한다.
상태를 갖는 컴포넌트는 스스로 state를 갖는 컴포넌트이다. 어떠한 조건에 의해 스스로 계산하여 변하는 것 까지 가능한 컴포넌트이다.
각각 쓰임새가 다르다.
atom 컴포넌트를 만들때는 최대한 상태를 갖지 않는 컴포넌트로 작성하고, 단위가 커질 수록 상태를 갖는 컴포넌트 작성이 필요하다.
세번째, 어느 시점에 컴포넌트를 만들면 좋을까?
프로젝트의 규모가 커지게 된다면 컴포넌트화하여 재사용성을 높일지, 아니면 현재 코드를 유지하고 컴포넌트화 하지않고 Copy & Paste할지에 대해서 선택을 해야하는 경우가 많을 것 이다.
이런 경우에 기준을 정하여 컴포넌트를 관리하는 것이 중요하다.
