저번 시간 이후로 프로젝트를 직접 만들어 보셨을 것입니다
이번 시간에는 같이 해 보겠습니다
시작으로는 여기 소스 폴더(src)에
컴포넌트 폴더를 만들겠습니다
이 프로젝트에는 다양한 컴포넌트가 필요합니다
그리고는 사이드바 컴포넌트를 추가하여
나중에 다양한 프로젝트들간에
전환할 수 있게 해 주고
또 새로운 프로젝트를 추가할 수 있는
버튼도 만들겠습니다
이제 여기 컴포넌트 폴더에는
프로젝트 사이드바 파일(ProjectsSIdebar.jsx)을 추가합니다.
그리고 그 파일 안에 함수를 가져오겠습니다
제 컴포넌트 함수는 당연히
ProjectsSidebar입니다
이 컴포넌트에선 몇가지 JSX 코드를 반환하겠습니다
늘 하던 방식과 같습니다
그리고 여기선 내장되어있는 aside 컴포넌트를
사이드바의 내용을 감싸도록 반환하겠습니다
aside 컴포넌트에서는
'당신의 프로젝트'라고 하는 H2 요소로 시작하겠습니다
이 H2 밑으로
나중엔 저의 프로젝트 목록이 들어갈 것입니다
지금으로선 아무 것도 없으니
일단 넘어가겠습니다
대신에 이 H2 밑에 디브(div)를 추가하겠습니다
이것은 나중에 새로운 프로젝트를 시작할때 사용할
버튼을 포함합니다
이 버튼에는 '프로젝트 추가'라고 하겠습니다
이렇게 '+프로젝트 추가'라고
기호를 추가하겠습니다
이제 이 컴포넌트는 기본 구조를
모두 가지게 되었습니다
이 내용은 앱 컴포넌트로 돌아와서 사용할 수 있습니다
이 곳에 h1 요소를 내보내기보다는
앱 컴포넌트에서
저의 ProjectsSidebar 컴포넌트를 내보내겠습니다
이것은 당연히 프로젝트 사이드바 파일에서
출력하는 내용입니다
이제 여기의 프래그먼트(fragment)를
main의 요소로 바꾸겠습니다.
이 요소가 이 사이트의 주요 내용인
사이드바와
추가할 프로젝트의 상세 내용도 감싸게 됩니다
이제 저장을 하면 이곳에 사이드바가 보입니다.
지금은 별 내용이 없습니다만
다음 시간부터 형식을 더해 보겠습니다