React | 화살표 함수와 export, import ?

🔷리액트를 다루는 기술 #6

 

 

🔵화살표 함수

 

화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식이다.

 

일반 함수 function() {} 은 자신이 종속된 객체를 this로 가르키고,

화살표 함수 () => {}는 자신이 종속된 인스턴스를 가르킨다.

 

화살표 함수는 값을 연산하여 바로 반환할 때 사용하면 가독성을 높일 수 있다 !

 

 

🔵 모듈 내보내기 / 불러오기 (export / import)

 

const MyComponent = () => {
    return <div>나의 컴포넌트</div>;
};

export default MyComponent;

 

export : 다른 파일에서 해당 파일을 import 할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정하는 것이다.

 

import MyComponent from "./MyComponent";

function App() {
  const name = '리액트'
  return (
    <MyComponent/>
  );
}

export default App;

 

import : 다른 파일을 불러와 사용할 수 있도록 하는 것이다.