React에서 onClick 이벤트 핸들러를 통해 컴포넌트 렌더링

이 기사에서는 사용자가 버튼을 클릭할 때마다 구성 요소를 동적으로 렌더링하도록 React 구성 요소를 설정하는 방법을 살펴봅니다.

React에서 onClick 이벤트 핸들러를 통해 컴포넌트 렌더링

React에서 웹 애플리케이션을 빌드할 때 사용자 입력에 따라 구성 요소를 조건부로 렌더링할 수 있습니다. 이것은 사용자의 입력을 상태 변수에 저장함으로써 가능합니다.

기능적 React 구성 요소는 상태 변수 값을 기반으로 구성 요소를 렌더링(또는 렌더링하지 않음)할 수 있는 JSX 코드를 반환합니다.

구성 요소를 조건부로 렌더링하려면 이 두 가지 기능과 JavaScript 삼항 연산자를 사용할 수 있습니다.

암호:

export default function App() {
  const [showComponent, setShowComponent] = useState(true);
  return (
    <div className="App">
      {showComponent ? <Box /> : ""}
      <button onClick={() => setShowComponent(!showComponent)}>
        Hide and show Box
      </button>
    </div>
  );
}

출력:

라이브 데모

위 스니펫에서는 useState() 후크를 사용하여 상태 변수 showComponent를 true로 초기화했습니다. 상태 변수를 업데이트하는 함수에 대한 참조를 저장할 또 다른 변수 setShowComponent도 생성합니다.

JSX에서 우리는 showComponent 변수를 평가하고 true인 경우 <Box /> 구성 요소를 렌더링하는 JavaScript 표현식을 작성했습니다. 그렇지 않으면 빈 문자열을 렌더링합니다.

JSX 내에서 JavaScript 표현식을 작성하려면 중괄호({})로 감싸야 합니다.

누군가 버튼을 클릭할 때마다 showComponent 상태 변수의 값을 업데이트하도록 onClick() 이벤트 핸들러를 설정했습니다. 상태 변수의 값을 현재 값의 반대 값으로 설정합니다.

현재 true이면 상자가 렌더링됩니다. 버튼을 클릭하면 거짓으로 설정되고 상자가 더 이상 렌더링되지 않습니다.

<Button> DOM 요소의 위치가 어떻게 변경되는지 확인하십시오. 이는 showComponent 변수의 값을 기반으로 <Box> 구성 요소(높이와 너비가 고정된 div)가 렌더링(또는 렌더링되지 않음)되기 때문입니다.