리액트 Form으로 만든 애플리케이션 기초

1. 논리적으로 크게 컴포넌트를 나누어 폴더별로 관리한다.

• 헤더
• 메인 (폼 등)
• 푸터 (결과)

2. 이벤트를 추가해준다.

• Form을 Submit한다.
• 버튼을 클릭한다.

등과 관련된 이벤트를 해당 컴포넌트 안에 추가해준다.

제네릭 이벤트 핸들러 함수 생성

만약 input값이 여러개여서 변경되는 값을 같은 함수로 처리하고 싶다면,
제네릭 이벤트 핸들러 함수를 만들고 매개 변수를 통해 구분한다.
그리고 이 함수는 매개 변수를 받아야 하기 때문에 해당 요소에 연결할 때
익명의 화살표 함수를 통해 받아와야 한다.

// 함수 정의
const inputChangeHandler = (type, value) => {
	// ... 
}

<input onClick={(event) => 
	inputChangeHandler(type, event.target.value)
} type='text' id='name'></input>

3. 상태 관리가 필요한 요소를 식별한다.

만약 여러 개의 값을 하나의 상태로 관리하고 싶다면 기본값을 객체로 설정하고
상태값이 변경 될 때 변경된 값 외 나머지 값도 함께 포함하여 관리해야 한다.

const inputChangeHandler = (type, value) => {
  setUserInput((prevUserInput) => {
    return {
      // 이전 상태 값을 그대로 받아옴
      ...prevUserInput,
      [type]: value,
    };
  });
};

4. 상태 끌어올리기 (자식에서 부모로 데이터 받아오기)

만약 자식 컴포넌트에서 데이터가 생성이 되고, 그 데이터를 부모로 끌어올려야 한다면
부모에서 자식 컴포넌트를 넣을 때 props에 함수를 넣어서 보내고
자식에서 이벤트를 호출할 때 해당 함수를 실행하면 부모에서 그 데이터를 받을 수 있다.

/** 부모 컴포넌트 */
const submitHandler = (userInput) => {
	// ..
  	console.log(`부모 컴포넌트 콘솔 로그`);
  	console.log(userInput) // 자식에서 받아온 input data
}
<Child onSubmit={submitHandler} />
  
/** 자식 컴포넌트 */
const submitInputHandler = () => {
	// ..
  	props.onSubmit(userInput);
}
<form onSubmit={submitInputHandler} ></form>

자식 컴포넌트에서 받아 온 데이터를 처리하는 방법은 두 가지가 있을 수 있다.

1. userInput을 받을 때 userInputData 상태 업데이트

const [userInputData, setUserInputData] = useState(null);
const submitHandler = (userInput) => {
	// 데이터 처리 로직
  	// ...
    setUserInputData(userInput);
}

2. userInput을 받을 때마다 App 컴포넌트 함수 재실행

const [userInputData, setUserInputData] = useState(null);
const submitHandler = (userInput) => {
	setUserInputData(userInput); 
}

if (userInput) {
  // 데이터 처리 로직
  // ...
}

1번의 방법으로 진행할 경우 아래 두 가지의 단점이 있었음

• 1) inputData, 계산된 데이터 두 개에 대한 상태 관리가 필요함
  : 계산된 데이터를 상태 말고 변수로 담으려면 그에 필요한 로직이 또 필요함..
• 2) inputData의 초기값을 부모와 자식 컴포넌트에 두 번 선언해 주어야 함

그래서 2번의 방법이 더 효율적이다!