React_기초다지기_하루정리(사용자 입력처리)

React

---

⚑목표 : 다양한 사용자 입력 처리하기!

• 한 줄 입력 처리하기
• 여러 줄 입력 처리하기
• 선택 박스 입력 처리하기
• 사용자 입력 데이터 핸들링하기

---

DariyEditor 만들어보기

: input 태그와 textarea, seclect태그를 이용하여, 사용자 입력처리에 대해 실습해보자!

#오늘의 학습 목표#

---

실습을 하기전!

• npx creat-react-app <프로젝트이름>
• npm init react-app <프로젝트이름>

실습환경을 만들어주자.

[input 태그의 사용자 입력 값을 직접 핸들링하라면?]

const DiaryEditor = ()=>{
  return(
    <div className = "DiaryEditor">
      <h2>오늘의 일기
        <div>
          <input />
        </div>
      </h2>
    </div>
  );
};
export default DiaryEditor;

• 위의 코드와 같이 코드를 짜게 되면, input에 값을 사용자가 직접적으로 핸들링하지 못하는 상황이다.
  이때, 이 값을 직접적으로 사용자가 핸들링하려면 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)=>{
            console.log(e.target.value);
            setAuthor(e.target.value);
          }}
          />
        </div>
    </div>
  );
};
export default DiaryEditor;

• <처음 코드와 다르게 useState를 이용하여 사용자가 입력하는 입력값을 여러 줄로 받을 수 있게 수정했다.>
• useState 같은 경우는 현재 상태에 새로운 상태를 입력받아
  새로운 정보를 계속해서 업데이트를 할 수 있는 방식이다.
• 즉, 두번째 코드를 보게되면, input태그에 사용자가 어떤 값을 입력하게 되면,
  그 값(value)이 author변수에 현재 상태가 저장되고,만약 사용자가 다른 입력 값을 추가적으로 입력하게 되면,
  onChange 이벤트가 발생 된다면, 발생된 이벤트를 setAuthor로
  저장해주게되면서, 새로운 값을 또 다시 업데이트하며, 여러 개의 입력 값을 받을 수 있게 되었다.

---

[textarea 태그를 핸들링 해보자!]

: textarea 태그는 여러줄을 입력받을 수 있으며, 입력 창을 늘렸다가 줄일 수있는 태그이다.
// 사용방법은 input 태그와 동일하다!
-> 위의 input 태그를 통해 배워본 부분을 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)=>{
            console.log(e.target.value);
            setAuthor(e.target.value);
          }}
          />
        </div>
        <div>
          <textarea 
          name= "content"
          value ={content}
          onChange = {(e)=>{
            setContent(e.target.value);
          }}
          />
        </div>
    </div>
  );
};
export default DiaryEditor;

• textarea의 고정 값을 content로 저장하고, 만약 사용자가 추가적인 정보를 입력하면,
  즉, onChnage 이밴트가 발생하면 새로운 값을 콜백함수(e.target.value)를 통해
  setContent로 받아와 현재의 상태값 useState가 새롭게 들어온 값으로 바뀌게 되면서
  다시 vaule를 바꾸게 된다. 이렇게 되면 우리가 직접입력한 값들이 화면에 반영되게 된다.

  ---

[input과 textarea의 State를 이용하는 방법이 동일할때!]

: 위 코드는 현재 value에 state의 이름을 넣어주고, onChange이벤트가 발생했을 시,
해당 e.target.value값을 해당 상태변환 함수에 전달해주고 이를 통해
현재 상태를 변경해주는 역활을 하고 있다. 또한 동시에 초기값으로 갖는 값이
문자열로 같은 자료형을 갖는다.

[이럴 경우에는 하나의 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({
                );
            }}  
           />
        </div>
        <div>
            <textarea
            value = {state.content}
            onChange={(e)=>{
                setState(e.target.value);
            }}>
            </textarea>
        </div>
    </div>
    );

}
export default DiaryEditor;


//input에 들어간 값을 직접 핸들링 할 수 있어야하는데, 이때 사용해야하는게 useState
//input에 값을 입력하면 이벤트가 발생함.

