props를 서로 다른 파일끼리도 사용이 가능할까요??

[박현수]

const Modal = () => {
    return (
      <div className='modal'>
        <h4>글제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
);
}

export default Modal;

모달함수를 위와 같이 Modal .js 파일을 새로 만들어서 App.js에서  import해서 사용했었는데요

이 경우에는 props를 사용할 수 없을까요..?

 

 

[codingapple]

다른 파일이어도 상관없습니다 

[박현수]

시도해봤을때 안되서 주석처리 하고 코딩에플님이 하신것 처럼 했엇는데...지금 주석 풀고 실행해보니 되네요...;;;;;;

감사합니다(?)ㅎㅎ;;

import { useState } from 'react';
import './App.css';
import Modal from './Modal';

function App() {
//블로그 제목 스테이트
  let [logo] = useState(블로그);

//글 제목 스테이트
  let [articleTitle, setArticleTitle] = useState(
    [남자 코트 추천, 강남 우동 맛집, 파이썬 독학]
    );

// 좋아요 숫자 올라가게만들기
let [likeNum, setLikeNum] = useState([0, 0, 0])

//모달창 여닫기
 let [modal, setModal] = useState(false);
  const modalOpen = () => {
    modal === true ? setModal(false) : setModal(true)
  }
//모달창 제목 알맞게 변경
  let [modalTitle, setModalTitle] = useState(0);

//인풋 스테이트
  let [textInput, setTextInput] = useState("");

//글 추가 함수
const newArticle = () => {
    let copy = [...articleTitle];
    copy.unshift(textInput);
    setArticleTitle(copy);  
} 
 
  return (
    <div className="App">
      <div className='nav-bar'>
        <h1>{ logo }</h1>
      </div>

      {
        articleTitle.map(function(a, i){
          return(
            <div  className='list' key = {i}>        
              <h4 onClick={() => {modalOpen(); setModalTitle(i)} }>{ articleTitle[i] }</h4>
              <span onClick={ () =>              
              {let copy = [...likeNum];
              copy[i] = copy[i] + 1;
              setLikeNum(copy)}}>👍</span>
              { likeNum[i] }
              <p>5월 18일 발행</p>
              <button onClick={ () => {
                //글 삭제 함수 i 때문에 안쪽에 씀.
                let copy = [...articleTitle];
                copy.splice(i, 1);
                setArticleTitle(copy); }}>글 삭제</button>
            </div>
          );
        })
      }
      <div>
      <input className='textInput' onChange={(e) => { setTextInput(e.target.value) }}></input>
      <button onClick={ () => { newArticle() } }>글 추가</button>
      </div>

      {
        modal === true ? <Modal modalTitle={modalTitle} articleTitle={articleTitle} /> : null
      }   
    </div>
  );
}

// const Modal = (props) => {
 
//   return (
//     <div className='modal'>
//       <h4>{props.articleTitle[props.modalTitle]}</h4>
//       <p>날짜</p>
//       <p>상세내용</p>
//       <button>글수정</button>
       
//     </div>
// );
// }

export default App;

모달 저장 파일

const Modal = (props) => {
 
    return (
      <div className='modal'>
        <h4>{props.articleTitle[props.modalTitle]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button>글수정</button>
         
      </div>
  );
  }

export default Modal;

[글쓴이]

글