리액트

리액트 사용자 입력처리하기

유니유뉘 2023. 1. 28. 17:05
728x90

useState with <input / >

npx react-create-app ‘제목’해서 react 실행시키기

그리고 npm start해서 브라우저 열기

input에 작성된 값을 직접 핸들링할 수 있도록 만들어야한다.

사용자의 입력을 처리하기 위해선 state를 이용할 수 있다.

useState를 이용한다.

import {useState} from "react";

const DiaryEditor = () => {
	const [author,setAuthor] = useState("내이름스");
	return(
		<div className="DiaryEditor">
			<h2>오늘의 일기</h2>
			<div>
				<input name="author" value={author} onChange={(e)=>setAuthor(e.target.value)} />
			</div>
		</div>
	);
};

export default DiaryEditor;

input에 value={author}를 지정하고 상태가 변화할 때 onChange를 사용하면 된다.

setAuthor는 author의 값을 바꿀 수 있다.

e란 이벤트객체에서 target의 value값을 setAuthor에 전달&상태변화 → onChange={(e)⇒ setAuthor(e.target.value)}

확인하는 좋은 방법은 console.log(e.target.value)를 입력해 확인해보기!

ex) textarea 추가한 예제

import {useState} from "react";

const DiaryEditor = () => {
	const [author,setAuthor] = useState("");
	const [content,setContent] = useState("");
	return(
		<div className="DiaryEditor">
			<h2>오늘의 일기</h2>
			<div>
				<input name="author" value={author} onChange={(e)=>setAuthor(e.target.value)} />
			</div>
			<div>
				<textarea value={content} onChange={(e)=>setContent(e.target.value)} />
			</div>
		</div>
	);
};

export default DiaryEditor;

textarea도 input에 적용한 거랑 같다.

콜백함수를 이용해 setContent가 수행하도록 한다.(업데이트하도록)

이렇게 동작이 비슷한 state들은 하나의 state로 묶어줄 수 있다.

import {useState} from "react";

const DiaryEditor = () => {
	const[state,setState]=useState({author:"",content:"",})
	return(
		<div className="DiaryEditor">
			<h2>오늘의 일기</h2>
			<div>
				<input 
					value={state.author} 
					onChange={(e)=>{
						setState({
							author:e.target.value,
							content:state.content,
						});
					}} 
				/>
			</div>
			<div>
				<textarea 
					value={state.content} 
					onChange={(e)=>{
						setState({
							author:state.author,
							content:e.target.value,
						});
					}} 
				/>
			</div>
		</div>
	);
};

export default DiaryEditor;

state가 author와 content를 동시에 갖고있는 객체이기 때문에 객체의 값을 바꾸려면 새로운 객체를 만들어서 전달해줘야한다.

input의 내용을 바꿀 땐 content의 값이 바뀌면 안됨으로 content:state.author로 지정한다.

textarea의 내용을 바꿀 땐 author의 값이 바뀌면 안됨으로 author:state.author로 지정한다.

근데 이렇게 갯수가 많아지면 작성해야할 코드가 늘어남으로 spread 연산자를 이용해 작성한다.

→ 원래의 값들을 spread 연산자로 펼쳐주고 마지막에 바꿀 값을 적으면 된다!

import {useState} from "react";

const DiaryEditor = () => {
	const[state,setState]=useState({author:"",content:"",})

	return(
		<div className="DiaryEditor">
			<h2>오늘의 일기</h2>
			<div>
				<input 
					value={state.author} 
					onChange={(e)=>{
						setState({
							...state,
							author:e.target.value,
						});
					}} 
				/>
			</div>
			<div>
				<textarea 
					value={state.content} 
					onChange={(e)=>{
						setState({
							...state,
							content:e.target.value,
						});
					}} 
				/>
			</div>
		</div>
	);
};

export default DiaryEditor;

만약에 ...state가 아래로 순서가 바꾸면 수정이 안된다! 마지막에 spread연산자로 펼쳐버리니까 업데이트한 값이 원래 값으로 덮힌다.

그러므로 순서 신경쓰기!

import {useState} from "react";

const DiaryEditor = () => {
	const[state,setState]=useState({author:"",content:"",})

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

	return(
		<div className="DiaryEditor">
			<h2>오늘의 일기</h2>
			<div>
				<input 
					name="author"
					value={state.author} 
					onChange={handleChangeState} 
				/>
			</div>
			<div>
				<textarea 
					name="content"
					value={state.content} 
					onChange={handleChangeState} 
				/>
			</div>
		</div>
	);
};

export default DiaryEditor;

handleChangeState에서 setState에 업그레이드되는 기능을 만들어 볼 수 있다.

만약에 name이 author인 input의 내용이 바뀌면 setState에 업데이트되어야한다.

[e.target.author]:e.target.value처럼 name의 값을 인식해 업데이트되는 걸 확인할 수 있다.

content의 내용이 바뀌면 [e.target.content]:e.target.value로 인식해 해당 값에 맞게 인식된다.

⇒ 각각 author:e.target.value, content:e.target.value를 작성할 필요없이 코드 길이를 늘리지 않고 한번에 처리할 수 있는 방법임

ex) 감정점수와 저장하기 버튼 코드

import {useState} from "react";

const DiaryEditor = () => {
	const[state,setState]=useState({author:"",content:"",emotion:1,})

	const handleChangeState = (e)=>{
		setState({
			...state,
			[e.target.name]:e.target.value,
		})
	};
	const handleSubmit = () =>{
		console.log(state);
		alert("저장 성공");
	};

	return(
		<div className="DiaryEditor">
			<h2>오늘의 일기</h2>
			<div>
				<input 
					name="author"
					value={state.author} 
					onChange={handleChangeState} 
				/>
			</div>
			<div>
				<textarea 
					name="content"
					value={state.content} 
					onChange={handleChangeState} 
				/>
			</div>
			<div>
				<select name="emotion" value={state.emotion} 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>
			</div>
			<div>
				<button onClick={handleSubmit}>일기 저장하기</button>
			</div>
		</div>
	);
};

export default DiaryEditor;

select태그를 사용한 감정점수도 위와 같이 name과 value를 지정하고 onChange={handleChangeState}를 사용해 변경할 때마다 업데이트되도록 한다.

button 태그 일기 저장하기 기능은 handleSubmit를 이용한다.

저장되어 있는 state가 제대로 저장되어 있는지 console.log를 이용해 확인해본다.

정상적으로 작동이 되었다면 “저장 성공”이라는 알림을 띄운다.(alert(”저장 성공”))

이렇게 input, textarea, select, button 태그들을 핸들링하는 코드를 배울 수 있었다.

반응형