React 인터랙티브 컴포넌트 제작

소개

이 프로젝트에서는 React 를 사용하여 간단한 show/hide 기능을 만드는 방법을 배우게 됩니다. 페이지에서 이미지의 가시성을 토글하는 버튼을 구현할 것입니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

• HTML, CSS 및 JavaScript 파일을 사용하여 React 프로젝트를 설정하는 방법
• useState 훅을 사용하여 애플리케이션의 상태를 관리하는 방법
• 상태에 따라 컴포넌트를 조건부로 렌더링하는 방법
• CSS 를 사용하여 컴포넌트의 스타일을 지정하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• 기본적인 React 애플리케이션을 생성할 수 있습니다.
• 요소의 가시성을 제어하기 위해 상태 관리를 구현할 수 있습니다.
• React 프로젝트에서 HTML, CSS 및 JavaScript 를 통합할 수 있습니다.
• React 를 사용하여 대화형 사용자 인터페이스를 구축하는 기본 사항을 이해할 수 있습니다.

프로젝트 설정

이 단계에서는 프로젝트를 설정하고 제공된 파일에 익숙해집니다.

1. 오른쪽에서 편집기를 엽니다. 프로젝트 디렉토리에서 다음 파일을 볼 수 있습니다:

├── style.css
├── index.html
├── script.js
└── dog.png

2. 오른쪽 하단 모서리에 있는 "Go Live"를 클릭하여 포트 8080 에서 프로젝트를 엽니다.

Show/Hide 기능 구현

이 단계에서는 버튼을 사용하여 이미지를 표시하고 숨기는 기능을 구현합니다.

1. script.js 파일을 엽니다.
2. App 컴포넌트를 생성합니다:

function App() {
  const [show, setShow] = React.useState(true);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "button",
      { onClick: () => setShow(!show) },
      show ? "Hide Element" : "Show Element"
    ),

    show && React.createElement("img", { src: "dog.png" })
  );
}

이 컴포넌트에서:

• useState 훅을 사용하여 show 상태 변수와 이를 업데이트하는 함수 setShow를 생성합니다.
• show의 초기 값은 true로 설정됩니다.
• 클릭 시 show의 값을 토글하는 버튼을 렌더링합니다.
• 버튼 텍스트는 show의 값에 따라 변경됩니다.
• show 상태 변수를 사용하여 이미지를 조건부로 렌더링합니다.

3. App.js 파일을 저장합니다.
4. 브라우저에서 페이지를 새로 고칩니다.
5. "Hide Element" 버튼을 클릭하여 이미지를 숨깁니다.
6. "Show Element" 버튼을 클릭하여 이미지를 다시 표시합니다.

축하합니다! "Show and Hide" 프로젝트를 완료했습니다. React 를 사용하여 버튼으로 간단한 show/hide 기능을 만드는 방법을 배웠습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.