React : Component, Import & Export

  React : Component

 

 

 내용은 다르지만 그 구조는 같은 각 부분을 컴포넌트라고 부른다. 컴포넌트를 사용하면 다른 데이터 집합에 같은 DOM 구조를 재사용할 수 있다. 컴포넌트는 부품과 같다 ! 

 

  리액트 컴포넌트의 역사

 

1. createClass

 2013년 리액트가 처음 등장했을 때 컴포넌트를 만드는 방법

어떻게 리액트 엘리먼트를 반환하고 렌더링 해야하는지 알려주는 render() 메서드가 들어있다. 

지금은 공식적으로 사용 금지 되었고, 자체 패키지인 create-react-class로 옮겨졌다.

 

2. 클래스 컴포넌트

 ES 2015에 클래스 문법이 도입되면서 리액트 컴포넌트를 만드는 새로운 방법이 도입됨

React.Component API 를 사용, class 구문을 이용해 컴포넌트 인스턴스를 만들었다. 

요즘은 함수를 사용해 컴포넌트를 만든다. 

 

 

  Import, Export 사용법

 componentf를 Import, Export를 이용하여 사용할 수 있다.

보통 페이지 최상단에 Import 적는다. 

 

export default 는 한 모듈당 하나만 넣는다. 

 

export를 export default 로 내보냈다면 import할 때 default as '이름' 으로 받아야 한다. '이름'은 어떤 이름으로 받아올 지 정하는 것으로 원하는 이름으로 지어도 상관은 없다. default로 내보내면 이름이 없어도 된다.