TIL 231103 (React -3)

앞서 스테이트는 ui 변경을 위해 사용하는 것이라고 언급했다.

함수형 컴포넌트를 사용하면 hook을 통해 state 관리를 효율적으로 할 수 있다.

오늘 배운 hook은 useState 라는 함수형 hook이다.

컴포넌트의 상태를 간편하게 생성하고 변경사항이 발생했을 때 업데이트 할 수 있는 도구를 제공한다.

const [state, setState] = useState('초기값');

위와 같은 형태로 사용 가능하다. 현재 값은 state라는 변수에 담겨 있고, setState를 이용해 값을 변경할 수 있다. state, setState의 이름은 임의로 지정하면 된다.

인풋창을 생성하고, 인풋창에 변경사항이 생기면 인풋창 옆의 공란에 표시되도록 해보자.

우선 그 전에 리액트에서 useState를 불러오는 코드를 작성해야 한다. 그렇게 해야 useState 정보를 읽어올 수 있기 때문!

import React, { useState } from 'react';

function App() {
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');
  
  return (~~~~
	)

그리고 반환부인 return 이하 내용으로 input 창 2개를 만들어준다.

return (
    <div>
      <div className='App'></div>
      <div className='headerHead'>
        <div className='header'>MY TO DO LIST</div>
      </div>
      <div>
        <div className='title'>
          제목 : &nbsp;
          <input
            type='text'
          />
          
        </div>
        <div className='content'>
          내용 : &nbsp;
          <input
            type='text
          />
        </div>
     </div>

여기서 한가지 주의해야할 점은, 최상위 태그가 2가지가 되면 안된다는 것이다.
그렇기 때문에 input창 2개를 상위 div태그로 묶어주었다.

앞서 useState를 할당해둔 것을 다시 살펴보자.

 const [id, setId] = useState('');
  const [password, setPassword] = useState('');

useState에 넣어진 초기값은 없다. 변경사항이 생기면, setId, setPassword을 이용해 id, password로
전달하는 구조라고 이해하면 된다.

인풋창이 변경되면 ~ 값을 반환해줘야하니까 onChange 메서드를 사용한다.

value={id}
            onChange={function (event) {
              setId(event.target.value);
            }}

event.target.value의 뜻을 풀어서 생각해보면,
이벤트가 발생한 요소의 값을 리턴해준다. 즉 변경 사항을 리턴해준다 라고 받아들이면 이해하기 쉬울듯 하다.

이벤트. 타겟. 벨류 이런 식으로 나눠서 단어 자체마다 나누어 이해하고 넘어가려고 하다 보니 완벽하게 이해되지 않아서 답답했는데, 콤마 마다 자연스럽게 연결해서 이해하면 좀 더 쉬운 것 같다는 생각이 들었다.