[React] Udemy 강의 노트 8

 

 

 

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

- for은 class처럼 htmlFor로 사용해야 한다.

- form의 기본 제출 동작을 막기 위해 e.preventDefault()를 사용한다.

- useState에서 객체의 state를 업데이트 할 때는 

    setUserDate((prev)=>{
      return {...prev, name: e.target.value}
    })

처럼 함수 return 값으로 기존 정보 prev를 Deep copy 해주고 key로 업데이트 한다.

 

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

- props.children를 통해 컴포넌트의 여닫는 태그 사이의 JSX코드에 접근할 수 있다.  

- 사용자 정의 컴포넌트들은 이 className이라는 속성과 어떻게 작업해야 하는지 모른다.

- 그래서 props에 잠재적으로 들어오는 클래스에 적용되게 해야한다.

<div className={`${classes.card} ${props.className}`}>

- 이렇게 내부에 정의한 클래스에 외부 클래스를 추가해서 확장할 수 있다.

 

 

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

- 리액트는 대부분 내장된 컴포넌트나 HTML 컴포넌트들로부터 컴포넌트를 구성하지만 특정한 방식으로 그것들을 구조화하고 어떤 로직을 첨부해서 각자의 컴포넌트를 만든다. 

 

 

사용자 입력 State 관리하기

- useState는 항상 두 개의 정보를 반환하기 떄문에 구조분해할당으로 각각 할당한다.

 

 

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

- input이 현재 상태를 반영하도록 value를 통해 현재 state를 반영할 수 있다.

- input으로 받은 string 형태의 숫자를 숫자로 비교하기 위해서는 값 앞에 +를 붙여주면 숫자형으로 비교할 수 있다. (+enterAge)

 

 

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

- 리액트는 독립된 html 코드와 로직들로 구성된 수많은 컴포넌트로 작업하고 모든 컴포넌트는 고유의 권한과 기능을 가진다.

- map은 배열과 JSX요소를 매핑한다.

 

 

 

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

- 상태 끌어올리기 개념

- 데이터를 관리하기 위해 적절하게 상위에 있는 컴포넌트에서 상태관리를 한다.

 

 

 

"ErrorModal" 컴포넌트 추가하기

- 

 

 

오류 State 관리하기

- truly 값 일 때 작동하게 만든 모달을 falsy 값으로 바꿔준다.