리액트 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위를 말하며,
MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를
쉽게 만들 수 있다는 장점을 가지고 있다
컴포넌트는 함수형과 클래스형, 이 두가지 방법으로 선언할 수 있다
과거에는 클래스형을 많이 사용했지만 19년도 이후 함수형 컴포넌트에
리액트 훅(hook)이 도입되며 현재는 함수형이 더 많이 사랑받고 있다.
아래는 각각 함수형과 클래스형 컴포넌트를 선언한 것이다
// 함수형 컴포넌트
import React from 'react';
function App() {
const name = "너무 재미있는 리액뚜";
return <div>{name}</div>;
}
export default App;// 클래스형 컴포넌트
import React,{Component} from 'react';
class App extends Component {
render() {
const name = "너무 재있는 리액뚜";
return <div>{name}</div>;
}
}
export default App;두 컴포넌트의 역할을 동일하나 클래스형의 경우 state, 라이프 사이클 기능을 사용할 수 있으며,
render함수를 통해 jsx를 반환해야한다
반면 함수형은 선언하기가 상대적으로 편하다 기존 함수형 컴포넌트는 state와 라이프사이클api를
사용하지 못한다는 단점이 있었으나 리액트 훅이 도입되며 해결되었다
함수형 컴포넌트 안에서도 함수선언문과 함수표현식으로 나뉘는데 첫 번째는 this가 가르키는
대상의 차이이다 함수 선언문은 자신이 종속된 객체를 가르키며 표현식은 자신이 종속된
인스턴스를 가르킨다 또 함수 선언식은 호이스팅의 영향을 받지만 표현식은 받지 않는 등
둘은 차이가 있다 장단점이 있으나 느끼는 것은 사바사이기 때문에
자기가 편한 방식을 사용하며 차이를 잘 인지하고 일관된 개발이 필요할 것 같다
위에서 언급한대로 기존 함수형 컴포넌트는 State와 라이프사이클API를 사용하지 못한다는
단점이 있었다 이를 보완하기 위에 나온게 React Hook이다 훅은 생명주기 기능을
연동할 수 있게 해주는 함수 이다. 오직 함수 컴포넌트에서만 사용가능하다
만약 같은 함수를 여러번 사용하게 될 때에는 직접 훅을 만들어서 사용할 수도 있다.
공식문서에서는 아래와 같은 두가지의 규칙을 제시하고 있다
1. 최상위에서만 호출할 수 있다.
2. react함수 내에서만 호출할 수 있다.
매일 도망가는 나 잡아오기