감정일기장 - button, header 생성

 

프로젝트를 진행시에는 버튼과 헤더 같이 자주 사용되는컴포넌트가 존재한다.

이를 매번 새로만드려고 한다면, 엄청난 시간이 걸리며 일일히 관리하는 것도 힘들 것이다.

 

따라서 버튼, 헤더 컴포넌트를 따로 생성해주고 

prop에 따라서 재사용이 가능한 컴포넌트로 제작을 해주었다.

 

 

MyButton

 

이 버튼 컴포넌트는 버튼에 들어갈 text,버튼의 종류에 따른 type, 버튼이 클릭시 실행될 콜백함수 onClick을

props로 전달받아, 재사용 가능하게 만들어 주었다.

 

 

특히 type에 따라 스타일링을 다르게 하기 위해서 

className={["MyButton", `MyButton_${btnType}`].join(" ")}

클래스명을 type에 따라 다르게 받아 주어 스타일링을 해주었다.

 

MyHeader

 

헤더는 headText, leftChild,rightChild를 props로 받는 단순한 구조로 구성하였고,

위에서 제작한 버튼을 props로 주어서 헤더를 제작하였다.

 

 

구현