[React] React 기본 : 입력 처리/DOM 조작하기

<Udemy 리액트 챌린지 3주차>

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다.

Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 2주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍

---

다양한 사용자 입력 처리하기

0. 컴포넌트 만들기

컴포넌트를 작성할 컴포넌트.js 파일을 생성한다.

const 컴포넌트명 = ()=>{
    return (
        <div className="컴포넌트명">
        </div>
    );
}
export default 컴포넌트명;

👉 코드 관리가 용이하도록 스타일을 적용할 className도 일치시켜주는 것이 좋다.

1. 한 줄 입력 처리

사용자 입력을 React 에서 핸들링 하는 법 - State에 입력 값 저장하기 

상태를 사용하기 위해서 useState를 import 한 다음,

const [author, setAuthor] = useState("");

👉  상태 값을 저장할 상태 변수 author 와 상태 값을 변화시키는 setAuthor 함수를 선언한다.

 

input 에 입력된 값이 바뀔 때마다 저장된 상태 값도 변화하도록 처리

<input value={상태변수} />

: input의 value로 상태 값이 바인딩 된다.

🥲 하지만 이렇게만 선언하면 키보드로 입력해도 input에 값이 입력되지 않는 것을 확인할 수 있다.

키보드로 입력되었을 때, 입력된 값이 input에 바인딩되지 않기 때문이다.

 

입력이 감지되면 실시간으로 input에 입력된 값과 상태 값을 변화시킬 수 있도록 onChange라는 콜백함수를 지정해줘야한다.

onChange : input에 입력 이벤트가 발생하면 호출된다. 매개변수로 이벤트 e를 받는다.

<input name="상태변수1" value={상태변수1} onChange={(e)=>{
    console.log(e.target.value);	// 변경된 value 콘솔에 출력
    상태함수1(e.target.value);
}}/>

e.target.value : 변경된 입력 값 (input 태그의 value 값)

e.target.name : 변경된 input 태그의 name 값 : input 태그의 값 변경 이벤트 발생 시, 어떤 input 태그의 값이 변경되었는지 name을 확인할 때 사용할 수 있다.

input에 onChange 이벤트가 발생했을 때, 상태함수를 호출해서 변경된 입력 값을 상태에 적용해줘야 input칸에 바인딩 된 값이 변경된다.

 

2. 여러 줄 입력 처리

textarea 태그 사용 - input과 사용법은 동일하다.

<textarea value={상태변수2} onChange={(e)=>{
                    상태함수2(e.target.value);
                }}/>

비슷한 동작을 하는 State를 하나로 묶기!

- 상태변수 선언부

author와 content로 각각 선언되어있는 상태변수를 객체를 사용하여 하나의 상태변수로 통합할 수 있다.

 

- onChange 이벤트 처리

setState 상태함수를 호출하여 해당하는 프로퍼티에만 변경된 값을 set한다. (새로운 객체를 생성해서 상태값에 저장한다.) 변경되면 안되는 상태 값에는 원래의 값을(상태에 저장되어있는 값) set한다.

 

프로퍼티가 많아지는 경우, 변경되지 않은 프로퍼티의 값을 일일히 원래 값을 대입해주면 번거롭고, 프로퍼티를 놓칠 수도 있고 코드가 길어진다.
→ Spread 연산자 사용

Spread 연산자 사용

⭐️ 하지만 주의해야할 점 : Spread 연산자의 위치

첫번째의 경우, 기존의 state 값으로 프로퍼티를 가져오고 author에 변경된 value를 대입하기 때문에 상태값이 정상적으로 변경된다.

하지만, 두번째의 경우 author에 변경된 value가 대입한다음 spread 연산자가 호출되기 때문에 author 엔 원래 author값으로 덮어씌워진다.

 

따라서, 위와 같이 바뀐 값을 프로퍼티에 대입한다음 spread 연산자를 사용하면

