Modal을 이용하여 넷플릭스 로그인 화면 만들기

아래 영상을 보고 넷플릭스 초기 로그인화면을 만들었다.

https://www.youtube.com/watch?v=jbverObMzbg

 

 

모달로 로그인 창 만들다 발생한 문제

 

컴포넌트 상단에 다음과 같이 state를 지정한다.

signIn 상태가 true일때는 <SignUp/> 이라는 로그인 창이 렌더링되고 false일땐 기본 화면이 렌더링된다.

const [signIn,setSignIn] = useState(false);
.
.
.

<div className = 'login__body' onClick = {()=>{setSignIn(false)}}>
                {//signIn이 true일때는 <SignUp /> 이 렌더링되고 아니면 기본화면이 렌더링된다.
                    signIn ? (<SignUp />) : (
                        <>
                        <h1>영화, TV 프로그램을 무제한으로.</h1>
                        <h2>다양한 디바이스에서 시청하세요. 언제든 해지하실 수 있습니다.</h2>
                        <h3>시청할 준비가 되셨나요? 멤버십을 등록하거나 재시작하시려면 이메일 주소를 입력하세요.</h3>
                        {/* onSubmit으로 signin 상태변화 */}
                        <form className = 'login__form' onSubmit={()=>{setSignIn(true)}}  >
                            <input type='text' placeholder='Email Address' />
                            <button>시작하기</button> 
                        </form>
                        </>
                    )
                }
            </div>

 

 

 

발생하는 문제

로그인 창 바깥 화면을 클릭하였을 때, 로그인 창이 꺼지도록 하기 위해

로그인 창 바깥 화면에 해당하는 상위 div에 onClick이벤트로 로그인 창을 켜고 끄는  signIn 상태를 false로 변경한다.그것이 아래 코드인데, 여기서 문제가 발생한다.

로그인창을 클릭하였을 때, 이벤트 버블링에 의해 .login__body의 onClick이 실행된다.

 

때문에 이벤트 버블링이 .login__body까지 진행되지 않도록 해주어야 하는데

 

그럴 때 필요한 것이 바로 Event.stopPropagation()이다.

 

아래와 같이 로그인창(모달)역할을 하는 자식 컴퍼넌트에 props로 Event.stopPropagation()을 걸어주었다.

SignUp 컴퍼넌트에 props를 통해 Event.stopPropagation()을 전달한다.

SignUp 컴퍼넌트의 <div>태그에 props를 통해 Event.stopPropagation()를 전달한다.

Event.stopPropagation()

이벤트 이후의 전파를 막는다.

 

 

---

https://github.com/ryu9663/netflix_cloneCoding/tree/master

GitHub - ryu9663/netflix_cloneCoding: 넷플릭스 클론코딩

깃허브