[React] useState와 input 활용하기

• 컴포넌트에서 동적인 값을 state라고 부른다.
• 리액트는 state가 변경될 때, 그 state가 포함된 HTML을 자동으로 재렌더링한다.
• 결국 state는 번역하면 '상태'인 것이고, useState는 상태를 사용하는 것이다.
  '상태'를 변화시키는 '상태변경함수'를 통해 변경하면 그 상태를 화면에 반영해주는 것이다.

 

<useState 사용법>

1. 내장함수로 상단에 import를 해줘야 한다.

import React, {useState} from 'react';

 

2. 변수를 선언하여 useState 함수를 넣어준다.

   useState는 두개의 값을 가지게 되는데, '원본'과 '변경하는 함수'를 가진다.

const[original, originalHandler] = useState('원본');

▶ original : 원본;

▶ originalHandler : 원본 변경 값;

 

 

3. onClick과 같은 이벤트 핸들러들과 사용한다.

   button 태그를 클릭했을 때, original 값이 1씩 증가 또는 1씩 감소한다.

function Count(){
    const[original, originalHandler] = useState(0);
    const onIncrease = () => {
        originalHandler(original + 1);
    }
    const onDecrease = () => {
        originalHandler(original - 1);
    }

    return(
        <div>
            <h1>{original}</h1>
            <button onClick={onIncrease}> +1 </button>
            <button onClick={onDecrease}> +1 </button>
        </div>
    );
}

 

 

<input과 useState 활용하기>

: input으로 사용자에게 값을 입력받고, useState를 활용하여 input값을 나타나게 하기.

 

1. 먼저 input 태그 생성하기

//input.js
import React from 'react';

function Input(){
    return(
        <div>
            <input />
            <button>Reset</button>
            <div>
                <b>값: </b> 
            </div>
        </div>
    );
}

export default Input;

 

2. App.js에서 Input 컴포넌트를 렌더링하기.

import './App.js';
import React from 'react';
import Input from './Input';

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

export default App;

결과 값 :

 

3. useState를 활용하여 input에 입력하는 값을 하단의 "값" 란에 나타나게 하기.

//Input.js
import React, {useState} from 'react';

function Input(){
    const [text, setText] = useState('');
    const onChange = (e) => {
        setText(e.target.value);
    };
    return {
        <div>
            <input onChange = {onChange} value={text}/>
            <button>Reset</button>
            <div>
                <b>값 : {text}</b>
            </div>
        </div>
    };
}

※onChange 함수 사용법

javascript의 onChange는 작성한 코드의 변화가 일어났는지를 감지합니다.

값을 조회하기 위해서 event.target.name을 사용한다.

 

 

4. Reset 버튼 활성화 시키기.

//Input.js
import React, {useState} from 'react';

function Input(){
    const [text, setText] = useState('');
    const onChange = (e) => {
        setText(e.target.value);
    };
    const onReset = () => {
    	setText('');
    };
    return {
        <div>
            <input onChange = {onChange} value={text}/>
            <button onClick={onReset}>Reset</button>
            <div>
                <b>값 : {text}</b>
            </div>
        </div>
    };
}

npm start로 실행시키면,