👉 spread 연산자가 후에 실행되기 때문에 원래 저장되어있던 값으로 덮어씌워지게 되어 변경내용이 적용되지 않는다.

반드시, 원래의 state를 먼저 펼치고(spread) 변경된 값을 뒤에 작성해야한다.

 

 

이벤트 핸들러 합치기

const handleChangeState = (e) =>{
    setState({
        ...state,
        [e.target.name] : e.target.value,
    });
};

공통된 핸들러 함수를 선언하고

onChange={handleChangeState}

적용할 태그의 onChange콜백함수에 적용한다.

e.target에서 가져올 수 있는 속성인 name과 value를 사용, name에 해당하는 태그에 변경된 value값을 -> 상태 값 {key : value} 에 반영한다.

 

3. 선택 박스 입력 처리

<select name="상태변수이름" 
    value={상태변수}
    onChange={handleChangeState}>
    <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>

선택박스(select box)도 input과 textarea 처럼 적용할 수 있다.

 

4. 사용자 입력 데이터 핸들링

버튼 처리

<button onClick={handleSubmit}>일기 저장하기</button>

const handleSubmit = ()=>{
        console.log(state);
        alert("저장 성공");
    };

onClick 이벤트를 추가하여 버튼을 눌렀을 때 콘솔에 상태변수(객체)를 출력하도록 한다.

 

결과

 

React에서 DOM 조작하기

데이터가 정상적으로 입력되었는지 확인하고 (Validation) 아니라면 Focus 해보기

👉 원하는 태그에 Focus하기 위해서는 그 요소를 가져와야함 

useRef를 사용해서 DOM 요소를 참조할 수 있다!

 

useRef import 하기

import { useState, useRef } from "react";

 

사용하려는 DOM 요소 상수로 가져오기

const authorInput = useRef();
const contentInput = useRef();

useRef()는 React.MutableRefObject를 반환한다.

React.MutableRefObject 는 React에서 접근할 수 있는 DOM요소를 반환하므로 원하는 DOM 요소에 접근할 수 있도록 한다.

authorInput 는 ref={authorInput}인 DOM 요소를 참조하게 된다.

 

참조할 DOM 요소에 ref 속성 지정

 

버튼 이벤트 눌렀을 경우에 입력 값 Validation Check

- Handler

    const handleSubmit = ()=>{
        // validation에 맞지 않은 입력칸에 Focus 주기
        if (state.author.length < 1){
            alert("작성자는 최소 1글자 이상 입력해주세요");
            authorInput.current.focus();    // author 칸에 focus
            return;
        }

        if (state.content.length < 5){
            alert("본문은 최소 5글자 이상 입력해주세요");
            contentInput.current.focus();	// 내용칸에 focus
            return;
        }
        
        alert("저장 성공!");
    };

DOM 요소를 참조하는 useRef를 사용해서 input 를 참조할 수 있게 되었다.

authorInput 가 가리키는 DOM 요소에 포커스를 주려면
👉 authorInput.current.focus() : Reference 객체 authorInput가 현재 가리키는 input 태그에 focus를 준다.
(current : DOM 요소가 현재 가리키는 태그를 뜻함.)

 

👍 이렇게 하면 author 태그 입력 값의 길이가 1미만이거나, content 태그 입력 값 길이가 5 미만이면 alert 창이 뜨고, 해당 태그에 focus가 가도록 할 수 있다.

alert(경고) 창

해당 요소에 Focus

 

---

드디어 본격적으로 일기장 만들기를 하면서 컴포넌트로 화면도 구성하고 입력도 처리할 수 있게 됐다!

State로 컴포넌트가 정보를 유지할 수도 있고, 태그에 ref 속성을 지정하고 useRef()를 사용해 DOM 요소를 참조했다.

이러한 기능들로 타언어들에 비해 컴포넌트의 정보를 유지, 관리하는게 편하다고 느꼈다. 😙

 

출처 : Udemy '한입 크기로 잘라먹는 리액트' (이정환)