[React] section 9, 10

Generic Event Handler

const inputChangeHandler = (input, value) => {
	setUserInput((prevInput) => {
    	return {
        	...prevInput,
            [input] : value
        };
     });
};

<input onChange={(event) => inputChangeHandler('curent-savings', event.target.value} type="number" id="current-savings" />

 

모든 입력에서의 변경 이벤트에 대해 항상 동일한 changeHandler 함수가 실행될 수 있다.

각자 다른 식별자와 값으로 실행된다.

 

 

재사용 가능한 Card component 추가

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

그래서 아래와 같이 해주어야 함.

const Card = (props) => {
  return (
    <div className={`${classes.card} ${props.className}`}>{props.children}</div>
  );
};

 

검증 추가

if (user.name.trim().length === 0 || user.age.trim().length === 0) {
      setIsValid(false);
    }
if (+user.age < 1) {
      setIsValid(false);
    }

 

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

// App.js
const addUserHandler = (name, age) => {
...
};

return
...
<AddUser onAddUser={addUserHandler} />

// AddUser.js
props.onAddUser(...);

 

상태 위로 올리기

 

모달 창 추가하기

백드롭 : 모달창과 실제 메인 페이지 사이에 겹쳐지는 부분

페이지의 나머지 부분과 상호작용 하지 못하게 하려면 사용해야 한다.

 

<div> Soup

실제 DOM으로 렌더링 될 때 리액트 컴포넌트가 많이 중첩될 수 있다.

불필요한 div 또는 기타 요소가 많이 있을 수 있다.

-> 스타일링에 영향을 줄 수도 있고 별로 좋은 관행은 아니다!

불필요한 요소를 렌더링 하기 때문

 

Wrapper

const Wrapper = props => {
	return props.children;
};

export default Wrapper;

 

Wrapper 컴포넌트는 리액트와 함께 제공된다.

-> 이것이 Fragment component!

 

Fragment

<React.Fragment></React.Fragment> // 항상 작동한다.
// or
<></> // 프로젝트 설정에 따라 다르다.

 

Wrapper와 마찬가지로 실제 HTML 요소를 DOM에 렌더링하지 않는다.

 

리액트 포털

포털에는 두 가지가 필요하다

컴포넌트를 이동시킬 장소, 그런 다음 컴포넌트에게 그 곳에 포털을 가져야 한다고 알려줄 필요가 있다.

// index.html
<div id = "backdrop-root"></div>
<div id = "overlay-root"></div>
<div id = "root"></div>

// ErrorModal.js
const Backdrop = (props) => {
return <div className={classes.backdrop} ...
...
};

const ModalOverlay = (props) => {
return (
	<Card> ...
...
}

const ErrorModel = (props) => {
return (
    <>
    {ReactDOM.createPortal(<Backdrop onClick={props.onConfirm} />, 
    document.getElementById('backdrop-root'))}
    </>
)
}

 

 

리액트 DOM은 브라우저에 대한 리액트용 어댑터의 일종이라 할 수 있다.

ReactDOM.createPortal은 JSX를 사용하는 어디에서나 사용할 수 있다.

 

Ref

다른 DOM 요소에 접근해서 그것들로 작업할 수 있게 해주는 것

모든 리액트 훅과 마찬가지로 , useRef도 함수형 컴포넌트 안에서만 사용가능하다.

// AddUser.js
const AddUser = (props) => {
  const nameInputRef = useRef();
  const ageInputRef = useRef();
  
  const addUserHandler = (event) => {
  ...
  	const enteredName = nameInputRef.current.value;
    ...
    nameInputRef.current.value = '';
    ...
    <input
    	...
        ref = {nameInputRef}
}

 

어떤 HTML 요소라도 참조 중 하나에 연결될 수 있다.

nameInputRef에 들어있는 것은 나중에 실제 DOM 요소가 될 것이다.

객체가 있고 이 객체에는 current 요소가 있다. (중요)

ref의 값은 항상 객체이고 항상 current prop을 가지고 있다.

current prop은 ref가 연결된 실제 값을 갖는다.

 

재설정 로직 : 리액트 없이 DOM 조작하기 일반적으로는 좋지 않은 방법이지만 사용자가 입력한 값을 재설정하려는 경우에는 써도 괜찮다.

 

state vs ref ?

= 값만 읽을거면 ref가 낫다.

 

제어되지 않은 컴포넌트

-> ref를 사용하면 리액트로 입력 요소의 state를 제어하지 않기 때문!

vs

제어되는 컴포넌트 

-> 내부 state가 리액트에 의해 제어됨.