[TIL] 2주차 - 3. 컴포넌트 재사용성 (feat.게시물 수정하기)

컴포넌트 재사용성

입사하게 되면 회사에서는

 

1.컴포넌트 분리

2.로그인 인증(회사에서 주는 과제)

3.배포

 

이렇게 3가지를 봅니다.

 

특히 컴포넌트 분리에서

컴포넌트 재사용성이 중요한 부분인데요.

협업하기 좋은 코드이기 때문입니다.

 

흔히 좋은 코드라 함은

중복되는 코드 수를 줄이고 재사용성을 높여

코드 간의 결합도를 낮추고

생산성을 높인 것이라고 합니다.

 

유사하거나 똑같은 코드들이 여러개 있다면

클라이언트가 방대해져서 로딩 속도가 느려집니다.

나중에 수정해야 될 때도 시간 소모가 크겠죠.

 

그래서 중복되는 코드수를 줄이고

코드의 재사용성을 높이는 것이

실무에서 좋은 코드라고

할 수 있겠습니다. 

 

컴포넌트 역시 마찬가지입니다.

 

공통기능 컴포넌트를 따로 정리합니다.

 

공통적으로 사용되는 기능은

따로 한 컴포넌트로 빼두어

기능이 필요한 곳(페이지)에서

import 받아 사용하게 한다.

 

추후에 해당 기능에 대한 유지보수 시 여러 컴포넌트들을

수정할 필요없이 해당 컴포넌트 하나만 

수정하면 되므로 시간과 자원 절약이 됩니다.

 

게시물 수정하기

게시판을 만들 때 게시물 등록하기와 수정하기의 기능은

크게 차이 나지 않습니다.

오히려 똑같은 부분들이 있어 겹치는 코드들이 생깁니다.

 

이 때, 비슷한 기능은 하나의 컴포넌트로 빼주는게 좋습니다.

등록 컴포넌트와 수정 컴포넌트 이렇게 두개로

만들지 않고 각각의 페이지에서

해당 기능에 대한 하나의 컴포넌트를 import 하여 

사용할 수 있게 합니다.

 

글 등록 기능(BoardWrite) 컴포넌트가 게시물 수정(edit), 게시물 등록(new)에 공통으로 사용된다.

 

import 된 컴포넌트에서는 각각 props를 전달하여

누가 import를 했는지 관련된 내용들을 보낼 수 있습니다.

 

수정페이지는 어떤 글을 수정할 것인지, 해당 게시물에 대한

유일한 식별값으로서 글번호 또는

게시글id가 중요한데 이 데이터를 가져올 수 있는 위치는 주소창입니다.

 

그렇기 때문에 수정하기 페이지를

상세보기 페이지의 아래쪽에 위치시켰습니다.

상세보기 페이지에는 이미 글번호 또는 글ID로

동적라우팅을 할 수 있도록 주소창을 만들어 놓았기 때문입니다.