[React] 상위/하위 컴포넌트에 값 전달하기

kyliecamila·2022년 2월 24일
PropsReactcomponent
0

React

목록 보기
1/3

React에서 상위 component->하위 component 값(데이터)를 전달하는 방법과
하위 component->상위component로 값을 전달하는 방법에 대해서 정리해보자.

하위 component->상위component

사용방법

하위페이지 : 

const 함수 =(e)=> {
	props.props이름(넘길값)
}

상위페이지 :

const 함수=(props이름)=>{
 //아래와 같은 일들을 할 수 있다.
 변수 = props이름         //변수에 값을 넣음
 setSomething(props이름) //hooks에 값넣음
}

const 상위페이지이름 =()=>{
	<하위페이지이름 props이름={함수} />
}

예시

BringContacts.js

import React, { useState } from 'react'
import * as S from '../style'
import StartPage from './StartPage';
import Modal from './Modal';
import CheckFriends from './CheckFriends';
import Name from './Name';


const BringContacts =(props)=> {
    const [isClicked, setIsClicked] =useState(false);
    const [isClickedInput, setIsClickedInput] =useState(false);
    const [modalOpen, setModalOpen] = useState(false);
    const [isSkipped, setIsSkipped] =useState(false);
    const [isAccepted, setIsAccepted] =useState(false);
    const [isFriendsCompleted, setIsFriendsCompleted] =useState(false);
    const [isClicked2, setIsClicked2]=useState(false);

    const go2Name=()=>{
        if(props.isFriendsCompleted){
            setIsClicked2(true);
        }
        else{
            setIsClicked(true);
        }
    } 
    const go2StartPage=()=>{
        setIsSkipped(true);
    }
    
    const openOrCompleted=()=>{
        if(props.isFriendsCompleted){
            setIsFriendsCompleted(props.isFriendsCompleted);
        }
        else{
            setModalOpen(true);
        }
    } 
    const closeModal = () => {
        setModalOpen(false);
    };


    const turnBlue=()=>{
        if(isClickedInput){
            setIsClickedInput(false);
        }
        else{
            setIsClickedInput(true);
        }
   	} 
    if(isClicked){
        return(
            <Name/>
        )
        }
    const handleAcception =(isModalAccepted)=>{
        setIsAccepted(isModalAccepted);
        setModalOpen(false);
    }

   if(isAccepted){
       return(
           <CheckFriends />
       )
   }
   if(isFriendsCompleted){
    return (
        <StartPage />
    )
    }
    if(isClicked2){
        return(
            <CheckFriends/>
        )
        }
    if(isSkipped){
        return(
            <StartPage/>
        )
    }
    return (
      <S.Body>
          <S.InfoCollectContainer>
            <S.LeftSidedContainer>
                <S.UpperBar onClick={go2Name}>&lt;  연락처 가져오기</S.UpperBar>
                <S.HorizontalSpaceBetween></S.HorizontalSpaceBetween>
                <div >
                     {!props.isFriendsCompleted && <S.UpperBar onClick={go2StartPage}>건너뛰기</S.UpperBar>}
                </div>
            </S.LeftSidedContainer>
            <S.LeftSidedContainer>
                <S.InfoCollectBox>
                    <S.AskName>
                    어떤 분과의 관계를 
                    </S.AskName>
                    <S.AskName>
                    관리하고 싶으신가요?
                    </S.AskName>
                    <S.Extend>
                    카카오톡에서 가져오기
                    </S.Extend>
                </S.InfoCollectBox>             
            </S.LeftSidedContainer>
            <S.CenteredContainer onClick={turnBlue}>
                <S.Temp onClick={openOrCompleted} style={{color :props.isFriendsCompleted?'blue':'red'}} >button</S.Temp>
                <Modal open={modalOpen} close={closeModal} isModalAccepted={handleAcception}>
                    <S.ModalText>Repport에서 내연락처에 엑세스하도록 허용하시겠습니까?</S.ModalText>
                </Modal>
            </S.CenteredContainer>
          </S.InfoCollectContainer>
      </S.Body>
    );
  }
  
  export default BringContacts;

