[ReactNative] 컴포넌트

 

클래스형(class) 컴포넌트 vs 함수형(function) 컴포넌트 

 

클래스형 컴포넌트

ex)  

class App extends Component {
  render() {
	
    	//생략
    
  }
}

class HelloReact extends Component {
  render() {
		//생략
  
 	return(
  		//생략
   		);
	}
}

 

• State사용가능
• 라이프 사이클 기능 사용가능
• 임의 method정의 가능
• render() 함수 필수 
• 내부에서 보여주어야할 jsx return

 

 

함수형 컴포넌트 

: 두가지 표현 방식이 있음( 둘은 다름 )

• 일반적 함수 선언 방식
• 화살표 함수

 

예시)

일반적인 함수 선언 방식 

function App() {

  return 생략 ;
  
}

function Hello(props) {
    return (
        <div>Hello {props.name}</div>
    );
}

 

화살표 함수 방식

: 함수를 파라미터로 전달할 때 유리

const HelloReact = () => {

	return(
    
    
    );

}

const Hello = (props) => {
    return (
        <div>Hello {props.name}</div>
    );
}

 

 

함수형 컴포넌트

• 선언하기 편함
• 메모리 자원을 덜 사용하여 빠름
•  state , LifeCycleAPI사용 불가 
• Hooks사용가능 ( 위의 단점 극복 ) 

 

 

일반적 함수 vs 화살표함수 

두 방식의 함수는 this에 차이점이 존재한다.

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 값

일반적 함수의 this는 this 값은 그 함수가 속한 객체의 값

을 의미함