[REACT] 컴포넌트

* 김민준님의 '리액트를 다루는 기술'을 공부하며 개인적으로 정리한 내용입니다.

 

 클래스형 컴포넌트

컴포넌트를 선언하는 방식은 2가지

- 함수형 컴포넌트

function App(){
	return <div></div>;
}

- 클래스형 컴포넌트

class App extends Component {
	render(){
    	return <div></div>;
    }
}

 

클래스형 / 함수형의 차이

• 클래스형
  - state 및 라이프사이클을 사용할 수 있다.
  - 임시 메서드를 정의할 수 있다.
• 함수형
  - 클래스형보다 선언하기 편하다.
  - 메모리 자원도 덜 사용한다.
  - 크기 자체가 작다.
  - state와 라이프사이클 API 사용이 불가능하다.
  - 16.8 업데이트 이후 Hooks로 사용이 가능해졌다. 다만 방식은 다르다.

ES6 문법 (화살표 함수)

// ES5
setTimeout(function(){
	console.log(1);
}, 1000);

// ES6
setTimeout(() => {
	console.log(1);
}, 1000);

 

대체할 수 있는 문법이 아니라, 용도가 다르다.

function BlackDog(){
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: function(){
      console.log(this.name + ' 멍멍');
    }
  }
}

const blackDog = new BlackDog();
blackDog.bark(); // 검둥이 멍멍

///////////////////////////////////////////////////

function WhiteDog(){
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: () => {
      console.log(this.name + ' 멍멍');
    }
  }
}

const whiteDog = new WhiteDog();
whiteDog.bark(); // 흰둥이 멍멍

일반 함수는 자신이 종속된 개체를 this로 가리키며

화살표 함수는 자신이 종속된 인스턴스를 this로 가리킨다.

function twice(value){
	return value * 2;
}

const triple = (value) => value * 3;

값을 바로 반환할 때 가독성이 좋다.

 

모듈 내보내기 및 불러오기

export default MyComponent;

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent />;
}

export default App;