Modal.js

import React , { useState } from 'react';
import './Modal.css';
import CheckFriends from './CheckFriends';

const Modal = (props) => {
    // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
    const { open, close } = props;

 
    const handleSubmit =(e)=>{
        props.isModalAccepted(true);
    }
 
    return (
      // 모달이 열릴때 openModal 클래스가 생성된다.
      <div className={open ? 'openModal modal' : 'modal'}>
        {open ? (
          <section>
           
            <main>{props.children}</main>
            <footer>
                <button className="Accept" onClick={handleSubmit}>
                {' '}
                허용{' '}
              </button>
              <button className="Deny" onClick={close}>
                {' '}
                거부{' '}
              </button>
            </footer>
          </section>
        ) : null}
      </div>
    );
  };

  export default Modal;
  1. BringContacts.js(상위)에서 Modal.js(하위)페이지로 넘어간다.(Modal이 열린다)
  2. Modal.js페이지에서 허용버튼을 누르면 BringContacts.js로 isModalAccepted = true라는 값을 넘겨주게 된다.
    이때 Modal.js는 하위페이지이기에
    props.isModalAccepted(true)라는 형식으로 사용해야한다.
  3. BringContacts.js에서 handleAcception이라는 함수가 이 값을 받아서(isModalAccepted로 이름 일치 시켜야한다.) setIsAccepted(isModalAccepted) 에 값을 넣는다. 그후 Modal을 닫는다.
    만약 isModalAccepted = true였다면 isAccepted=true가 될 것이고 그러면 CheckFriends.js 페이지가 열릴것이다.

상위 component->하위 component

사용방법

상위페이지 : <하위페이지이름 props이름={넘길값} />

하위페이지 : props.props이름 형태로 사용하면 된다.
이때 사용할 함수에 매개변수로 props를 넣어주어야한다.

예시

CheckFriends.js

import React, { useState } from 'react'
import * as S from '../style'
import BringContacts from './BringContacts';
import BringContactsCompleted from './BringContactsCompleted';



const CheckFriends =()=> {
    const [isClicked, setIsClicked] =useState(false);
    const [isClickedInput, setIsClickedInput] =useState(false);
    const [isSubmitted, setIsSubmitted]=useState(false);
   
    const turnBlue=()=>{
      if(isClickedInput){
          setIsClickedInput(false);
      }
      else{
          setIsClickedInput(true);
      }
      } 
    const go2BringContacts=()=>{
      setIsClicked(true);
      } 

    const handleFriends =(e)=>{
      setIsSubmitted(true);
  }
    if(isClicked){
        return(
            <BringContacts/>
        )
    }
    if(isSubmitted){
      return(
        <BringContacts isFriendsCompleted={isSubmitted}/>
      )
    }
    return (
      <S.Body onClick={turnBlue}>
          <S.InfoCollectContainer>
            <S.LeftSidedContainer>
                <S.UpperBar onClick={go2BringContacts}>&lt;  연락처 가져오기</S.UpperBar>
            </S.LeftSidedContainer>
           
            <S.CenteredContainer onClick={turnBlue}>
            <S.InputBox className="box" onClick={turnBlue} 
            isClickedInput={isClickedInput} placeholder="이름 검색"></S.InputBox>                    
            </S.CenteredContainer>
         
            <S.CenteredContainer onClick={turnBlue}>
                <div onClick={handleFriends} >제출</div>
            </S.CenteredContainer>
          </S.InfoCollectContainer>
      </S.Body>
    )
  }
  
  export default CheckFriends;

BringContacts.js

import React, { useState } from 'react'
import * as S from '../style'
import StartPage from './StartPage';
import Modal from './Modal';
import CheckFriends from './CheckFriends';
import Name from './Name';


