컴포넌트란 무엇일까?
react에서 컴포넌트란 하나의 블럭이자 페이지다. 나눌 수 있는 페이지들을 블럭으로 쪼개서 그 블럭들을 또 하나의 페이지로 만드는 거다.
컴포넌트를 나누는 기준
그렇다면 컴포넌트를 나누는 기준은 무엇일까...이건 사실 개개인 마다 기준이 다르고 기업마다 기준이 다른 것 같다. 미세한 차이로 뭔가 정해진 틀이 있을 줄 알았는데 결국 주관적인 것이었다.
1) 재사용성이 있는 컴포넌트
수정, 삭제, 등록 버튼이나 네비바에 있는 메뉴들이나, 메인에 글을 적는 공간등등 수정할 사항이나 반복적으로 사용할 컴포넌트들은 따로 분리해 놓으면 된다.
2) 복잡성이 높은 컴포넌트
메인페이지나, 상세페이지로 나누다 보면 그 안에 게시판을 입력할 수 있는 공간이나, 버튼 등등이 있다. 컴포넌트 3개이상으로 이루어질 경우에는 코드가 점점 길어지기 때문에 거기서 또 나누면 되는 것이다. (아마도 찾기 힘들어질 쯤에?)
3) 상태값이 서로 연관없는 렌더링에 영향을 미칠경우
예를들어 const로 [count, setCount] = useState("") 이렇게 선언한 상태값과 [card, setCard] 이렇게 선언한 상태값이 한 컴포넌트 공간에 있는데 서로 연관이 없는데 같이 있을 경우 state는 지역상태관리 이므로 초기 렌더링을 그려줄 때 count가 변하면 card도 같이 또 렌더링되고 card가 렌더링 되면 count도 같이 렌더링 되기 때문에 두 값이 서로 연관된 값이 아니라면 상태관리는 한 공간이 아닌 컴포넌트를 분리해서 관리하는 편이 좋다.
컴포넌트에 대해 알아보며...
컴포넌트는 무조건 잘게 쪼갠다고 해서 잘 나눈것도 아니고 그렇다고 한공간에 모든 컴포넌트 조각들을 때려박는다고 해서 잘 나눈것도 아니라서 최대한 같이 협업하는 사람들과 코드 컨밴션 즉 개발자들간에 이루어져야 할 사용 규칙들을 잘 지키며 고민하는 것이 정신건강에 이로울 수 있겠다...
