[React] Udemy 강의 노트 4-2

 

 

양식 입력 추가하기

- 양식 입력을 위한 form 태그를 별도로 분리한다.

- input[type="number"]는 step을 설정할 수 있고

- input[type="date"]는 날짜 선택기를 제공하고, 날짜의 범위를 min과 max로 지정할 수 있다.

 

 

사용자 입력 리스닝Listening

- 입력에서 발생하는 이벤트를 가지고 와서 저장하기

- 우선 요소에게 리스너를 추가해야 한다.

-  onInput이나 onChange는 같은 타입의 input에 사용할 수 있다.

- onChange={함수} 로 붙일 수 있고 onChange={함수()}처럼 실행하지 않는다.

- addEventListener를 사용했 던 것처럼 event를 인자로 주게 되면 자동적으로 변경 이벤트가 발생했을 때 이벤트 객체를 받을 수 있게 해준다.

- event를 받아서 event.target으로 input의 value 프로퍼티를 받을 수 있다.

 

 

여러 state 다루기

- useState 훅을 사용해서 값을 저장할 수 있다.

- 그럼 여러개의 state를 어떻게 저장할 수 있을까?

- useState를 여러번 호출한다. 그리고 이것은 가능한 솔루션이다.

 

 

State 대신 사용하기 (그리고 더 나은 방법)

- 여러번 State를 호출하는 것보다 나은 방법이 있다.

- state를 객체로 묶을 수 있다.

- 그리고 기존 값을 복사하기 위해 ... 스프레드 연산자를 이용해 기존 값을 복사해온다.

 

이전 State에 의존하는 State 업데이트

- 하지만 스프레드 연산자는 좋은 방법이 아니다.

- 이전 state에 따라 상태를 업데이트 하게 된다. 이전 state를 세 개의 상태로 접근하는 것이 아니라 하나로 접근하고 있기 때문이다.

- 기존 값을 복사하기 위해 이전 state의 스냅샷에 의존하고 새로운 값으로 오버라이드 한다.

- 그래서 상태를 업데이트 하기 위한 대체 폼을 사용해야 한다.

- setUserInput 를 호출해서 익명 화살표 함수를 사용한다.

- 익명 화살표 함수는 새로운 state를 return 한다.

setUserInput((prevState) => {
	return {...prevState, enteredTitle: event.target.value}
});

- 이유는 리액트가 상태 업데이트 스케쥴을 가지고 있어서 바로 업데이트 하지 않는다는 점이다.

- 그래서 동시에 수많은 상태 업데이트를 계획하면 오래된 데이터 스냅샷에 의존할 수도 있다.

- 항상 최신 상태의 스냅샷을 보장하기 위해서 함수를 사용한다.

 

 

양식 제출 처리

- 버튼을 눌렀을 때 여러개의 state를 객체로 만들어 보내려고 한다.

- 버튼의 타입이 submit이면 form 이벤트에서 수신할 수 있는 이벤트를 생략하게 된다.

- 그래서 form에 onSubmit을 붙여서 Form을 보낸다.

- onSubmit의 기본 동작은 페이지를 리로드 시키게 되는데 이것을 방지하기 위해 event.preventDefault(); 를 사용한다.

- state에 담긴 value를 객체로 만들어준다.

 

 

양방향 바인딩 추가

- state를 이용해서 양방향 바인딩을 구현할 수 있다.

- 변경되는 입력값만 수신하는 것이 아니라 입력에 새로운 값을 재설정할 수 있다.

- 양방향 바인딩은 form 작업할 때 좋다.

 

자식 대 부모 컴포넌트 통신(상향식) 

- props로 부모에서 자식으로 데이터를 넘길 수 있었다. 그리고 중간 컴포넌트를 생략할 수 없다.

- 함수를 props로 내려보내서 실행할 수 있다.

- 컴포넌트끼리 그리고 자식에서 부모 컴포넌트로 소통하는 방법으로 자식 컴포넌트에서 부모 컴포넌트에 있는 함수를 실행하는 것이다.

 

State 끌어올리기

- 데이터를 자식 컴포넌트에서 부모 컴포넌트로 이동시키기 위해 props를 통해 부모에서 자식으로 함수를 받아 데이터를 전달했다.

- 이것이 상태 끌어올리기 개념이다.

- 나란한 형제 컴포넌트에서는 상태를 바로 전달할 수 없다.

 

- 부모에서 자식으로, 자식에서 부모로만 소통할 수 있다.

- 그래서 연관된 데이터를 다루는 컴포넌트들은 공통된 부모를 가지는 것이 좋다.

 

제어된 컴포넌트와 제어되지 않은 컴포넌트 및 Stateless 컴포넌트와 Stateful 컴포넌트

- 제어되는 사용자 지정 컴포넌트를 생성

- 제어는 부모 컴포넌트에서 한다.

- 무상태 컴포넌트와 상태 컴포넌트의 의미

- 모든 리액트 앱에서는 일부 상태를 관리하는 몇 개의 컴포넌트를 가진다.

- state가 없는 컴포넌트를 프리젠테이셔널 혹은 dumb 컴포넌트라고 한다.

- state 가 있는 컴포넌트를 smart 컴포넌트 혹은 stateful 컴포넌트라고 한다.

- 부정적 의미가 아닌 상태를 나타낸다.