73일차 리액트 [ State, useRef, React Hooks]

[ state로 입력값 관리 - e.target.value ]

1) Join2.jsx

import { useState } from "react";

const Join2 = () => {
    const [input, setInput] = useState({
        name: "",
        email: "",
        language: "",
        memo: "",
    });

    const onChangeName = (e) => { //함수
        setInput({
            ...input,
            //[e.target.name]:e.target.value,
            name: e.target.value,
        });
        console.log(e.target.name + " " +e.target.value);
    };

    const onChangeEmail = (e) => {
        setInput({
            ...input,
            email: e.target.value,
        });
    };

    const onChangeLanguage = (e) => {
        setInput({
            ...input,
            language: e.target.value,
        });
    };

    const onChangeMemo = (e) => {
        setInput({
            ...input,
            memo: e.target.value,
        });
    };

    return (
        <div>
            <div>
                <input onChange={onChangeName} placeholder={"이름써라"} value={input.name} />
                {input.name}
            </div>

            <div>
                <input onChange={onChangeEmail} placeholder={"이메일써라"} type="email" value={input.email} />
                {input.email}
            </div>

            <div>
                <select value={input.language} onChange={onChangeLanguage}>
                    <option value="java">자바</option>
                    <option value="c">c언어</option>
                    <option value="c++">c++</option>
                </select>
            </div>

            <div>
                <textarea value={input.memo} onChange={onChangeMemo} />
                {input.memo}
            </div>
        </div>
    );
};

export default Join2;

 

 

---

[ useRef ]

1) useRef 코드 추가 (나머진 위의 코드랑 같음) 

import { useState,useRef } from "react"; //한줄로 import

const Join2 = () => {

const [input, setInput] = useState({

name: "",

email: "",

language: "",

memo: "",

});

const ref=useRef(0);

console.log(ref);

console.log(ref.current);

const ref=useRef(); //값을 비워나서 current: undefined라고 뜸 

console.log(ref);

Prototype: Object 확인 !!!

const ref=useRef(0); //값을 0으로 줘서 current: 0이라고 뜸 

console.log(ref);

console.log(ref.current);

 

2) return 코드 수정 

return (

    <div>

        <div>

             <button onClick={()=> {

                     ref.current++;

                     console.log(ref.current);

               }}

               >1씩 더해줘 !</button>

        </div>

 

 

 

---

[ useRef ]

    - useRef : 특정변수에 접근해 요소 조각 가능 !

    - 새로운 Reference 객체를 생성하는 기능​

    - 어떠한 경우에도 리렌더링 유발하지 않음 ->  (useState랑 차이점 알아두기)​

    - 컴포넌트 내부의 변수로 활용 가능​

    - useState : 값이 변경되면 컴포넌트 리렌더링됨

const ref = useRef();
<div>
     <textarea ref={ref}/>     //요소 조작 가능 
<div>​

 

    - State 변화 -> 렌더링 -> 컴포넌트 내부 변수 초기화

    - Ref 변화 -> 렌더링 x -> 변수들 값 유지됨​ -> 변화는 감지하지만 렌더링은 발생하지 않는다 !!! (useRef)​

    - ​useRef를 사용해 손쉽게 input 접근 가능​ -> (getElementById, querySelector와 비슷)

 

 

[ React Hooks (클래스/함수) ]

   - React Hooks : 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 사용​

      ex) useState : State 기능을 낚아채오는 Hook​

            useRef : Reference 기능을 낚아채오는 Hook  ..20개 정도 있음​

    - ​클래스 컴포넌트 : 모든 기능을 이용할 수는 있지만, 문법이 매우 복잡​

   - ​함수 컴포넌트 : UI 렌더링만 할 수 있음

   - 함수 컴포넌트 + Hooks : UI 렌더링 + 

   - 리액트 훅들은 함수 컴포넌트 내부에서만 호출 가능​​

   - 조건문, 반복문 내부에서 호출 불가능​​

   - 개발자만의 Custom Hook 제작 가능 -> use로 시작해야함 (이름이 무조건 그래야 Hooks으로 인식 됨) 

Const useInput = () =>