07. 연습하기 : 연습 프로젝트 1

00. 개요

이름과 나이를 입력하고 그 내용을 아래에 추가 할 수 있고 제대로 입력값을 넣지 않았을 경우 모달창이 뜨는 것을 구현하는걸 연습한다.

01. "사용자" 컴포넌트 추가하기

input과 label을 연결해줄때 JS에서 쓰던 for를 여기서 그대로 쓸 수 없고 htmlFor로 해줘야한다.
input의 id와 label의 htmlFor의 값을 같게 설정해주면 된다.
css 모듈을 사용하기 때문에 이런식으로 classes로 불러오면 classes input으로 하면 된다.

02. 재사용 가능한 "카드" 컴포넌트 추가하기

Wrap의 역할을 하는 Card 컴포넌트는 재사용을 염두로 해서 작성을 해야 한다.
{props.child}를 기재해서 wrap 역할을 할 수 있게 한다.
그리고 기본적인 Card에 적용된 css랑 적용하는 컴포넌트에서 쓰는 스타일도 동시에 적용하기 위해선 그림가 같이 템플릿 리터럴을 이용해서 2개의 className이 적용되게 해주면 된다.
css파일의 내용물은 강의에서 제공..

03. 재사용 가능한 "Button" 컴포넌트 추가하기

button도 마찬가지로 css 모듈 사용으로 인해서 className을 해당상태로 지정해주고
type은 재사용을 감안해서 props.type으로 하였지만 props.type이 없을 경우에는 "button"이 뜨게 설정했다.
버튼태그 사이의 콘텐츠를 아웃풋으로 내도록 해야 해서 props.children을 사용해서 해당 콘텐츠를 커스텀 버튼의 태그 사이에 가져오게 한다.
css파일의 내용물은 강의에서 제공..

04. 사용자 입력 State 관리하기

onChange를 통해서 입력된 값을 state로 넣어주는 handler를 만들었다.
onSubmit을 하면 state 2개가 콘솔창에 출력되게 만든 상황이다(차후 기능추가전에 임시)

05. 검증 추가 및 로직 재설정하기

// 두번째 박스 오타
if(+enteredAge < 1) { return; }

input에 value를 추가하고 state를 넣고나서 핸들러 마지막에 state를 ""로 설정하게 하면 submit이후에 공란으로 만든다.
그리고 submit 과정에서 제대로 입력되지 않은 경우를 대비해서 if문으로 검증과정을 만들어준다.
age의 경우에 state를 선언할때도 문자열로 하기도 했고 input으로 입력되는 것들은 다 type이 string이기 때문에 조건문에서 enteredAge앞에 +를 붙여줘서 확실히 type이 Number가 되게 하였다.

06. 사용자 목록 컴포넌트 추가하기

재사용을 염두해두고 작성했기에 props를 받아서 사용하는걸로 작성했다.
map을 돌리는거는 array니까 props.users는 array라는걸 감안해야 한다

그래서 임시로 넣을때 users에 빈 배열이라도 넣지 않으면 에러가 뜨게 된다.
이런식으로 props로 데이터를 받고 UI로 출력만 하는 컴포넌트는 재사용이 용이하다.

07. State를 통해 사용자 목록 관리하기

현재 구조에서 AddUser의 기능이 작동되게 하려면 AddUser에서의 정보를 공통적으로 연결된 부모컴포넌트인 App으로 올리고 UserList로 뿌려줘야 한다.
adUserHandler를 props로 AddUser로 보내줘서 App으로 state를 끌어올린다.(핑크박스)
UserList에서 map 매서드를 써서 뿌릴것이기 때문에 id를 Math.random().toString()을 이용해서 임의로 만들어준다 .
올린 State를 UsersList 컴포넌트로 내려보낸다 (초록박스)

UserList에서 map으로 뿌려줄때 위에서 만든 id를 꼭 key를 넣어줘서 뿌려줘야 한다.

08. "ErrorModal" 컴포넌트 추가하기

재사용을 염두로 해서 작성하기 때문에 props를 받는걸 염두해두고 작성한다.
이 모달 컴포넌트가 컴포넌트 구조에서 어디에 위치할지에 대해서는 이견이 갈릴 수 있는데 어디서 쓰건 state를 잘 관리해서 써야 한다.

AddUser에 넣었기 때문에 이런식으로 props 지정해주는거 잊지 말고 해줘야한다.

모달창의 경우 창밖의 경우를 어둡게 오버레이하거나 바깥부분 누르면 모달창이 종료되는 식으로 구현해야 하기 때문에 이렇게 backdrop 부분을 만들어서 이렇게 넣어줘야 한다.

09. 오류 State 관리하기

모달창이 뜨는 상황을 통제하기 위해서 error state를 사용해야 한다.
error의 type을 객체로 유지해서 key는 동일하게 하고 value값만 다르게 설정했다.

error가 있을 경우만 작동하게 && 연산자를 사용해서 작성하고 props로 error를 null로 만들어서 false로 판단되게 해서 끄게 하는 기능을 보낸다.

그리고 받은 props를 버튼과 바깥부분에 onClick으로 넣어서 작동되게 한다.