리액트 - React에서 DOM 조작하기

useRef

React에서 DOM 조작하기

• 일기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus하기

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 = () =>{
		if(state.author.length<1){
			alert("최소 한글자 이상 입력해주세요.");
			return;
		}
		if(state.content.lengh<5){
			alert("최소 다섯글자 이상 입력해주세요.")
			return;
		}
		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;

if문 작성하고 return 작성한 이유는 더 이상 진행되는 것(다음 스탭)을 막기 위해서임

근데 alert으로 알려주는 것보다 focus를 주는 방식이 더 트랜디하다.

 

import React, { useRef,useState} from "react";

const DiaryEditor = () => {
	const authorInput = useRef();
	const contentInput = useRef();	

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

	const handleChangeState = (e)=>{
		setState({
			...state,
			[e.target.name]:e.target.value,
		})
	};
	const handleSubmit = () =>{
		if(state.author.length<1){
			authorInput.current.focus();
			alert("최소 한글자 이상 입력해주세요.");
			return;
		}
		if(state.content.lengh<5){
			contentInput.current.focus();
			return;
		}
		alert("저장 성공");
	};

	return(
		<div className="DiaryEditor">
			<h2>오늘의 일기</h2>
			<div>
				<input 
					ref={authorInput}
					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;

포커스를 줘야할 부분은 input과 textarea부분에 주어야한다.

→ DOM요소를 선택할 수 있는 기능(useRef)

 

const authorInput = useRef(); 를 작성해 const authorInput에 담아준다.

해당 DOM요소에 적용한다. → ref={authorInput}

이렇게 하면 해당 요소를 선택할 수 있다. 이제 원하는 요소에 focus를 주려면 current를 사용해

**authorInput.current.focus();**로 작성하면 된다.

contentInput도 같은 방식으로 작성하면 된다.