useState

useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.

useState

const [state, setState] = useState(initialState);

상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.

setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

setState(newState + 1); // setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);

다음 리렌더링 시에 useState를 통해 반환받은 첫 번째 값은 항상 갱신된 최신 state가 됩니다.

• Example Code

  // 클래스형 컴포넌트
  class Example extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0,
        ismodalActive: false,
      };
    }
  
    render() {
      return (
        <div>
          <p>You clicked {this.state.count} times</p>
          <button onClick={() => this.setState({ count: this.state.count + 1 })}>
            Click me
          </button>
        </div>
      );
    }
  }

  // 함수 컴포넌트
  function Example() {
    // 새로운 state 변수를 선언하고, count라 부르겠습니다.
    const [count, setCount] = useState(0);
  	const [isModalActive, setIsModalActive] = useState(false);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
        <button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button>
      </div>
    );
  }

  // 안 좋은 예시
  const [state, setState] = useState({
  	color: "blue",
  	isActive: true,
  	name: "wecode".
  	password: "hooks"
  })