Hook 상태관리 useState

10329 단어 ReactReact

useState

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

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"
    })

좋은 웹페이지 즐겨찾기