ch01.useState

• Hooks : 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서 상태 관리를 할 수 없던 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공
• useState : 함수형 컴포넌트에서 가변적인 상태를 지닐수 있게 해 준다.

  • import React, { useState } from "react";
    
    const Counter = () => {
      const [value, setValue] = useState(0);
      return (
        <div>
          <p>
            현재 카운터 값은 <b>{value}</b> 입니다.
          </p>
          <button onClick={() => setValue(value + 1)}>+1</button>
          <button onClick={() => setValue(value - 1)}>-1</button>
        </div>
      );
    };
    export default Counter;

  • const [value, setValue] = useState(0);
    • useState 함수의 파라미터에는 상태의 기본값을 넣어 준다.
      • value값을 기본값을 0을 넣어줬다.
    • useState 함수는 배열을 리턴하는데 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다.

  • import React from "react";
    import Counter from "./Counter";
    const App = () => {
      return <Counter />;
    };
    
    export default App;

• UseState는 여러 번 사용이 가능하다.

  • import React, { useState } from "react";
    const Info = () => {
      const [name, setName] = useState("");
      const [nickname, setNickname] = useState("");
      const onChangeName = (e) => {
        setName(e.target.value);
      };
      const onChangeNickname = (e) => {
        setNickname(e.target.value);
      };
      return (
        <div>
          <div>
            <input value={name} onChange={onChangeName} />
            <input value={nickname} onChange={onChangeNickname} />
          </div>
          <div>
            <div>
              <b>이름:</b> {name}
            </div>
            <div>
              <b>닉네임:</b>
              {nickname}
            </div>
          </div>
        </div>
      );
    };
    export default Info;

  • import React from "react";
    import Info from "./Info";
    const App = () => {
      return <Info />;
    };
    
    export default App;