React 입문 - State 2

앞 포스팅에 이어서 작성한 포스팅이니,

State1부터 보고 와야한다.

 

 

State1 마지막에 쓴 내용에 이어서 진행하려고한다.

 

▶️ 버튼과 useState 활용 (function 사용)

// src/App.js

import React from "react";

function App() {

  return (
    <div>
      <button>버튼</button>
    </div>
  );
}

export default App;

위 코드는 버튼이 하나 있다

이 코드를 통해 길동이라는 이름이 버튼을 눌렀을때 누렁이라는 이름으로 바뀔 수 있게 코드를 짜보려고 한다.

 

// src/App.js

import React, { useState } from "react";

function App() {
  function onClickHandler() {
    setName("누렁");
  }
  const [name, setName] = useState("길동");

  return (
    <div>
      {" "}
      {name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

State1에서 언급했던 state 기본 코드를 다시 가져와 보면

const [value, setValue] = useState(초기값)

이 코드를 위에 적용시킨 것을 볼 수 있다.

위에서는 

 

const [name, setName] = useState("길동");

이렇게 적용 시킨것을 볼 수 있는데, 이렇게 처음에는 길동이라는 이름이 뜨고, 

setName("누렁") // 이 코드를 통해 버튼을 누르면 누렁이라고 바뀌도록 해놓았다.

 

처음 화면에서는 길동이 뜨고 버튼을 누르면 누렁으로 바뀐다.

위 코드에서는 다시 버튼을 눌렀을때 처음으로 돌아간다거나 또다른 이름으로 바뀐다는 설정을 하지 않았기 때문에

누렁으로 바뀐 뒤에는 버튼을 아무리 눌러도 누렁이 뜨고, 새로고침을 하면 다시 길동으로 바뀐것을 볼 수 있다.

 

---

▶️ input과 useState 활용  (화살표함수 사용)

 

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };

	console.log(value) // value가 어떻게 변하는지 한번 콘솔로 볼까요?

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;

위 코드는 화살표 함수를 사용해서 구현했다.

 

event.target.value 코드로 사용자가 인풋에 글을 적으면 추출한다.

추출한 값을 setValue에 연결을 해주면 된다.

 

input에서는 클릭하는게 아니라 바뀌는 것이니까 onChange 함수로 연결해 주고 value값도 연결해준다.

input 값이 바뀔때마다 setValue에 값을 넣어준다.

 

 

여기서 사용한 event 객체는 리액트에서만 쓰이는 것이 아니라 html Dom의 이벤트 개념입니다.

onChange 나 onClick 외에도 다양한 이벤트 객체가 있다.

 

 

위 코드를 실행하게 되면 영상에서 처럼 한글자 한글자 인풋값이 바뀌면서 들어가는 것을 볼 수 있다.

 

 

 

 

 

▶️ 참고할 사이트

이벤트 종류가 궁금하신 분들은 아래 참고할 사이트 공유드릴게요!

고전, 인라인, 표준 등 다뤄져있습니다! 

JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결