3주 - 앱 전환

React Curve 3주 차에 오신 것을 환영합니다

개발자님 안녕하세요! 다시 만나 반갑습니다.

대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다.

앱 전환

이번 주에 우리는 반응에서 버튼을 클릭할 때 콘텐츠를 표시하거나 숨기는 토글 앱을 만들었습니다.

토글 구성 요소를 만들려면 우리는 다음을 수행해야 합니다.

버튼 상태를 유지하는 상태를 만듭니다.

버튼 상태가 표시되거나 표시되지 않습니다.

버튼을 클릭하면 setShow 메소드가 실행됩니다.

setShow 메소드는 현재 표시 상태를 반대로 바꿉니다.

표시 상태가 true인 경우 화면에

를 표시하고 버튼에서 "Hide Welcome"을 토글합니다.

표시 상태가 false인 경우 화면에 메시지를 표시하지 않고 버튼에서 "시작 표시"를 토글합니다

.

암호

import React, {useState} from 'react';

const Toggle = () => {
    const [show, setShow] = useState(true);

    return (
        <div className="showHide">
            <h2>Toggle</h2>
            <div>
                <button onClick={() => setShow(!show)}>
                    {show ? "Hide Welcome" : "Show Welcome"}
                </button>
                {show && <h2>Hi, How are you ? </h2>}
            </div>
        </div>
    );
}

export default Toggle;

결론

읽어 주셔서 감사합니다. 아래 스레드에서 어떤 기여도 환영합니다!

Live Preview
Source Code