• 동일한 작동을 하고 있는 상태를 객체로 만들어준다. 이때는 같은 객체 안에 서로 다른 변수가 들어
  있기 때문에 하나의 변수를 setState할때 같은 객체안에 들어있는 값이 변하지 않도록 주의해줘야한다.
  이전 코드에서는 author의 상태와 content의 상태를 관리해주는 변수가 각각 있었기 떄문에
  각각의 관계를 고려해주지 않았지만, 현재는 같은 상태에 객체로 들어가있기 때문에, 하나의 상태를
  변경할 경우 나머지 객체의 상태도 알맞은 상태로 지정해주어야한다!**

✓그러면 하나의 상태에 많은 객체가 들어가 있는 경우는 어떻게해야하는가!

-> ...스프레드 연산자를 이용하면 된다

import { useState } from "react";

const DiaryEditor= ()=>{

    const[state, setState] = useState({
        author: "",
        content: "",
    });
    //state의 초기값을 객체로 받았으면 setState할경우에도 
    // 똑같이 객체를 만들어줘야한다.

    //const [author, setAuthor] = useState(""); // 작성자를 관리, 초기값은 아직 입력받지 못했기때문에 공백
    //const [content, setContent] = useState("");

    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,
                });
            }}>
            </textarea>
        </div>
    </div>
    );

}
export default DiaryEditor;

⇢ ...스프레드 연산자 같은 경우는 위 코드로 설명해보자면, ...state는 state가 가지고 있는 프로퍼티를 펼쳐주는 것!
수 많은 객체가 있을 경우 ...state를 이용하면, 편리하다

[...스프레드 연산자를 사용할 때 주의해야할 점]

- [ setState({ // 초기값을 객체로 만들었기 때문에 객체로 반환
...state,
author: e.target.value,
}); ]
만약 이코드의 ...state와 author의 위치가 변경되게 된다면, 제대로 작동하지 않는다.
그 이유는 작동 순서에 있는데, 만약 author가 ...state보다 위에있다면, 새로들어온
author라는 값이 먼저 state의 객체 안의 값을 바꾸게 되고, 이후에 ...state가
실행되면 그 새로 업데이트 된 값이 또 다시 업데이트되게 되면서 아무것도 업데이트되지
않는 것처럼 보이게 된다.
//쉽게 생각해서 새롭게 업데이트된 부분이 먼저 업데이트 됐기 때문에 또 다시 덮어쓰기가
되는 경우가 발생하는 것이다!

---

[onChange 함수에 전달될 이벤트 함수를 만들어보자]

: 위에 핸들러의 같은 경우 state도 합쳐져 있고, 하고 있는 역활도 비슷하기 때문에
하나의 함수로 만들어보자!

import { useState } from "react";

const DiaryEditor= ()=>{

    const[state, setState] = useState({
        author: "",
        content: "",
    });
    //state의 초기값을 객체로 받았으면 setState할경우에도 
    // 똑같이 객체를 만들어줘야한다.

    //const [author, setAuthor] = useState(""); // 작성자를 관리, 초기값은 아직 입력받지 못했기때문에 공백
    //const [content, setContent] = useState("");

    const handleChangeState = (e)=> {

        setState({//만약에 내가 name이 author인 부분을 바꾸게되면 e.target.name에 author가 들어가서 그 부분을 바꾸고 반대로 content부분을 바꾸면 name에 content가 들어가 벨류를 바꾼다
            ...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}
            >
            </textarea>
        </div>
    </div>
    );

}
export default DiaryEditor;

//이벤트 핸들러가 비슷한거 끼리 나눠져 있다면 합칠 수 있는 함수로 만들어줌

---

[select 태그를 이용하여 점수표를 만들어보자]

• select태그도 위에 두 태그와 다를 것 없이 만들면된다 !
• • 아래 코드도 마찬가지고 select의 초기점수를 정해주고, 점수가 변경되게 되면
    onChange이벤트가 발생하게 되면서, e.target.name에 emotion이 들어가게 되고,
    그러면 emotion의 값이 변경되어 state 고정값에 들어가게된다

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({//만약에 내가 name이 author인 부분을 바꾸게되면 e.target.name에 author가 들어가서 그 부분을 바꾸고 반대로 content부분을 바꾸면 name에 content가 들어가 벨류를 바꾼다
            ...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;

#오늘의 목표 달성#

[참고 - 한입 크기로 잘라먹는 리액트 ]