React의 상태 값 전환

인터넷 초창기부터 프런트 엔드 개발자는 JavaScript를 사용하여 웹 페이지에 동적 및 대화형 기능을 추가했습니다. 오늘날 웹 애플리케이션을 구축하는 프로세스는 20년 전과 크게 다릅니다.

개발자는 여전히 동적 대화형 기능을 사용하여 웹 앱을 빌드해야 합니다. JavaScript 기반 프레임워크를 사용하는 경향이 있습니다.

React는 최신 사용자 인터페이스를 구축하는 데 특히 인기가 있습니다. 앱에 동적 기능을 추가할 수 있는 내부 상태를 유지합니다.

이 기사에서는 React에서 상태 변수를 토글하는 방법을 보여줍니다.

React의 상태 값 전환

React에서 모든 구성 요소에는 상태가 있습니다. 개발자는 종종 상태를 사용하여 사용자의 입력을 캡처합니다.

예를 들어 요즘에는 사용자에게 웹 사이트의 라이트 모드 또는 다크 모드 버전을 사용할 수 있는 옵션을 제공하는 것이 일반적입니다.

React에서 이 기능을 구현하려면 상태 변수 nightMode(또는 다른 설명 변수 이름)를 true 또는 false로 설정해야 합니다. 그런 다음 조건부 스타일을 사용하여 이 변수의 현재 값에 따라 배경 및 텍스트 색상을 변경할 수 있습니다.

예를 살펴보겠습니다.

export default function App() {
  let [nightMode, setNightMode] = useState(false);
  const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
  return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setNightMode(!nightMode)}>
        Toggle state variable
      </button>
    </div>
  );
}

이 경우 기본적으로 false로 설정된 nightMode 변수가 있습니다. 그러나 우리는 사용자에게 다크 모드를 사용할 수 있는 선택권을 주고, 사용자가 다크 모드를 좋아하지 않는다면 일반 모드로 돌아갈 수 있는 옵션을 제공하고자 합니다.

이를 위해서는 React 토글 상태를 사용해야 합니다. 라이브 CodeSandbox 데모로 이동하여 예제 코드를 실제로 사용해 보십시오.

입력 요소의 변경 사항 캡처

위의 예에는 가장 간단한 예가 있습니다. 버튼을 클릭하면 nightMode 상태 변수의 현재 값이 토글됩니다. 또는 체크박스나 다른 요소를 사용하여 React에서 상태 변수를 토글할 수 있습니다.

HTML 요소에 따라 올바른 이벤트에 대한 이벤트 핸들러를 실행해야 합니다. 버튼의 경우 onClick 속성을 사용하여 사용자 클릭에 대한 응답으로 변경합니다.

확인란을 사용하는 경우 onChange 특성을 대신 사용할 수 있습니다.

클래스 구성 요소의 상태 업데이트

위의 예에서 useState() 후크를 사용하여 React에서 상태 변수를 업데이트했습니다. 이 후크는 React 버전 16.8 이상을 실행하는 경우에만 사용할 수 있습니다.

일부 개발자는 후크를 사용할 수 있는 경우에도 클래스 구성 요소를 작성하는 것을 선호합니다.

React 개발자는 상태 개체를 직접 변경하는 것이 금지되어 있습니다. 클래스 구성 요소의 상태를 업데이트하려면 setState() 메서드를 사용해야 합니다.

특정 속성의 값만 전환하려는 경우에도 인수는 전체 상태 개체여야 합니다. 특정 속성의 값을 변경하지만 여전히 전체 개체를 전달합니다.

예를 살펴보겠습니다.

class App extends React.Component {
  constructor() {
  super();
  this.state = {nightMode: false};
  }
  render() {
    const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
    return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setState({nightMode: !this.state.nightMode})}>
        Toggle state variable
      </button>
    </div>
  );
  }
}

클래스 구성 요소에서 상태를 초기화하려면 기능적 구성 요소 후크보다 더 많은 코드 줄이 필요합니다. 보시다시피 초기 state 객체를 생성하기 위해 constructor()를 사용했습니다.

JSX 내에서 setState() 메서드를 사용하여 nightMode 속성 값을 업데이트했습니다. 새 state 객체를 setState() 메서드의 첫 번째 인수로 전달했습니다.

React에서 상태를 전환하기 위해 nightMode 속성의 새 값을 현재 값의 반대로 설정합니다.

기능 구성 요소의 상태 업데이트

예제 코드를 다시 살펴보겠습니다.

export default function App() {
  let [nightMode, setNightMode] = useState(false);
  const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
  return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setNightMode(!nightMode)}>
        Toggle state variable
      </button>
    </div>
  );
}

useState() 후크는 상태 값(nightMode 변수에 저장됨)과 이 특정 변수를 업데이트하는 함수(setNightMode 변수에 저장됨)의 두 값을 반환합니다.

이러한 방식으로 변수 이름을 지정하는 것이 관례입니다. 상태 변수에 대한 설명 이름과 이를 업데이트하는 함수에 대한 set+variableName입니다.

클릭 이벤트에 대한 핸들러 기능은 간단합니다. 반대 연산자 !를 사용했습니다. 그리고 setNightMode() 함수를 실행하여 상태 변수 값을 현재 값과 반대로 설정했습니다.