React 사용자 입력 처리 및 DOM 요소 조작하기

React에서 사용자 입력을 처리하는 방법

1.spread 연산자를 사용하여 객체를 값을 복사하고 복사한 값을 변경 후 useState의 상태를 변화 시키는 방법

const DiaryEditor=()=>{
    const [state, setState] =  useState({
        autor:"",
        content:""
    });
    }    
    
    return(
        <div className="DiaryEditor">
            <h2>오늘의 일기</h2>
            <input
                name="autor"
                placeholder="autor를 입력하세요"
                value={state.autor} 
                onChange={(e)=>{
                   let tmp = {...state};
                   tmp.autor = e.target.value;
                   setState(tmp);
                }}

            />
            <div>
                <textarea
                    name="content"
                    placeholder="본문을 입력하세요"
                    value={state.content}
                    onChange={(e)=>{
                    	let tmp = {...state};
                      	tmp.content = e.target.value;
                      	setState(tmp);
                    }/>
            </div>

        </div>
    ) 
}
export default DiaryEditor;

2.eventTargetName을 활용하여 값을 변경하는 방법

Tag요소의 name과 동일한 state의 요소의 값을 변경한다.

const DiaryEditor=()=>{
    const [state, setState] =  useState({
        autor:"",
        content:""
    });
  
    const handleChange = (e:ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)=>{
        setState({...state,[e.target.name]:e.target.value});
    }
    
    return(
        <div className="DiaryEditor">
            <h2>오늘의 일기</h2>
            <input
                name="autor"
                placeholder="autor를 입력하세요"
                value={state.autor} 
                onChange={(e)=>{
                   let tmp = {...state};
                   tmp.autor = e.target.value;
                   setState(tmp);
                }}

            />
            <div>
                <textarea
                    name="content"
                    placeholder="본문을 입력하세요"
                    value={state.content}
                    onChange={handleChange}/>
            </div>

DOM요소 조작하는 방법

useRef를 사용하여 DOM 조작하기
태그를 참조하여 해당 태그에 focus를 한다.

const DiaryEditor = () => {
    const autorInput = useRef<HTMLInputElement>(null);
    const textInput= useRef<HTMLTextAreaElement>(null);
    const [state, setState] =  useState({
        autor:"",
        content:"",
        emotion:1,
    });

    const handleChange = (e:ChangeEvent<HTMLInputElement | HTMLTextAreaElement| HTMLSelectElement>)=>{
        setState({...state,[e.target.name]:e.target.value});
    }
    
    const handleSubmit = ()=>{
        if (state.autor.length < 1) {
            alert('최소 1글자 이상 입력해주세요');
            autorInput.current?.focus(); //해당 요소에 focus
            return;
        }
        if(state.content.length <5){
            alert('최소 5글자 이상 입력해주세요');
            textInput.current?.focus(); // 해당 요소에 focus
            return;

        }
        console.log(state);
        alert('저장이 완료되었습니다');
        
    }
    
    return(
        <div className="DiaryEditor">
            <h2>오늘의 일기</h2>
            <input
                ref={autorInput}
                name="autor"
                placeholder="작성자"
                
                value={state.autor} 
                onChange={(e)=>{
                   let tmp = {...state};
                   tmp.autor = e.target.value;
                   setState(tmp);
                }}

            />
            <div>
                <textarea
                    ref={textInput}// tag 참조
                    name="content"
                    placeholder="내용"
                    value={state.content}
                    onChange={handleChange}/>
            </div>

            <div>
                <text style={{fontSize:12}}>오늘의 감정 점수 :</text>
                <select
                   name="emotion" value={state.emotion} onChange={handleChange}>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                    <option value={4}>4</option>
                    <option value={5}>5</option>
                </select>
            </div>
            <button onClick={()=>handleSubmit()}>일기 저장하기</button>
        </div>
    ) 
}
export default DiaryEditor;

chaining operator를 사용하는 이유

중간에 존재하지 않는 속성이 있어도 에러를 방지하고 안전하게 값에 접근할 수 있게 해준다.

textInput.current?.focus();// current가 null이나 undefine인 경우 focus()메소드를 사용하지 않게 하기위해서 사용한다.