#5 React의 Input 상태관리

안녕하세요! 오늘의 리액트 주제는 Input (입력) 상태관리에 대해서 알아보겠습니다. input 상태관리는 이전에 배운 상태관리 Hooks인 useState를 활용하여 사용이 됩니다. 나중에 프로젝트를 하면서 필수이자 기본적으로 많이 쓰인다고 생각되는것중 하나가 Input 상태관리라고 생각이 듭니다. 그래서 잘 배워두면 정말 유용할것 같아요. 😊

1. 프로젝트 UI 만들기

지금까지 진행해오던 방식으로 components 폴더에 Input.js 라는 자바스크립트 파일을 만들어주세요! 저희는 해당 파일에다가 렌더링시킬 예정입니다.

해당 사진처럼 파일을 생성해주셨으면, 이제 Input 컴포넌트에 UI JSX 코드를 작성해봅시다.

import React from 'react';

const Input = () => {
    return (
        <div>
            <input type ="text" placeholder ="이름을 입력하세요" />
            <div>현재 입력되고 있는 값: </div>
        </div>
    );
}

export default Input;

코드를 다 입력하고 나서, yarn start 를 이용하여 프로젝트를 실행시켜주세요! 아 그전에 App.js에서 Input.js 컴포넌트를 렌더링 해주시는것을 잊지마세요:) 😉😉

프로젝트를 실행시키면 위 사진처럼 렌더링이 될 것입니다. 저희가 이제 해볼것은 인풋창에 값을 입력하면, 현재 입력되고 있는 값: 에다가 동적으로 변하고있는 입력 값을 넣어줄것입니다. 그러기 위해선, input이 변할때마다 동적으로 값을 바꿔주고, 그에 따라 동적으로 바뀌는 값을 넣어주어야 합니다. 🤔🤔 아직까지는 어떻게 하는지 감이 잘 안오죠? 😶😐

2. useState를 이용한 기능 구현

그래서 저희는 상태관리 Hooks인 useState를 이용하여 입력상태를 관리해볼 것입니다! 😎😊 혹여나 useState를 잘 모르시는 분들은 아래의 글 링크를 참고해보시면 좋을 것 같습니다. 👨‍👧‍👦👨‍👧‍👦

🖊 useState 상태 관리 Hooks 소개 글 🖊
https://velog.io/@yiyb0603/3-State%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%88%AB%EC%9E%90-%EC%B9%B4%EC%9A%B4%ED%84%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0

저희는, HTML input 태그의 onChange, value 속성을 이용하여 기능을 구현해보도록 하겠습니다! Input.js에 다음과 같이 코드를 작성해주세요! 🖍🖍

import React, { useState } from 'react';

const Input = () => {
    const [value, setValue] = useState('');
    const onChange = (event) => {
      /*  event: 사용자의 액션에 따라서 자동으로 이벤트가 
      생성되며, 특정한 파라미터가 없을경우, 기본 파라미터로 이벤트 객체가 생성된다. */
        setValue(event.target.value);
    }

    return (
        <div>
            <input type ="text" value ={value} onChange ={onChange} placeholder ="이름을 입력하세요" />
            <div>현재 입력되고 있는 값: {value} </div>
        </div>
    );
}

export default Input;

자바스크립트 함수의 파라미터에 따로 값을 전달하지 않는경우, 해당 파라미터는 이벤트 객체가 됩니다. 이벤트 객체는 현재 사용자가 핸들링하고 있는 이벤트를 인식하여 해당 이벤트의 정보를 객체로 보여줍니다. 사용자 핸들링의 종류에는 FormEvent, ChangeEvent 등 다양합니다. 👨‍👧‍👦

🏹 그중, 저희의 입력 이벤트는 ChangeEvent입니다. event를 파라미터로 넘긴다음 event객체의 target.value를 찍어보면 현재 입력되고 있는 Input값이 나옵니다.

따라서, value의 값을 지정해주는 setter 함수 setValue 안에 event.target.value를 넣어줄 수 있고, 그에 따라서 입력한값이 value의 값으로 설정이 됩니다. 👍

onChange 속성에는 위에서 구현한 onChange를 넣어주고, value 속성에는 setValue가 지정해주는 값을 그대로 받아오기 위해 value 변수를 넣어줍니다. 🖍

코드를 수정해주시고, 실행결과를 보도록 하겠습니다. 🎯🥏

현재 입력하고있는 값이 정상적으로 렌더링이 되는것을 보실 수 있습니다!
이렇게 onChange 속성말고도 onSubmit일때의 Input처리들도 다양하게 있습니다! onSubmit 이벤트들의 인풋 처리방식은 나중에 더 알아보도록 해요 😉
긴글 읽어주셔서 감사합니다!! 🙋‍♂️😊