Input State

리액트 컴포넌트에서는 state 값의 변동이 생길 때 마다 렌더링이 새로 이뤄진다.

 

1. 아래 코드를 입력한다.

import {useState} from 'react';

function App() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  console.log('check');

  const onSubmit = () => {
    console.log(title, body);
  };

  return (
    <div className="container">
      <div className="mb-3">
        <label className="form-label">Title</label>
        <input className="form-control" value={title} onChange={(e) => {
          setTitle(e.target.value)
        }}/>
      </div>

      <div className="mb-3">
        <label className="form-label">Body</label>
        <textarea className="form-control" value={body} onChange={(e) => {
          setBody(e.target.value)
        }}/>
      </div>
      <button className="btn btn-primary" onClick={onSubmit}>Post</button>
    </div>
  )
}

export default App;

2. 리액트 앱을 실행시킨다.

 

3. 인터넷 브라우저에서 개발자 도구를 연다.

 

4. Title이나 Body 아래 Input 박스나 textarea에 아무 키나 입력하면 onChange함수가 실행되고, 각각 title, body의 값을 변경시킨다. 이 때 키보드 입력이 들어간만큼 컴포넌트가 다시 렌더링 된다.

 -> 키보드 입력이 들어갈 때 마다 title, body의 값이 각각 바뀐다.

 -> 개발자 도구의 콘솔 로그를 보면 키보드를 입력할 때 마다 'check'라는 로그가 남는다.

 -> 결론 : title, body의 값이 변경될 때 마다 컴포넌트가 다시 렌더링 된다는 뜻 ㅎㅎ