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}>< 연락처 가져오기</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;
허용
버튼을 누르면 BringContacts.js로 isModalAccepted = true
라는 값을 넘겨주게 된다.props.isModalAccepted(true)
라는 형식으로 사용해야한다.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}>< 연락처 가져오기</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}>< 연락처 가져오기</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;
handleFriends
라는 함수가 실행되고 isSubmitted=true
가 된다.<BringContacts isFriendsCompleted={isSubmitted}/>
가 열리게 된다.isFriendsCompleted={isSubmitted}
값이 같이 전달된다.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/