이번 시간에 확인할 것은
이 내용이나
아니면 이 NewProject 컴포넌트를 띄우는 것인데
'프로젝트 추가' 버튼을 눌렀는지
'새 프로젝트 만들기' 버튼을 눌렀는지에 따라 달라집니다
이 작업을 위해서는 상태(state)가 필요합니다
상태는 특정 내용을
조건부로 렌더링할 수 있게 합니다
그리고 그 상태는
앱 컴포넌트에서 관리합니다
여기에서 어떤 컴포넌트를 띄울지
결정하기 때문입니다
따라서 여기에 useState 훅(hook)을 쓰겠습니다
이 훅은 리액트에서 가져오는 것이므로
import를 꼭 사용해야 합니다
여기에서는 이 상태가
어떤 컴포넌트를 띄울 지 결정하게 됩니다
여러 방법으로 접근 가능하겠지만
제가 사용할 방식은 이것입니다
객체를 상태로서 제어하되
이 객체는 selectedProject라는 속성을 가지는데
우선 정의되지 않음(undefined)으로 설정하겠습니다
널(null)을 사용하는 것이 아님을 주목하시기 바랍니다
이렇게 하는 이유를 곧 보여드리겠습니다
그리고 여기에 프로젝트 배열(array)을 넣어서
나중에 유저가 생성한 프로젝트들을
여기에 추가하겠습니다
이 상태를 projectsState 라고 이름 짓겠습니다
적절한 이름인 것 같습니다
그리고 업데이트를 위하여 setProjectsState를 사용하겠습니다
selectedProject 설정을 여기에 추가해서
정의되지 않은 값을 준 이유는
selectedProject 속성을
사용해서
나중에 프로젝트가 여러 개 있을 때
그 중 선택된 프로젝트의 ID를 저장하겠습니다
널값은 새로운 프로젝트를 추가하고 싶을 때 사용하고
정의되지 않은 값은 추가한 새 프로젝트가 없거나
아무 프로젝트도 선택하지 않았을 때 사용합니다
물론 이 방법 이외에도 몇 가지 더 있습니다
예를 들어 상태 하나를 더 추가해서
이름을 currentAction으로 해서
프로젝트 추가
선택된 프로젝트, 선택된 프로젝트 없음 등
어떤 내용을 띄울 지
선택할 수 있습니다
하지만 저는 최소한의 상태를 사용하기 위해
이 속성을 재사용하여
selectedProjectId로 다시 이름을 짓겠습니다
목적에 더 알맞는 이름입니다
즉 초기 상태에는 정의되지 않은 값으로
새로운 프로젝트를 추가하지도 않고
선택도 하지 않았다는 뜻입니다
이 상태는
'프로젝트 추가' 버튼을 누르면 바뀔 것입니다
이 때에는 널값으로 변합니다
앱 컴포넌트 안쪽에
새로운 함수를 추가해서
handleStartAddProject라고 칭하겠습니다
이 함수가 실행되는 경우는
여기 두 버튼중 하나를 클릭해
새로운 프로젝트를 만들 때입니다
그 안에서 프로젝트 상태를 업데이트 하겠습니다
당연히 업데이트 중에
이전 상태를 잃어버리면 안 됩니다
왜냐하면 이전 상태에
그 전 프로젝트들이 포함되기 때문에
빈 배열이 아닌 상태이기 때문입니다
즉 여기서 필요한 함수는
이전 상태를 가지고
업데이트 된 상태를 반환하는 것입니다
selectedProjectId를 널값으로 설정하겠습니다
이전에 설명했듯이 이것은
우리가 새로운 프로젝트를 추가한다는 신호입니다
Undefined는 아무것도 안 하고 있다는 뜻이고
Null은 새로운 프로젝트 추가를 의미합니다
당연히 이것은 저의 방식이며
여러분은 다른 방식으로 작업하셔도 됩니다
이전 속성을 그대로 가지고 있도록
이 새로운 리턴(return) 객체에
기존의 상태를 펼치겠습니다
이제 handleStartAddProject를
NoProjectSelected 쪽으로 연결해야 합니다
그렇게 하면 이 버튼에 연결할 수 있습니다
그러기 위해 속성을 추가하여
onStartAddProject이라고 칭하겠습니다
이것을 방금 추가한
handleStartAddProject 함수에 연결하겠습니다
사이드바에서도 똑같이 합니다
왜냐하면 여기 있는 버튼도
프로젝트를 추가하기 때문입니다
이제 이 컴포넌트로 가서
onStartAddProject 속성을 받아서 구조 분해(destructure)합니다
예를들어 ProjectSidebar 컴포넌트에서는
이쪽에서 구조 분해하여 이 버튼과 연결시킨 뒤
여기서 onClick 속성을 추가하고
onStartAddProject으로 가리키겠습니다
handleStartAddProject 함수의 포인터(pointer)는
이 버튼 안에 있는 onClick 속성으로 향합니다
기억해야할것은 버튼의 onClick 속성은
다른 모든 속성과 같이 모여저
버튼 기본 내장 요소에 펼쳐지게 됩니다
그렇게 해야 이 모든 연결 구조를 만들 수 있습니다
그렇게 하여
이제 사이드바 안의
NoProjectSelected 컴포넌트 안에서
새로운 프로젝트를 생성 할 수 있게 되었습니다
OnStartAddProject 속성을 받아서
이 버튼과 연결하되
거기 있는 onClick 속성으로 보내면서 작업하겠습니다
이제 두 가지 컴포넌트가 연결되었으니
여기서 projectState을 사용하여
이 컴포넌트나 NewProject 컴포넌트를 렌더링 할 수 있습니다
이쪽에 변수로 content를 추가하겠습니다
여기서 체크할 것은
만약 projectsState.selectedProjectId가 널 상태라면
이전에 얘기했듯이 그것은
우리가 새 프로젝트를 추가한다는 의미입니다
여기서 content는
이 NewProject 컴포넌트와 동일하다고 하고
만약 projectsState.selectedProjectId인 경우에는
정의되지 않은 값와 동일하다고 하겠습니다
content를 저의 NoProjectSelected 컴포넌트와
동일하다고 하겠습니다
마지막은 여기있는 컴포넌트로
이걸 가져와서 사용하겠습니다
나중에는 content가
선택된 프로젝트를 가지고 있게 됩니다만
우선은 이 두 가지의 컴포넌트 뿐이니
이제 아래쪽 사이드바 옆으로
출력하시면 됩니다
이렇게 상태를 활용하면
저장하고 새로고침 하였을때
처음에는 대체 화면이 보입니다
하지만 이 버튼을 클릭한다면
새로운 프로젝트 컴포넌트로 넘어갑니다
다시 새로고침하고 이 버튼을 눌러도 동일합니다
다음 시간에는
이 입력값을 모두 모아서 새로운 프로젝트를 만들고
그 버튼들이 작동하도록 만들어보겠습니다