[개발 일지] 게시판(컴포넌트 재활용)

컴포넌트 재활용

사용배경

React의 장점 중 하나는 컴포넌트를 클래스처럼 재활용 할 수가 있다는 것이다. 이 프로젝트에서는 게시판 쓰기 페이지와 게시판 수정 페이지가 해당된다.
이미지를 통해 알아보자

(글쓰기 페이지 이미지)

(글수정 페이지 이미지)

즉 컴포넌트는 동일하고 제목, 내용만 안에 들어가 있다. 굳이 글수정 페이지를 만들지 않고 글쓰기 컴포넌트를 재사용하기로 하였다.

로직

Rounting State

BoardRead 컴포넌트에는 props로 setState 함수를 전달하고
BoardWrite 컴포넌트에는 props로 bbsID와 bbsContent, isUpdate 전달한다.

BoardRead 수정 버튼 클릭

만약 수정 버튼을 클릭하면 routing에서 props받은 setState함수를 실행시켜 state를 변경한다. 그리고 페이지를 바꾼다.

BoardWrite 컴포넌트 수정

BoardWrite 컴포넌트이다. props로 전달받은 isUpdate에 맞게 글쓰기인지 수정인지 판단하게 한다.

결과