[프로젝트] props를 사용해서 컴포넌트를 껐다 키자(react)

요새 회원가입 페이지를 만들고 있다.정말 심플하고 트랜디하게 잘만들었다

 

그치만

 

회원가입완료가 떴는데 입력하던 폼은 안사라지고 그대로 있다

 

props로 임마를 사라지게 해보자 !!!!

 

---

 

나의 js파일 구조는 

 

signup_button 컴포넌트

        ↓ 하위

signup_page 컴포넌트

 

 

버튼(signup_button)을 누르면 Dialog 팝업의(signup_page)가 뜨는 구조다

 

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Login from './Login_page';
import './Login_button.css';
import Signup_page from './Signup_page';

class Signup_button extends React.Component{

    constructor(props){
        super(props);
        this.state ={
            signup_open: false,           //팝업이 열리는지 안열리는지 t or f
        }

        this.sign_handleClickOpen = this.sign_handleClickOpen.bind(this);
        this.sign_handleClose = this.sign_handleClose.bind(this);
    }

    sign_handleClickOpen(){          // open state값을 true바까서 열리게 해준다
        this.setState({
            signup_open: true,
        })
    }

    sign_handleClose(){              // open state값을 false로 바까서 닫히게 해준다
        this.setState({
            signup_open: false,
        })
    }
  

    render(){
    return (
        <div>
            <a onClick={this.sign_handleClickOpen}> 회원가입 </a>

            <Dialog                               //임마가 뜨고 안뜨고 한다
                open={this.state.signup_open}     // true or  false
                onClose={this.sign_handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
                className="height_login_button"
            >
                <Signup_page sign_handleClose={this.sign_handleClose}/>
                // ★★ 하위 컴포넌트 Signup_page다 하위 컴포넌트에서 
                // state값을 만지기위해 함수를 보냈다

                <DialogActions>
                    <Button onClick={this.sign_handleClose} color="primary">
                        닫기
          		</Button>

                </DialogActions>
            </Dialog>
        </div>
    );
    }
}

export default Signup_button

 

 

 

 

이제 signup_page를 보자 너무길어서 중요 함수만 들고 왔다

 

★★★★부분만 보자

 

async onSubmit(e) {
        e.preventDefault();


        await this.checkpw(); //비밀번호 양식맞는지, 비밀번호 확인이 맞는지

        if(this.state.number == this.state.inputnumber){ // 인증번호가 맞는지 검사 현재 number는 스트링 값
            this.setState({
                usingemail : true
            })

            console.log("인증번호 맞다");

            if (this.state.usingpw === true && this.state.usingid === true && this.state.usingnick === true) {  //사용가능 하면 fetch 연결

                const data = {
                    id: this.state.id,
                    pw: this.state.pw,
                    email: this.state.email,
                    nickname: this.state.nickname,
                }

                console.log(data.id);
    
    
                fetch('http://localhost:3001/sign', {
                    method: "post",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(data),
                })
                    .then(res => res.json())
                    .then(json => {

                        if(json.tf === true )
                        alert("가입완료");
                    })

                    await this.props.sign_handleClose();   //★★★★ 상위 컴포넌트의 함수
                    await this.props.login_handleClose();
            }
        }

        else{
            alert("인증번호 맞아요?");
        }

    


    }

 

if문을 거쳐 회원가입이 완료되면 

 

props함수가 실행된다 

 

signup_button컴포넌트의 open state가 바뀌면서 꺼진다 

 

 

---

코딩 하다보니까

 

컴포넌트

     ↓ 하위

컴포넌트

     ↓ 하위

컴포넌트

 

인 경우에서 맨 밑에 친구가 맨위에 state도 만지고 싶은 경우가 있었다. 

 

똑같이 중간 컴포넌트에서 아래친구에게 

<Signup_button login_handleClose={this.props.login_handleClose} />

이런식으로 전달 해 주면 된다

 

신기하다 !!!