이번 시간에는
새로운 프로젝트를 추가하도록 작업하겠습니다
새 프로젝트(New Project)라는 컴포넌트를 만들겠습니다
이 컴포넌트에서
새로운 프로젝트에 필요한 데이터의
입력값을 볼 수 있습니다
여기서 이전처럼 새로운 컴포넌트인
NewProject를 내보내겠습니다
이 컴포넌트 함수에
디브(div) 하나를 내보내서
이 디브에
메뉴(menu) 소를 추가하겠습니다
이것들은 모두 기본으로 제공되는 요소입니다
모두 소문자로 시작하므로
기본적으로 제공된다는 것을 알 수 있습니다
여기서 버튼 두 개를 내보내겠습니다
바로 취소와 저장 버튼입니다
이 메뉴 밑으로 디브 하나를 추가해
다양한 프로젝트 입력을 가능하게 하겠습니다
즉 프로젝트 상세 내용에 대한 입력값입니다
여기에 양식을 하나 추가할 수도 있고
위치상 양식이 더 적절할 수는 있지만
양식을 사용하는 방법은
이후에 더 알려드리도록 하겠습니다
이 강의의 후반에
양식과 사용자 입력값 처리 방법에 대한
섹션을 따로 만들어 두었ㅅ습니다
리액트 앱에서 양식을 사용할 때
필수적으로 알아야 할
중요한 내용을 모두 다루고 있습니다
그러므로 여기에서는 일단 디브로 작업하겠습니다
이 디브 안에 문단(p)을 추가하여
그 안에 라벨(label)과 입력값(input)을 넣습니다.
이 걸 세 번 반복하겠습니다
기본적으로 입력이 필요한 곳은
프로젝트의 제목(Title)
프로젝트의 상세설명(Description)
그리고 프로젝트의 마감일(Due Date)입니다
상세설명에는
문자 영역을 추가하여
조금 더 긴 문구를 넣을 수 있게 합니다
이제 여기 아주 비슷한 세 가지의
JSX 구조를 만들었습니다
이제 새로운 컴포넌트로
입력 컴포넌트를 추가하면
이 구조체를 감쌀 수도 있고
코드 재사용도 가능합니다
또 계속 똑같은
테일윈드 CSS 클래스를 반복하지 않아도 됩니다
그러니 여기 입력 파일(Input.jsx)에
Input이라는 새로운 함수를 내보내겠습니다
그리고 여기에 문단을 반환할 때는
라벨이 있고
또 입력값(input) 혹은 문자 영역(textarea)이 포함됩니다
그렇다면 이 함수는
속성을 사용하여 구성이 가능합니다
예를 들면 문자 영역이나
isTextarea 속성을 input 컴포넌트에 넣을 수 있습니다
이것이 True라면
Textarea 를 렌더링하고
False라면 입력값을 렌더링합니다
이것을 문자 영역(textarea)이라고 하겠습니다
그리고 이 라벨 밑으로는
문자 영역이 True인지 확인합니다
만약 그렇다면
이곳에 문자 영역을 내보내고
그렇지 않다면 입력값 요소를 내보냅니다
이렇게 작동하게 됩니다
이 작업의 의의는
이 input 컴포넌트에 라벨 속성을 추가하는 것입니다
이런식으로 라벨을 설정하였습니다
그리고 다른 속성을 가져올 텐데
여기서 가져올 수 있는 모든 속성입니다
이렇게 하면 남은 속성을 펼쳐서
문자 영역이나 입력값에 펼칠 수 있습니다
그러면 문자 영역과 입력값은
이 컴포넌트 밖에서도 구성할 수 있게 됩니다
새 프로젝트 파일로 돌아와서
이 세 문단을 지금 새로 추가된
입력값 속성으로 바꿉니다
당연히 이것은
입력 파일(Input.jsx)에서 가져오는 것입니다
그러면 여기 다른 라벨 설정만 하면 됩니다
서로 다른 입력값을
정확하게 가져오는 것이 중요합니다
첫 번째 입력값의 라벨은 제목(Title)이고
두 번째 입력값은 상세 설명(Description)
세 번째는 마감일(Due Date)입니다
두 번째 입력값에는
이렇게 문자 영역도 추가합니다
True로 세팅할 수는 있지만 불필요하므로
이렇게만 해도
True로 설정됩니다
그렇게 하면 이 곳에 문자 영역이 렌더링됩니다
이제 여기 새로운 프로젝트 컴포넌트가 생겼습니다
아직 형식은 편집되지 않았지만
이제 이 컴포넌트를
앱의 사이드바 옆에 두고 사용하고 싶습니다
나중에는 버튼을 클릭해야만
보이게 되겠지만
지금은 항상 띄워 놓겠습니다
먼저 여기에 NewProject 컴포넌트를 가져오고
여기에 내보내겠습니다
그리고 이게 사이드바 밑이 아닌
옆에 보여지도록
메인 요소에 flex 클래스를 추가하여
Flexbox를 활성화시킵니다
gap-8을 추가하여
이 요소들 사이에
2rep의 틈이 생겼습니다
이제 저장을 해서
확인해 보니 사이드바가
전체 높이를 차지했습니다
flexbox가 길이를 자동으로 늘렸기 때문입니다
그리고 옆으로는
입력값 요소들이 보입니다
아직 형식 설정은 되지 않았지만
화면에 띄우는 것으로 일단 작업이 끝났습니다