10_리액트_input상태,useRef

이번에는 input버튼으로 값을 읽어오고 표현하는 법을 통해 input상태 관리법을 공부했다.

 

예제

위처럼 글을 쓰면 그 값을 표시하고, 초기화를 눌렀을때 초기화가 되게하는 방법이다.

 

저번에 만들었던 리액트 파일 그대로 사용하였다.

 

우선, src파일에 InputSample파일을 추가한다.

 

 

//App.js
import React from 'react';
import './App.css';
import InputSample from './InputSample';

function App() {
  
  return (
    <InputSample/>
  );
}

export default App;

App.js에는 단순히 만든 InputSample을 표시한다.

 

import React, {useState} from 'react';


function InputSample() {
    
    const [text,setText] = useState(''); //useState로 텍스트값을 계속 변경
    const onChange = (e) =>{ //바뀔때마다 값을 받아옴
        setText(e.target.value)
    };

    const onReset = () =>{
        setText(''); //리셋 버튼이 눌려졌을때
    };


    return(
        <div>
            <input onChange = {onChange}  value = {text}/> {/* value부분이 있어야 초기화될때 같이 사라짐*/}
            <button onClick = {onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {text}
            </div>
        </div>
    )
}

export default InputSample;

위 코드를 통해서 구현할 수있다. 

 

onChange를 통해서 input태그 내의 내용이 변경될때마다 onChange함수를 호출한 셈이다.

 

 

 

여러개의 input상태 관리

 

여러 개의 input 상태또한 제어할 수 있는데, 변수가 늘어날 때마다 useState를 사용한다면 매우 비효율적일 것이다. 그래서 이를 객체를 이용하여 전달할 수 있다.  이때 주의할점은 객체상태를 업데이트 하기 위해서는, 객체를 복사한 후에 덮어씌어야 작동한다는 것이다.

 

즉, 밑에 적혀있는 것처럼 ...inputs를 통해 위의 객체를 덮어씌어야지만 객체가 바로바로 업데이트가 되게 된다.

import React, {useState} from 'react';


function InputSample() {
    
    const [inputs,setInputs] = useState({
        name :'',
        nickname:'',
    });

    const {name,nickname} = inputs; // name과 nickname을 추출해둠


    const onChange = (e) =>{ 
        const { name , value } = e.target;

        
        
        setInputs({ //객체상태를 업데이트 하기 위해선 객체를 복사하고 덮어씌어햐 적용된다.
            ...inputs,
            [name] : value, // []로 감싸주어서 name이 문자열 그대로 name이 아님을 표시
        });

    };

    const onReset = () =>{
        setInputs({
            name : '',
            nickname : '',
        });
    };


    return(
        <div>
            <input 
                name = "name"  
                placeholder='이름' 
                onChange={onChange}
                value = {name}
            />
            <input 
                name = "nickname" 
                placeholder='닉네임' 
                onChange={onChange}
                value = {nickname}
            />
            <button onClick = {onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {name} ({nickname})
            </div>
        </div>
    )
}

export default InputSample;

 

 

 

 

useRef

 

HTML,JS을 다르는중에서는 특정 DOM을 가져올 일들이 많다.

 

위의 예제에서 초기화 버튼을 눌렀을 경우에 focus를 첫번째 박스로 옮긴다던지 하는 기능은 리액트를 통해서 할수 없고 직접 돔에 접근하여야 한다.

 

그럴때 사용할 수 있는게 이 useRef이고 사용방법은 간단하다.

 

import React, {useState ,useRef} from 'react'; //ref 불러오기


function InputSample() {
    
    const [inputs,setInputs] = useState({
        name :'',
        nickname:'',
    });

    const nameInput = useRef(); //Ref 호출
    const {name,nickname} = inputs; 


    const onChange = (e) =>{ 
        const { name , value } = e.target;

        
        
        setInputs({ 
            ...inputs,
            [name] : value, 
        });

    };

    const onReset = () =>{
        setInputs({
            name : '',
            nickname : '',
        });

        nameInput.current.focus(); // foucs를 이쪽으로 설정
    };


    return(
        <div>
            <input 
                name = "name"  
                placeholder='이름' 
                onChange={onChange}
                value = {name}
                ref = {nameInput} //dom 설정
            />
            <input 
                name = "nickname" 
                placeholder='닉네임' 
                onChange={onChange}
                value = {nickname}
            />
            <button onClick = {onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {name} ({nickname})
            </div>
        </div>
    )
}

export default InputSample;

호출하고 선언한 후에, 원하는 dom에 불러오기만 하면 사용이 가능하다.

focus()함수를 통하여 focus가 잡히게 설정해두었다.