리액트(React)-사용자가 입력한 글 변수에 저장하기

input에 입력한 값을 저장하려면?

우선 변수를 만들어준다.

let [입력값, 입력값변경] = useState("");
기본값은 빈 input 값이니까 초기값 빈문자열을 해준다.

그리고 <input/>태그 안에
<input onChange={()=>{}} /> 해준다.

onChange: 요소가 입력이 될 때 안의 함수가 실행되는 기능
JS와 달리 리액트에선 onChange와 onInput이 똑같이 작동하니까 혼용해서 사용해도 된다.

그러면 사용자가 입력한 값은 뭐라고 써줘야할까

e.target.value

이벤트가 동작한 곳 의 값 라고 이해하면 된다

      <input
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />

해보면 입력창에 있는 값이 출력되는 걸 볼 수 있다.
그러면 input에 입력값을 넣으려면?
쉽다.

<input
        onChange={(e) => {
          {
            입력값변경(e.target.value);
          }
        }}
      />

주의할 점: 입력값변경() 이라는 함수를 넣을때도 마찬가지로 중괄호를 꼭! 해줘야 한다.

했는데 잘 적용됐는지 모르겠다면
'입력값' 이라는 state를 하나 넣어본다.

...
      {입력값}

      <input
        onChange={(e) => {
          {
            입력값변경(e.target.value);
          }
        }}
      />

입력창에 값을 넣고 뺄때마다 화면에 잘 출력되는 것을 볼 수 있다.

---

버튼을 누르면 input에 입력한 값이 목록에 추가되게 만들기

 <div className="publish">
        <input
          onChange={(e) => {
            {
              입력값변경(e.target.value);
            }
          }}
        />
        <button
          onClick={() => {
            var arrayCopy = [...글제목];
            arrayCopy.unshift(입력값);
            글제목변경(arrayCopy);
          }}
        >
          저장
        </button>
      </div>