02. useState의 등장

useState()
: React에서 상태 관리를 도와주는 Hook

function App(){
        let [counter, setCounter] = React.useState(0);
        const onClick = () => {
            setCounter(counter+1);
        }
        return (
        <div>
            <h3>Total Clicks : {counter}</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );

useState(0)은 counter라는 상태 변수를 선언하고 초기값으로 0을 설정한다. 이 훅은 상태 변수(counter)와 그 상태를 업데이트하는 함수(setCounter)를 배열 형태로 반환한다.

위 코드에서 onClick 함수는 버튼 클릭 이벤트에 연결되어 있으며, 클릭할 때마다 setCounter 함수를 호출하여 counter의 값을 1 증가시킨다. 이는 React에게 counter 상태를 업데이트하고 컴포넌트를 다시 렌더링하라는 지시를 한다. 결과적으로 'h3' 태그 내의 Total Clicks : {counter} 부분이 업데이트되어 사용자 인터페이스에 클릭 횟수가 반영된다.

추가적으로 JSX를 사용하여 if문을 나타내 줄 수 있다.

  function App() {
    const [index, setIndex] = React.useState("xx");
    const onSelect = (event) => {
      setIndex(event.target.value);
    }
    return (
      <div>
        <h1 className="hi">Super Converter</h1>
        <select value={index} onChange={onSelect}>
          <option value="xx">선택하세요</option>
          <option value="0">M&H</option>
          <option value="1">K&M</option>
        </select>
        <hr/>
        {index === "xx" ? "선택하세요" : null}
        {index === "0" ? <MtH/> : null}
        {index === "1" ? <KtM/> : null}
      </div>
    );
  }

삼항연산자를 활용하여, index의 값이 setIndex에 의해 달라졌을 때마다, 값이 바인딩되어, 다른 Component를 나타내게 된다.
여기서 setIndex function에 활용된 event에 조금 더 알아보고 이 게시글을 마무리하면 되겠다.

event 객체는 사용자가 인터페이스 상호작용을 할 때 생성되는 객체이다. 예를 들어, option을 select를 활용하여 변경할 때마다, onSelect가 호출되고, 이때 event 객체가 함수의 매개변수로 전달된다. event.target은 이벤트가 발생한 대상 요소, 즉 사용자가 입력하고 있는 input 필드를 가리킨다. event.target.value는 해당 필드에 입력된 현재 값을 나타낸다. 이는 F12를 활용한 개발자도구를 console.log(event)를 찍어보면 경로를 찾아갈 수 있다.

이 코드의 onSelect 함수에서 setIndex(event.target.value)를 호출함으로써 사용자가 입력한 값을 index 상태 변수에 저장한다. 이를 통해 사용자가 입력한 값이 애플리케이션의 상태에 반영되며, React가 이 상태에 기반하여 UI를 업데이트한다.

결론적으로 중요한 것은

const [값, 그 값을 변경하는 함수] = React.useState(기본값)

이다.
이를 활용해 우리는 실시간으로 렌더링 되는 값을 확인할 수 있는 것이다.