styles.block에서 flex-direction: 'row'로 설정해서 컴포넌트들이 가로 방향으로 나타나게 했습니다. 여기서 justifyContent: 'space-between'이라는 스타일이 적용됐는데요. 이렇게 설정하면 해당 컴포넌트 내부에 렌더링된 요소들 사이 여백이 꽉 채워집니다. 만약 컴포넌트 내부에 요소가 여러 개 있으면 다음과 같이 요소들 사이의 여백이 균일하게 주어집니다.

▲ 그림 6-8 space-between

현재 우리는 컴포넌트에 요소가 두 개 있으므로 하나는 좌측 끝, 하나는 우측 끝에 붙어서 보입니다.

헤더에는 버튼이 세 개 있습니다. 좌측에 뒤로가기 버튼, 우측에 삭제 버튼과 완료 버튼이 있습니다. 삭제 버튼은 작성된 글을 열었을 때만 보여야 하는데 당장은 UI 구현을 위해서 모든 상황에 보이게 만들었습니다.

앞의 컴포넌트 코드를 보면 버튼 때문에 비슷한 코드가 여러 번 반복돼서 작성되었지요? 반복되는 코드를 발견했을 때 이를 컴포넌트로 만들어서 컴포넌트를 재사용하는 형태로 리팩토링하는 습관을 가진다면 프로젝트 유지보수에 용이합니다.

그럼 헤더의 버튼 컴포넌트를 쉽게 재사용할 수 있도록 따로 분리해 작성합시다.