[React] 코딩애플 blog -5

이번 시간에는 글 발행 기능을 추가해볼 것이다!

글을 입력 하고 저장버튼을 누르면 상단에 발행된 글이 뜨게 된다.

대신 영구 저장은 못한다! 왜냐면 서버와 DB가 없으니까

간단하게 자바스크립트 변수, state로 저장하는 기능을 만들어 볼 것이다. 🤔

 

내가 짠 코드

function TextEnroll(text) {
    var newArray = [...글제목];
    newArray.unshift(text);
    글제목변경(newArray);
  }

let [글제목, 글제목변경] = useState([
    "난곡 돈까스 맛집! 오츠카도",
    "신대방 온정 돈가스 너무 매워",
    "강남 토끼정, 맛집이다 ",
  ]);
let [inputText, changeText] = useState(null);
<div className="publish">
        <input value={inputText} />
        <button
          onClick={() => {
            TextEnroll("추가는 되는데,,");
          }}
        >
          저장
        </button>
      </div>

일단 내가 구현한 기능은 unshift를 통해 글 제목 배열 첫 번째에 값을 넣는 것이다. 하지만 문제는 input에서 어떻게 값을 가져오는지를 모르겠다 ,,

문제 : 추가는 되지만 input값을 가져와서 추가하지는 못함!😓

여태 Vue.js를 공부하면서는 v-model로 쉽게 바인딩을 했었는데 리액트는 어떤 식으로 해야 할지 막막해져서 구글링을 했지만 input 태그에서 onChange이벤트를 사용해서 값이 변할 때마다 state값이 변경되도록 처리하는 방법이 나왔다. 강의를 들으면서는 지금까지 배웠던 내용을 응용하면 충분히 풀 수 있다고 했는데 ,, 갑자기 우울해졌다. 🙁

 

 

 

 

 

 

답안 코드

<div className="publish">
        <input
          onChange={(e) => {
            입력값변경(e.target.value);
          }}
        />
        {/*인풋에 뭔가를 입력할때마다 입력값이 변경된다. value로*/}
        <button
          onClick={() => {
            var newArray = [...글제목];
            newArray.unshift(입력값);
            글제목변경(newArray);
          }}
        >
          저장
        </button>
      </div>

답안 코드 확인 결과 버튼을 클릭해서 글 제목으로 추가하는 것 까지는 내가 하는 방법이 맞았다! 그리고 input 문제는 예상했던 onChange 이벤트로 푸는 것도 맞았다!

 

 

 

인풋에 뭔가를 입력할 때마다 입력값이 변경되도록 하는 코드는

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

다시 한번 잘 기억해 줘야겠다.

잘 추가되는 것을 확인할 수 있었다.