React Hooks -useRef에 대하여(2) (*****내가 생각했던 모든 깊은 내용이 모두 공식문서에 있다. 반드시 공식문서를 익숙히 해야 한다. 공식문서가 가장 자세하고 친절한 설명서다*****)

반드시 공식 문서봐라. 중간에 이해하기 힘들면 이해하려 노력하고 그래도 안되면 그냥 두고 새 마음으로 다시 읽어나가. 그게 왕도다. 그게 정석이다.

https://react.dev/reference/react/useRef#usage

아래 예시 반드시 익힐것. 복잡하지만 차근차근 짚어가면서 해석해야한다. state인 inputs는 객체이며 두개의 키인 '이름',과 'nickname'을 갖는다(주석1참고). 

 

주목할 것이 onChange함수 안에 있는 주석3에서 e.target하여 value와 name을 구조분해 하여 취하고 있는데 여기서의 value, name은 input태그의 속성인 value와 name이다. 즉 input태그의 value, name의 값으로 input창에 무언가를 입력하면 그것이 속성value의 값이 되는 것이고 애초에 name의 값은 이미 주워져 있다(이름을 익력하는 input창인 경우 name="이름"이라고 애초에 주워진다).

이름 input창에 글씨를 입력하면 그 순간 onChange함수가 실행되고 onChange함수 안에 setInputs가 실행되어 주석 2와 같이 inputs state의 값이 변함과 동시에 리랜더링이 진행되어 주석1의 이름과 nickname의 값에 그 변화가 반영된다. 그리고 마저 리랜더링 되는 과정에서 이름관련 input태그의 value속성의 값에 주석4와 같이 변화가 반영되고 nickname관련 input태그의 value속성의 값에 주석5와 같이 변화가 반영된다. 

import React, { useState, useRef } from "react";

const InputSample = () => {

  const [inputs, setInputs] = useState({

    이름: "",

    nickname: "",

  });

  const nameFocus = useRef();

  const { 이름, nickname } = inputs;//1

  const onChange = (e) => {

        /**

     * 대상(target)은 onChange를 onChange속성의 값으로 둔 input태그이다. input태그는 value속성과 name속성 이외에도 placeholder속성등을 갖는다.

     * 따라서, 구조분해 할당을 써서e.target이 가지는 키 중에서 필요한 키인 value와 name의 값만 가져온 것이 아래 코드이다. 즉, 태그의 속성은 모두 실질적인 중요한 기능을 한다!

     */

    const { value, name } = e.target; //3 e.target을 하여onChange함수가 onChange속성의값으로 있는input태그의 value, name속성의 값을 가져온다.

 

    // console.log(value, name, e.target);

    setInputs({

      ...inputs,

      [name]: value,//2

    });

    console.log(inputs);

  };

  const onReset = () => {

    setInputs({

      이름: "",

      nickname: "",

    });

    nameFocus.current.focus();

  };

  return (

    <div>

      <input

        name="이름"

        placeholder="이름을 입력하세요"

        onChange={onChange}

        value={이름} //4

        ref={nameFocus}

      />

      <input

        name="nickname"

        placeholder="닉네임을 입력하세요"

        onChange={onChange}

        value={nickname} //5

      />

      <button onClick={onReset}>초기화</button>

      <div>

        <b>값:</b>

        {이름}({nickname})

      </div>

    </div>

  );

};

export default InputSample;

 

아래 코드는 윗코드를 응용하여 이름과 닉네임을 각각 입력하고 초기화 버튼을 누르면 2개의 input창은 비워지고 그동안 입력했던 이름과 별명들이 input창 아래에 순서대로 그려지도록 하였다.

import React, { useState, useRef } from "react";

const InputSample = () => {

  const [inputs, setInputs] = useState({

    이름: "",

    nickname: "",

  });

  const [store, setStore]=useState([]);

  const nameFocus = useRef();

  const { 이름, nickname } = inputs;//1

  const onChange = (e) => {

        /**

     * 대상(target)은 onChange를 onChange속성의 값으로 둔 input태그이다. input태그는 value속성과 name속성 이외에도 placeholder속성등을 갖는다.

     * 따라서, 구조분해 할당을 써서e.target이 가지는 키 중에서 필요한 키인 value와 name의 값만 가져온 것이 아래 코드이다. 즉, 태그의 속성은 모두 실질적인 중요한 기능을 한다!

     */

    const { value, name } = e.target;

    setInputs({

      ...inputs,

      [name]: value,//2

    });

  };

  const onReset = () => {

    setInputs({

      이름: "",

      nickname: "",

    });

    setStore((prev)=>{return [...prev,이름+":"+nickname]})

    nameFocus.current.focus();

  };

  return (

    <div>

      <input

        name="이름"

        placeholder="이름을 입력하세요"

        onChange={onChange}

        value={이름}

        ref={nameFocus}

      />

      <input

        name="nickname"

        placeholder="닉네임을 입력하세요"

        onChange={onChange}

        value={nickname}

      />

      <button onClick={onReset}>초기화</button>

      <div>

        {/* <b>값:</b>

        {이름}({nickname}) */}

        {store.map((src, idx)=>{return <div key={idx}>{src}</div>})}

      </div>

    </div>

  );

};

export default InputSample;

 

내가 생각했던 모든 깊은 내용이 모두 공식문서에 있다. 반드시 공식문서를 익숙히 해야 한다. 공식문서가 가장 자세하고 친절한 설명서다.

내가 생각했던 모든 깊은 내용이 모두 공식문서에 있다. 반드시 공식문서를 익숙히 해야 한다. 공식문서가 가장 자세하고 친절한 설명서다.