React import export

import export

자바스크립트 ES6 신문법으로 한페이지에 있는 긴 코드를  기능별로 쪼갤때 사용한다. (모듈화 )

리액트에서도 자주 사용하는 문법으로 

컴포넌트, 변수 ,state 등을 파일로  쪼개서 필요할때마다 꺼내서 사용할 수 있다. 

 

import export 사용법

1.파일을 만든다. 

2.export 한다.

// Done.js 파일을 만든뒤 


function Done(props) {
  return (
    <div className="card-container">
      <div className="card-box">
        <h4>{props?.list?.title}</h4>
        <p>{props?.list?.content}</p>
        <button onClick={() => props.삭제함수(props.list.id)}>삭제하기</button>
        <button onClick={() => props.취소함수(props.list.id)}>취소하기</button>
      </div>
    </div>
  );
}

//export 하였다. 
export default Done

3.쓰고싶은 곳에서 import 한다. 

// App.js 파일에서 import 한다.
import Done from "./Done";

function App() {
return(
<Done></Done>
)
}

4. 여러개의 변수들을 내보대고 싶으면 export{} import{} 문법을 사용한다.

//data.js 파일

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }
 

// App.js 파일
import { name1, name2 } from './data.js'

 

import export 활용

길고 복잡한 state를 다른 js파일에 저장해둔 뒤에 그것을 import 해서 useState안에넣을 수있다. 

1. 파일을 만들고 export 한다.

//data.js
const data = [
  {
    id: 1,
    title: "리액트 공부하기",
    content: "리액트 기초를 공부합니다.",
    isDone: false,
  },
  {
    id: 2,
    title: "리액트 복습하기",
    content: "리액트를 복습 합니다.",
    isDone: false,
  },
  {
    id: 3,
    title: "리액트 예습하기",
    content: "리액트를 예습 합니다.",
    isDone: false,
  },
];
export default data;

2. import 하고 useState안에 넣는다. 

//App.js
import data from "../components/data";

function App() {
  const [todo, setTodo] = useState(data)
  return(
  <>
  	<p>{todo[0].title}</p>
  	<p>{todo[0].content}</p>
//import한 파일을 가져다 사용 할 수있다.
  </>
  };