React textarea Tab 입력받기

React textarea 태그 Tab(들여쓰기) 입력받기

import React, { useState, useEffect } from 'react'

import { withRouter } from 'react-router-dom';

import { useDispatch } from 'react-redux';

import { Button } from 'react-bootstrap';

function CompilerPage(props) {

    const dispatch = useDispatch();

    const [codeInput, setcodeInput] = useState("");

    const codeInputTabHandler = (event) => {
        if (event.key === 'Tab') {
            event.preventDefault();
            setcodeInput(codeInput + '\t');
        }
    }

    const codeInputHandler = (event) => {
        setcodeInput(event.currentTarget.value);
    }

    return (
        <div className='col-12 px-4 my-2'>
            <textarea className='form-control mb-2' value={codeInput} onKeyDown={codeInputTabHandler} onChange={codeInputHandler} />
            <div className='text-right'>
                <Button>test</Button>
            </div>
        </div>
    )
}

export default withRouter(CompilerPage)

textarea onKeyDown을 사용
preventDefault()를 사용하면 항목 이동을 막을 수 있음

그 외 입력값은 onChange를 사용하여 입력값 처리
onChange는 tab 이벤트에 대하여 반응하지 않아 이러한 방식으로 사용이 가능