이제 리액트의 핵심 개념을
몇 가지 배웠습니다
가장 중요한 컴포넌트와 속성(props)를 배웠고
리액트에 더 심도 있게 배우기 전에
리액트 개념을 몇 가지 더 배워야 합니다
이 코드의 구조를 바꾸려고 하려고 하는데
이유는
헤더 컴포넌트
CoreConcept 컴포넌트, 앱 컴포넌트인
모든 컴포넌트가 한 파일에 있기 때문입니다
모두 이 App.jsx 파일에 있습니다
엄밀히 따지면 상관 없지만
리액트 작업물의 크기가 계속 커지면서
컴포넌트도 계속 추가되어
파일도 함께 커지기 때문에
한 파일에 모두 저장하는 것은 추천하지 않습니다
이러한 컴포넌트 간에 작업하다보면
파일에 컴포넌트가 많을수록
다른 컴포넌트를 찾는 것이 어려워질 것입니다
그런 이유로 보통 별도의 컴포넌트는
별도의 파일에 저장하는 것이 좋습니다
다수의 컴포넌트가
한 파일에 저장되는 것은
아주 드문 이례적인 경우로
두 개 컴포넌트의 연관성이 매우 높거나
둘이 함께 있어야 작동하는 경우가 있습니다
결국 이론적으로도 컴포넌트가
다른 위치에 있다면 제대로 작동이 안되는
경우를 의미합니다
물론 모든 컴포넌트는
최소한 이론적으로라도 독립적으로 사용할 수 있습니다
따라서 여기에 'CoreConcept'과 'Header' 컴포넌트를
저장 할 새 파일을 만들겠습니다
이 과정은 보통
src 폴더에 추가할 수 있는
별도의 하위폴더에 저장됩니다
사실 필수는 아니지만
매우 일반적인 선택이자 방식입니다
이렇게 만들어진 컴포넌트 폴더에
컴포넌트 코드 파일을 생성할 수 있습니다
관례적으로 파일명은
컴포넌트 이름과
동일하게 저장합니다
따라서 헤더 컴포넌트를 파일에 저장하고 싶다면
파일명을 Header로 지정하고
JSX 코드가 포함되므로
.jsx 확장자를 추가합니다
이제 App.jsx 파일에서
헤더 컴포넌트 함수를 잘라내
Header.jsx 파일에 붙일 수 있습니다
이 컴포넌트 함수에
ReactDescriptions 배열과
genRandomInt 함수를 언급하므로
이 두 가지도 잘라서 Header.jsx 파일에
붙이겠습니다
이로써 이 컴포넌트 함수가
별도의 파일에 아웃소싱 되었습니다
마지막으로 App.jsx 파일에도
사용을 원하기 때문에
여전히 작동되는지 확인해야 합니다
다른 파일에서 컴포넌트 함수 사용이 가능하려면
export 기능을 사용해야 합니다
자바스크립트의 export 키워드로 할 수 있습니다
이와 같이 이름이 정해진
export를 할 수 있고
default 키워드를 추가해
기본 export를 할 수 있습니다
대부분의 리액트 프로젝트는
기본 export 방법을 사용하고
결국 선택은 여러분에 달렸습니다
여기 export 문장을 추가하고
App.jsx 파일로 돌아갑니다
헤더 컴포넌트를 사용하기 위해
이 곳에 import를 추가해야 합니다
이것도 Header라고 표기할 수 있습니다
이름이 대문자로 시작하는 것이
아주 중요합니다
./components에서 import되면
컴포넌트 폴더를 App.jsx 파일과 연계하여
살펴볼 수 있습니다
이와 같이 Header.jsx를 가리킬 수 있습니다
이 import가 추가되면
이 헤더 컴포넌트를 계속 앱 컨포넌트의
JSX 코드에 사용할 수 있습니다
헤더 컴포넌트의 JSX 코드에 있는
reactImg를 사용하기 때문에
reactImg의 import 문장을 잘라서
Header.jsx 파일에 붙이기만 하면 됩니다
src 폴더의 중첩 폴더 안에 있는
Header.jsx 파일에 있기 때문에
경로도 조정해야 합다
따라서 assets 폴더에 있는 파일을
지정하려면 먼저 컴포넌트 폴더
윗 단계로 올라가 src 폴더에 직접 들어간 후
assets 폴더로 들어가 이미지를
찾아야 하기 때문에
이 경로는 더 이상 작동하지 않습니다
따라서 Header.jsx 안의
import 경로에서 '../'를
입력해 한 단계 올라간 후
src 폴더에 있을 때
assets 폴더에 들어가
이미지를 찾을 수 있습니다
이 경로를 조정하고 모든 파일을 저장하고
다시 돌아가면 이전과 동일한 결과나 나타납니다
이제 헤더 컴포넌트를
별도의 파일에 저장했습니다
이제 CoreConcept 컴포넌트에도
동일한 작업을 수행할 수 있습니다
이를 위해 이 컴포넌트 폴더에
CoreConcept.jsx 파일을 추가하고
여기에서 CoreConcept 함수를 선택합니다
자른 후 CoreConcept.jsx 파일에 붙입니다
export 문장을 제외하고는
아무것도 필요하지 않습니다
여기에서도 기본 export 문법을 사용하여
./components CoreConcept.jsx에서 CoreConcept를
App.jsx에 import할 수 있습니다
따라서 이 CoreConcept 컴포넌트를
이 App.jsx 파일에서 계속 사용할 수 있습니다
이제 저장하면
여전히 작동하는 것을 볼 수 있지만
모든 컴포넌트가 개별적인 폴더에 저장되어 있어
가장 흔하고 최적의 방법을 사용 중입니다