AI기록장
React_기초다지기_하루정리(DOM 조작하기) 본문
React
⚑목표 : React에서 Dom조작하기!
- 일기 저장 버튼을 클릭했을 때, 작성자와 일기가 정상적으로 입력되었는지 확인하고
아니라면 focus하기
작성자와 일기 본문 기능 추가
: input과 textarea에 특정 이상의 본문이 들어왔는지 확인해보는 기능추가해보자!
[저번 시간 마지막 코드]
import { useState } from "react";
const DiaryEditor= ()=>{
const[state, setState] = useState({
author: "",
content: "",
emotion:1,
});
//state의 초기값을 객체로 받았으면 setState할경우에도
// 똑같이 객체를 만들어줘야한다.
const handleChangeState = (e)=> {
console.log(e.target.name);
console.log(e.target.value);
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}
>
</textarea>
</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;
[특정 길이 이상 입력 기능 추가 (focus이용)]
- 이전 handleSubmit 코드를 수정해보자
- 작성자의 문자 길이와 본문의 길이에 대해서 조건문을 작성해주고, 이 조건을 넘지 못하면
alret를 이용하여 더 이상작업을 중단하게 만든다.
(하지만, 이 방법은 결코 좋지 않은 방법)
const handleSubmit = ()=>{
if(state.author.length<1){
alert("일기 본문은 최소 1글자 이상 입력해주세요");
return ;
}
if(state.content.length<5){
alert("일기 본문은 최소 5글자 이상 입력해주세요");
return ;
}
alert("저장 성공");
};

[focus를 이용해서 사용자에게 알려보자!(useRef)]
useRef : 상수에 React.MutableRefObject라는 것을 저장하게 된다 (html DOM요소를 접근하게해줌)
[아래 코드를 한번 살펴보자!]
- authorInput과 같은 useRef 레퍼런스 객체는 현재 가르키는 값을 current라는 프로퍼티로 가져와서 사용할 수 있다.
즉, authorInput.current는 authorinput 태그를 가르키고 있는 것이고, 이를 focus라는 기능을 이용해서
일정 조건을 넘지 못하면 html의 해당 태그에 강제로 focus를 하게 되는 것!
alret를 쓰게 되면 웹브라우저가 행동하는 것을 일시적으로 중단시키고, CSS적인 부분도 따로 건들일 수 없음
그렇기 떄문에 alret를 이용하여 사용자에게 정보를 전달하는 것은 이상적이지 않다.
useRef와 같은 html DOM요소를 접근하여 사용자에게 정보전달을 하는 방법이 보다 이상적인 방법이다.
import { useRef, useState } from "react";
const DiaryEditor= ()=>{
const authorInput = useRef(); // html DOM 요소를 접근할 수 있는 기능을함
const contentInput = useRef(); // html DOM
const[state, setState] = useState({
author: "",
content: "",
emotion:1,
});
//state의 초기값을 객체로 받았으면 setState할경우에도
// 똑같이 객체를 만들어줘야한다.
const handleChangeState = (e)=> {
console.log(e.target.name);
console.log(e.target.value);
setState({
...state,
[e.target.name]:e.target.value,
});
};
const handleSubmit = ()=>{
if(state.author.length<1){
authorInput.current.focus();
return ;
}
if(state.content.length<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
ref = {contentInput}
name="content"
value = {state.content}
onChange={handleChangeState}
>
</textarea>
</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;

[참고 - 한입 크기로 잘라 먹는 리액트]
'React' 카테고리의 다른 글
React_기초다지기_하루정리(React에서 배열 사용하기/ 데이터 삭제,수정) (0) | 2023.05.29 |
---|---|
React_기초다지기_하루정리(React에서 배열 사용 / 데이터 추가) (0) | 2023.05.29 |
React_기초다지기_하루정리(React에서 리스트 랜더링하기!) (0) | 2023.05.29 |
React_기초다지기_하루정리(사용자 입력처리) (0) | 2023.05.25 |
React_기초 다지기[컴퍼넌트,State, Props 등] (0) | 2023.05.22 |