const BringContacts =(props)=> {
    const [isClicked, setIsClicked] =useState(false);
    const [isClickedInput, setIsClickedInput] =useState(false);
    const [modalOpen, setModalOpen] = useState(false);
    const [isSkipped, setIsSkipped] =useState(false);
    const [isAccepted, setIsAccepted] =useState(false);
    const [isFriendsCompleted, setIsFriendsCompleted] =useState(false);
    const [isClicked2, setIsClicked2]=useState(false);

    const go2Name=()=>{
        if(props.isFriendsCompleted){
            setIsClicked2(true);
        }
        else{
            setIsClicked(true);
        }
    } 
    const go2StartPage=()=>{
        setIsSkipped(true);
    }
    
    const openOrCompleted=()=>{
        if(props.isFriendsCompleted){
            setIsFriendsCompleted(props.isFriendsCompleted);
        }
        else{
            setModalOpen(true);
        }
    } 
    const closeModal = () => {
        setModalOpen(false);
    };


    const turnBlue=()=>{
        if(isClickedInput){
            setIsClickedInput(false);
        }
        else{
            setIsClickedInput(true);
        }
   	} 
    if(isClicked){
        return(
            <Name/>
        )
        }
    const handleAcception =(isModalAccepted)=>{
        setIsAccepted(isModalAccepted);
        setModalOpen(false);
    }

   if(isAccepted){
       return(
           <CheckFriends />
       )
   }
   if(isFriendsCompleted){
    return (
        <StartPage />
    )
    }
    if(isClicked2){
        return(
            <CheckFriends/>
        )
        }
    if(isSkipped){
        return(
            <StartPage/>
        )
    }
    return (
      <S.Body>
          <S.InfoCollectContainer>
            <S.LeftSidedContainer>
                <S.UpperBar onClick={go2Name}>&lt;  연락처 가져오기</S.UpperBar>
                <S.HorizontalSpaceBetween></S.HorizontalSpaceBetween>
                <div >
                     {!props.isFriendsCompleted && <S.UpperBar onClick={go2StartPage}>건너뛰기</S.UpperBar>}
                </div>
            </S.LeftSidedContainer>
            <S.LeftSidedContainer>
                <S.InfoCollectBox>
                    <S.AskName>
                    어떤 분과의 관계를 
                    </S.AskName>
                    <S.AskName>
                    관리하고 싶으신가요?
                    </S.AskName>
                    <S.Extend>
                    카카오톡에서 가져오기
                    </S.Extend>
                </S.InfoCollectBox>             
            </S.LeftSidedContainer>
            <S.CenteredContainer onClick={turnBlue}>
                <S.Temp onClick={openOrCompleted} style={{color :props.isFriendsCompleted?'blue':'red'}} >button</S.Temp>
                <Modal open={modalOpen} close={closeModal} isModalAccepted={handleAcception}>
                    <S.ModalText>Repport에서 내연락처에 엑세스하도록 허용하시겠습니까?</S.ModalText>
                </Modal>
            </S.CenteredContainer>
          </S.InfoCollectContainer>
      </S.Body>
    );
  }
  
  export default BringContacts;
  1. CheckFriends.js(상위)에서 제출버튼을 누르면 handleFriends라는 함수가 실행되고 isSubmitted=true가 된다.
  2. 이렇게 되면 <BringContacts isFriendsCompleted={isSubmitted}/>가 열리게 된다.
    이때, 다시 BringContacts.js(하위)페이지가 열리되 isFriendsCompleted={isSubmitted}값이 같이 전달된다.
  3. 다시 BringContacts.js로 가보자.
    여기서 받은 값을 쓰려면 BringContacts=(props)=>{}라고 설정해주어야하고 props.isFriendsCompleted라고 써야한다. 이를 이용해서 조건부 element 렌더링과 글자색 설정을 하였다.



참고자료
상위 컴포넌트에 값넘기기
https://velog.io/@leo-xee/React-%EC%83%81%EC%9C%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0
모달
https://phrygia.github.io/react/2021-09-21-react-modal/

profile
kyliecamila
다음 포스트

[React] 컴포넌트 조건부 렌더링

0개의 댓글