이번 시간에는 버튼 작업을 하겠습니다
먼저 UI라는 폴더를 컴포넌트 폴더 안에 만들겠습니다
이 폴더를 만드는 이유는
이 앱에 있는 컴포넌트가
일반적인 핵심 UI 빌딩 블록이기 때문입니다
모든 컴포넌트는 결국 UI 빌딩 블록이지만
어떤 빌딩 블록은, 즉 버튼의 경우에는
여러 위치에 존재합니다
이런 컴포넌트를 UI 폴더에 모두 집어넣는 것은
제가 개인적으로 선호하는 작업 방식입니다
여러분은 꼭 이렇게 하지 않으셔도 됩니다
제 경우에는 Button.jsx를 UI 폴더에 생성하겠습니다
여기에서 Button이라는 컴포넌트 함수를 내보내겠습니다
그리고 표준 버튼을 반환할 때 그 버튼은
특정한 형식을 갖추어야 합니다
이 작업을 위해서는 먼저
속성을 받아야 합니다
이렇게 자식 속성을 받음으로써
이 커스텀 버튼을 내장 버튼처럼 사용하고
버튼의 반환 값이기도 한 텍스트를
감싸도록 할 수 있습니다
이미 배우신 대로
커스텀 컴포넌트로 무언가를 감쌀 때에는
즉 텍스트나 JSX 코드를 감싸면
해당 빌트인 자식 속성이
그 텍스트나 JSX 코드를 받게 됩니다
그러므로 이 자식 속성을 사용해서
그에 해당하는 내용을 반환하겠습니다
이 내용은 버튼 태그 사이로 넘어옵니다
바로 이 button이라는 태그입니다
이제 첫 단계가 끝났습니다
추가로는 이것 뿐만이 아니라
다양한 형식과 모양의 버튼을 받아오고 싶습니다
그러니까 버튼 중에서도
배경 색깔이 있고
화면에 크게 보이는 버튼을 받아오기도 하고
텍스트만 보이는 버튼도 받아오는 것입니다
이 경우는 버튼이라기보다 클릭할 수 있는 텍스트입니다
이 버튼을 만들기 위해 textOnly 속성을 받아오는 등의
작업을 할 수 있습니다
그 다음에는 cssClasses라는 상수를 추가하겠습니다
이 상수가 textOnly를 살펴보고
이것이 true일 경우에는 CSS 클래스를 가져와서
이 버튼에 text-button 클래스를 더하겠습니다
false의 경우에는 단순히 button이라는 CSS 클래스를 쓰겠습니다
그리고 추가로는
이 버튼 형식을 컴포넌트 바깥에서도
수정할 수 있도록
CSS 클래스를 더하겠습니다
즉 className 속성 또한 추출해 와서
이 속성을 커스텀 컴포넌트에 설정하겠습니다
그리고 이것을 직접 작성한 하드코딩(고정된 값의 코딩) 클래스와
병합하겠습니다
이 작업을 위해서는 이 문자열을
템플릿 리터럴로 변환한 후에 className을 주입합니다
또다른 방식으로는, 클래스를 문자열로 그대로 두되
이 부분을 상수 대신 변수로 변환합니다
그리고 className을 이런 방식으로 추가하겠습니다
이렇게 white-space으로 나누는 것입니다
이렇게 하면 아까처럼 긴 클래스 이름을 만들지 않고
버튼에 다양한 클래스 이름을 두는 것입니다
이 부분은 직접 결정하시면 됩니다
받아오는 clasName을 어떻게 이 직접 작성한 하드코딩
클래스 이름과 병합하는 방법은 여러 가지이기 때문입니다
어쨌든 이제 이 버튼에 className을 더하고
cssClasses로 설정하겠습니다
즉 방금 작업한 이 변수입니다
이제 아주 중요한 마무리 작업입니다
추가로 필요한 내용이 바로
여기서 만든 모든 버튼을
내장 버튼처럼 사용하는 것입니다
예를 들면 타입(type)을 설정하거나
onClick 속성을 설정할 수 있게 되는 것입니다
이 작업을 위해서는
이 모든 속성을 받아서 추출해야 하지만
이 모든 유스케이스(use case)를 포함하는 속성 목록은
너무 길어질 것입니다
이에 대한 단순한 대안은
rest라는 속성 문법을 사용하는 것입니다
이것을 통해 가져올 수 있는 모든 속성 혹은
들어오는 속성 객체에 설정된 속성을
살펴본 뒤에
새 객체로 병합시킬 수 있습니다
이 경우 그 객체의 이름은 속성(props)이 됩니다
이제 이 객체는
여기에 설정될 수 있는
모든 종류의 속성을 포함합니다
이 속성 객체가
버튼 위로 펼쳐지게 됩니다
이 작업은 이 문법을 사용하면
아주 간단히 해결됩니다
이제 남은 속성을 모두 모아서
그 속성을 모두 펼치게 되는데
이 내장 버튼 요소로 펼치게 됩니다
이제 재사용 가능한 버튼 컴포넌트가 준비되었습니다
즉 이제 이 컴포넌트를 여러 위치에서 사용할 수 있는데
예를 들면 헤더 컴포넌트에서 사용할 수 있습니다
여기에 있는 버튼은 이제 아까 작업한
커스텀 버튼을 사용해서 만들 수 있습니다
그러므로 이 버튼 컴포넌트를
./UI button.jsx에서 가져와서
여기 있는 내장 버튼을
커스텀 버튼으로 대체하겠습니다
여기에서 onClick을 추가하지는 않겠습니다
아직 클릭에 대한 작업 단계가 아니기 때문입니다
일단은 여기에 텍스트만 사용하는 형식을 가져오겠습니다
즉 이 커스텀 버튼에는 여기 있는 textOnly를
true로 설정하겠습니다
이 작업을 위해
textOnly 속성을 더하기만 하면 됩니다
이렇게 true로 설정하면 됩니다
사실 이 작업은 불필요합니다
그 이유는 리액트에서는 속성을 더할 때마다
자동으로 true로 설정되기 때문입니다
이제 여기에
텍스트로만 이루어진 버튼 형식이 적용되었습니다
이대로 저장해 보면
이렇게 생긴 버튼을 볼 수 있습니다
각 메뉴에 대한 버튼에는
다른 버튼 형식을 사용하겠습니다
다시 MealItem 컴포넌트로 돌아와서
UI 폴더에 있는 커스텀 버튼을 가져오겠습니다
Button.jsx까지 입력하고
아래쪽으로 가서 이 버튼에
이런 식으로 사용하겠습니다
여기에서도 일단은 다른 속성이 필요하지 않습니다
아직 클릭에 대한 작업을 하지 않기 때문입니다
이제 각 메뉴에 있는 버튼 형식도 이렇게 개선되었고
클릭할 수 있는 버튼임을 확인할 수 있습니다
이제 여기에서 다음 단계는
일단 이 버튼들을 클릭해서
작동하도록 하고
그 다음에는 장바구니 데이터 작업이 필요한데
이 때 모달을 띄울 수 있게 해서
장바구니 버튼을 누르면 뜨게 하겠습니다
일단 그 작업 이전에
장바구니 데이터를 제어하도록 해야 합니다
즉 다양한 위치에 있는
'장바구니에 더하기' 버튼에 대한 작업입니다