리액트 form & list 애플리케이션

1. 구성요소 나누기

폴더에는 주제가 같은 컴포넌트를 넣어준다.
UI 측면의 컴포넌트는 UI라는 폴더를 만들어 넣어준다.

만약 User를 입력하고 리스트로 출력하는 애플리케이션을 만든다면
User Folder => AddUser, UsersList
UI Folder => Button,

---

UI Wrapper 컴포넌트 사용할 때 주의할 점

만약 Card라는 모서리가 둥글고 배경색이 하얀 컴포넌트를 만들었고
그 안에 Input, Button 등의 다른 컴포넌트를 넣어주어야 한다고 했을 때,
태그 사이의 값을 Card 컴포넌트가 인식할 수 있도록 props.children 넣어 주어야 함

/** Card.js */
function Card(props) {
	<div>{props.children}</div>
}

/** Wrapper.js */
return (<Card>
  	// 다른 컴포넌트
  </Card>);

그리고 통상적으로 쓰이는 것들에 대해서 미리 props 속성을 지정해주고
부모 컴포넌트에서 props로 그때그때 필요한 값이나 함수를 지정해 줌

/** Button.js */
return (<button
	type={props.type}
    onClick={props.onClick}
>{props.children}</button>)

2. 상태 나누기

만약 input이 여러가지인데 각 input에 따라서 다른 검증이 필요하다면
각자의 상태로 관리하는 것이 좋다.

3. 유효성 검증하기

상태의 초기값을 "" 빈 값으로 설정하고 만약 입력값에 따라 검증이 필요하다면
form을 제출하는 함수 안에서 상태를 가져와 검증할 수 있다.
만약 숫자로 비교해야 하는데 초기값을 빈 값으로 하기 위해 "" 이렇게 설정했다면
변수 앞에 +를 붙여 숫자로 변환한 후에 검증하도록 한다.

4. 입력 받은 데이터 출력하기

먼저 어디에 데이터를 출력할 것인지를 정하고
둘째로는 그 데이터를 어디에서 처리할 지를 정해야 한다.
만약 데이터가 있는 곳과 데이터를 출력하는 곳이 다르다면 props를 통해 전달한다.
그렇기 때문에 보통 데이터는 데이터를 출력하는 컴포넌트의 상위에 보관한다.