• 기존 JS처럼 직접 DOM에 접근하는 것이 React 스럽지 않다. 따라서 여러 hook, reducx 사용 ( JS 문법이 정해져있지 않아 경우에 수와 코드 방식이 너무 다양한 단점. )

  → 이를 위한 useRef(); 사용
  

import React, { useRef, useState } from 'react'
import styles from './AddUsers.module.css';
import Button from '../UI/Button';
import Card from '../UI/Card';
import ErrorModal from '../UI/Modal/ErrorModal';

const AddUsers = ({onAddUser}) => {
    // 에러 상태 관리(제목, 내용) - 에러 모달창 나오는 조건문 부여를 위한 !
    const [error, setError] = useState(null);

    **// ❕❕useRef로 DOM 조작하기 
    const usernameRef = useRef();
    const ageRef = useRef();**
    
    // 유저 등록 함수
    const userSubmitHandler = (e) => {
        e.preventDefault();

        **const userValue = {
            // 위에 useRef()로 만들어 놓은 현재값 사용하는 방법
            username: usernameRef.current.value,
            age: ageRef.current.value
        };**

        // 입력값 검증 - 1. 공백일 때
        if (userValue.username.trim() === '' || userValue.age.trim() === '') {
          setError({
            title: '유효하지 않은 입력값 입니다.',
            message: '입력값은 공백으로 작성하면 안됩니다.'
        });
            return;
    }

    // 2. 나이가 0이거나 음수일 때 입력값 검증
    if (+userValue.age < 1) {
        setError({
            title: '유효하지 않은 나이 범위 입니다.',
            message: '나이는 0이나 음수가 될 수 없습니다.'
        });
            return;
    }

    // App.js에서 유저 추가하는 객체 가져오기
    onAddUser(userValue);
}

// 하위 컴포넌트 ErrorModal에게 모달을 닫는 조건을 수행하는 함수 전달
const modalCloseHandler = () => {
    // 위 입력값 검증에서 true가 된 상태를 다시 돌려줘서 닫기 !
    setError(null);
};

  return (
    <>
    {/* 에러가 널이 아니면 에러 모달창 보여지게 해라 - 모달창 닫는 조건 함수 보내기 */}
    {error ? <ErrorModal onClose={modalCloseHandler} title={error.title} message={error.message}/> : ''}
    <Card className={styles.input}>
        <form onSubmit={userSubmitHandler}>
            <label htmlFor='username'>이름</label>
            <input
            id='username'
            type='text'
            ref={usernameRef}
            //onChange={usernameChangeHandler}
            //value={userValue.username}
            />
            <label htmlFor='age'>나이</label>
            <input
            id='age'
            type='number'
            ref={ageRef}
            //onChange={ageChangeHandler}
            //value={userValue.age}
            />
            <Button type='submit'>가입하기</Button>
        </form>
    </Card>
    </>
  )
}

export default AddUsers

• useEffect() → side effect 무한 렌더링 되는 문제를 해결하기 위한 Hook !

특정 페이지에 들어오면 맨처음 화면에 렌더링할 것을 보여주는 역할을 한다.

렌더링이 끝난 후 비동기처리를 하여 댓글, 게시글, 로그인창 등 CRUD가 근본인 페이지에 필요한 훅이다.

• useReducer() →

• useContext() →