원하는 곳에 새 폴더를 만들고, npx create-react-app 폴더명 을 명령어로 입력한다.
그 다음 사진과 같이 안쓰는 폴더를 제외한 src파일들을 삭제한다.
이번 포스팅에서 만들 페이지는
위와 같이 입력을 처리하고, 선택박스 입력 처리하기, 사용자 입력 데이터 핸들링하기이다.
diaryEditer 파일을 만들고 위와 같이 div를 리턴하도록 한다. 나중에 css작업을 원활하게 하기 위해서 div명은 파일명과 객체명과 동일하게 하는 것이 좋다.
그 다음 App.js에 들어가서 DiaryEditer객체를 넣는다. 이 때 import가 제대로 되어있는지 확인한다.
우리가 만들어야 하는 부분은 저렇게 세 부분이다.
2. 제목 입력받기
//DiaryEditer.js
import {useState, usestate} from "react"; <!--state사용하기 위해 import한다.-->
const DiaryEditor = ()=>{
const[author,SetAuthor] = useState(""); <!--//author이라는 state생성-->
return <div className="DiaryEditor">
<h2>오늘의 일기</h2>
<div>
<input
name = "author" <!-- input명은 author-->
value = {author} <!-- input의 값은 author로 한다.-->
onChange={(e) =>{ <!-- 만약 값이 바뀐다면 -->
SetAuthor(e.target.value); <!--author의 값도 바꾼다. 이 때 바뀐 값은 e.target.value-->
}}/>
</div>
</div>;
};
export default DiaryEditor;
3. 내용 입력받기
import {useState, usestate} from "react";
const DiaryEditor = ()=>{ <!--state객체 만들기-->
const[state,SetState] = useState({
author : "",
content : "",
});
return <div className="DiaryEditor">
<h2>오늘의 일기</h2>
<div>
<input
name = "author"
value = {state.author}<!--객체명.state명-->
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가 2개 이상이니까 이들을 하나의 객체로 만들어서 이용하는 코드를 작성해보았다.
state를 초기화하는 부분에서 모든 요소들을 초기화한다.
그리고, 값이 입력되면 이를 갱신하는 부분이 필요한데, 이를 간단하게 만드는 것이 ...state이다. 이는 state객체 내에 있는 모든 것들에 원래의 값을 넣어주기 때문에 필요한 부분만 제외하고는 값을 유지하도록 한다.
이 때 주의할 점은 ...state가 값을 갱신하는 코드의 뒤에 와서는 안된다는 것이다.(그럼 그 값도 원래 값으로 설정되기때문)
import {useState, 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
value = {state.content}
onChange={handleChangeState}
/>
</div>
</div>;
};
export default DiaryEditor;또한 이러한 방법으로 onChange에서의 함수를 간단하게 만들 수 있다.
handleChangeState라는 객체를 만들고 이 안에서 setState함수를 호출한다. 이 때 변화한 값의 이름과 value가 e로 들어가기 때문에 이를 이용해서 값을 변경하도록 한다.
4.기분 입력받기
import {useState, usestate} from "react";
const DiaryEditor = ()=>{
const[state,SetState] = useState({
author : "",
content : "",
emotion:1, <!--emotion state 추가-->
});
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>
<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>;
};
export default DiaryEditor;5. 버튼 만들기
import {useState, 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 = (e) =>{
console.log(state); <!--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;버튼 태그를 만들고 버튼에 들어갈 문구를 넣는다. 그리고, onclick되었을 때 실행될 함수를 만들어준다.
지금은 저장기능을 만들고 있지 않으므로 state를 출력하게 하였다.
6. 스타일 수정하기
.DiaryEditor{
border: 1px solid gray;
text-align: center;
padding: 20px;
}
.DiaryEditor input,
textarea{
margin-bottom: 20px;
width: 500px;
padding: 20px;
}
.DiaryEditor textarea{
height: 150px;
}
.DiaryEditor select{
width: 300px;
padding:10px;
margin-bottom: 20px;
}
.DiaryEditor button{
width: 500px;
padding: 10px;
cursor:pointer; //마우스 올렸을 때 커서 모양 바뀌는 기능
}
이렇게 보기좋게 조정했다.
