React Native로 요소 표시 및 숨기기

React는 페이지에서 요소의 가시성을 조작하는 여러 가지 방법을 제공합니다. 일반적인 접근 방식은 인라인 스타일을 사용하여 표시 속성을 설정하는 것입니다. 그러나 이 방법에는 인라인 스타일이 필요하므로 불편할 수 있고 코드 가독성이 떨어질 수 있습니다.

더 우아한 솔루션은 React State API를 사용하는 것입니다. State API를 사용하면 React 구성 요소 내에서 데이터를 정의하고 관리할 수 있습니다. 구성 요소의 상태를 변경하면 새 상태에 따라 UI를 업데이트하는 다시 렌더링을 트리거할 수 있습니다.

다음을 사용하여 클릭 이벤트를 통해 페이지에서 요소를 표시하거나 숨길 수 있습니다. React State API:

1. MyComponent와 같은 새 React 구성 요소를 만듭니다.
2. 구성 요소의 렌더링 메서드에서 표시하거나 숨기려는 요소를 렌더링합니다. 조건부 렌더링을 사용하여 요소가 표시되어야 하는지 여부를 결정합니다.
3. 구성 요소의 생성자 메서드에서 showElement와 같은 새 상태 변수를 만들고 false로 설정합니다.
4. 가시성 변경을 트리거하는 요소에 onClick 이벤트 핸들러를 추가합니다. 이벤트 핸들러에서 showElement 상태 변수를 전환합니다.
5. 요소를 조건부로 렌더링하려면 렌더링 메서드에서 showElement 상태 변수를 사용합니다. showElement가 true이면 요소가 표시됩니다. showElement가 false인 경우 해당 요소는 숨겨집니다.

다음은 이를 구현하는 방법의 예입니다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }

  toggleShowElement = () => {
    this.setState((prevState) => ({ showElement: !prevState.showElement }));
  };

  render() {
    return (
      

        {this.state.showElement && 
Hello World!
}
        Toggle
      
    );
  }
}

이 코드 조각은 "Hello World!" 텍스트가 있는 div를 렌더링하는 MyComponent라는 새로운 React 구성 요소를 생성합니다. showElement 상태 변수가 true인 경우. 또한 "Hello World!"의 가시성을 전환하는 버튼도 포함되어 있습니다. 요소.