큰 단위의 앱 컴포넌트를 잘게 나눠보겠습니다
여기에서는 이 다양한 섹션을
각각의 새로운 컴포넌트로 배분하는 것이 좋습니다
각 섹션은 저희의 데모 버전 앱에 있어
각각 다른 기능이기 때문입니다
이 부분을 기능의 하나로 볼 수 있고
아래쪽의 상호작용 가능한 부분은 또다른 기능입니다
다양한 기능을 다양한 컴포넌트에
배분하는 것은 모든 리액트 프로젝트에 있어서
아주 좋은 전략입니다
그러므로 여기 components 폴더에서
새로운 CoreConcepts.jsx 파일을 생성하겠습니다
여기에 새로운 CoreConcept 컴포넌트를 넣어두겠습니다
또한 새로운 Examples.jsx 파일을 생성해서
여기 있는 Examples 부분을 저장하도록 하겠습니다
먼저는 Core Concept부터 시작하겠습니다
이 부분을 가져다가 App.jsx 파일에서 잘라내오겠습니다
그리고 이 CoreConcept.jsx 파일을 방금 생성했었는데
기본값 함수를 내보낼 수 있습니다
이름은 CoreConcepts로 하겠습니다
그리고 이 가져온 부분을 반환하게 됩니다
물론 명심해야 할 부분은
CORE_CONCEPTS 데이터와 CoreConcept 컴포넌트가
이 컴포넌트 함수와 이 파일에 들어 있습니다
그리고 각각에 맞게 더해 주어야 하는 것은
import문과 CoreConcept 컴포넌트를 불러와야 합니다
./CoreConcept.jsx에서 불러오겠습니다
그리고 CORE_CONCEPTS 데이터도 불러오겠습니다
불러오는 위치는 한 단계 상위에 있고, data.js 파일입니다
이것으로 여기 컴포넌트가 작동할 수 있을 것입니다
그러면 다시 앱 컴포넌트로 돌아가 보겠습니다
이제 여기 있는 CORE_CONCEPTS import문과
이 컴포넌트 import문 또한 지우겠습니다
대신 CoreConcepts 컴포넌트를 불러오겠습니다
위치는 ./Components/CoreConcepts.jsx입니다
그리고 이 import문을 이쪽 JSX 코드에 추가해 두면
이제 CoreConcepts을 출력할 수 있을 것입니다
그리고 이렇게 완성했습니다
고유의 기능 영역이 있는 첫 컴포넌트입니다
이제 이 쪽 예시들에도 똑같이 적용할 수 있습니다
먼저 이 쪽 부분을 가져오겠습니다
TabButton과 TabContent 또한 가져오겠습니다
이제 Examples.jsx로 오겠습니다
여기에서는 Examples 함수를 내보내고
이 JSX 코드를 반환하겠습니다
물론 JSX 코드가 함수 안에 포함시킬 내용의 전부는 아닙니다
이 새 컴포넌트 함수에는 다른 요소도 필요합니다
여기 이 상태 또한 작업이 필요합니다
지금 이 함수에 handleSelect 함수를 꼭 더해야 하는데요
지금 여기서 불러오려고 하는 함수가
이 파일에서 처음 사용하는 것이기 때문입니다
이 파일에 handleSelect가 사용된 적이 없었습니다
그리고 이 쪽 TabContent변수 또한
이 함수 안에서 제어해야 합니다
그래서 앱 컴포넌트 파일로 돌아가서
이 코드를 가져오겠습니다
이쪽의 handleSelect 부분도 가져오고
여기의 useState 코드도 가져오겠습니다
결국 이렇게 여러 부분을 가져오면서
앱 컴포넌트를 간결하게 만들려는 것이 우리의 목표입니다
더욱 간결하게 만들고
다양한 기능들을 이 파일 바깥에서 가져와서
각각의 컴포넌트에 넣으려고 하는 것입니다
이는 특히 규모가 큰 리액트 프로젝트의 경우
코드를 다양한 컴포넌트로 나누어 두면
리액트 개발이 훨씬 쉬워지는데다
프로젝트 관리가 더 쉬워지기 때문입니다
코드를 모두 잘라냈으니
다시 Examples 파일의 컴포넌트 함수로 돌아와서
복사한 코드를 모두 붙여넣겠습니다
여기서 신경을 써야 하는 부분은
이 파일에 useState가 있어야 한다는 점입니다
그러므로 리액트에서 useState를 가져와야 하고
또 한 가지 필요한 것은
이 쪽의 EXAMPLES라는 상수 데이터가
이 파일에 있어야 합니다
여기서도 EXAMPLES를 가져올텐데
한 단계 상위에서 데이터 파일(data.js)을 가져오겠습니다
이 console.log문은 이제 삭제하겠습니다
이제는 다른 컴포넌트로 넘어왔기 때문에
더 이상 필요하지 않기 때문입니다
이제 이 쪽 Examples 부분이 준비가 되었고, JSX 파일도 완료했고
이 컴포넌트 또한 완료했습니다
이제 다시 앱 컴포넌트로 넘어가겠습니다
그리고 이 쪽의 import문 또한 삭제하겠습니다
이제 삭제할 수 있는 이유는
이 파일에서 더는 해당 특성을 사용하지 않기 때문입니다
그리고 방금 발견했는데, TabButton의 import문도
이쪽 Examples.jsx에 포함되어야 합니다
그 작업은 조금 있다가 하겠습니다
우선은 App.jsx 파일에서
Examples를 가져오도록 하겠습니다
위치는 ./Components입니다
그리고 나서 Examples.jsx을 지정하겠습니다
이제 이 아래의 CoreConcepts에서 이 Examples를
커스텀 HTML 요소처럼 사용할 수 있습니다
이제 아까 말씀드린대로 Examples 컴포넌트에
TabButton을 추가하도록 하겠습니다
이번에도 동일하게 import문을 써서
TabButton.jsx 파일에서 가져오겠습니다
이제 저장 후 새로고침을 하면
이전과 똑같은 앱이 보이고
에러도 없는 것을 확인할 수 있습니다
하지만 이제 이 탭을 클릭했을 때
위쪽의 내용이 변하지 않는 것을 확인할 수 있습니다
이제 텍스트가 변하지 않는 이유는
이제는 selectedTopic 상태를 사용하여
Examples 컴포넌트에 포함시켰기 때문입니다
그러므로 이 컴포넌트 함수가
해당 상태가 변할 때마다 새로고침이 됩니다
그리고 반면에 앱 컴포넌트 함수는
재실행되지 않습니다
그래서 이 헤더(header) 컴포넌트 함수 또한
이제는 재실행되지 않습니다