리액트에서 컴포넌트들은 클래스형 컴포넌트 혹은 함수형 컴포넌트로 표현
컴포넌트는 UI를 만들고, 라이프사이클을 통해 화면에 나타나거나 사라지는 것과 같은 상황에서 특정 동작을 실행
클래스형 컴포넌트
: 상태값(state)과 LifeCycle를 가짐, 메모리 자원을 함수형보다 더 사용, 임의 메소드 정의 가능
함수형 컴포넌트
: 상태값(state)과 LifeCycle를 가질 수 없음, 메모리 자원을 클래스형보다 덜 사용, 편리한 컴포넌트 선언
리액트 버전 16.8부터 훅(Hook)
이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되어 점차 클래스형보다 함수형 컴포넌트를 사용하는 추세이다.
- class 키워드로 시작
- Component로 상속 받음
- render() 함수를 사용해서 JSX를 반환
- props를 조회할 때 this 키워드 사용
import React, { Component } from 'react';
class App extends Component {
render() {
const str = 'world';
return (<div>Hello, {str}</div>);
}
}
state
: 컴포넌트 내부에서 바뀔 수 있는 값
- state 사용 불가
- 생명 주기 함수 작성 불가능
- return문을 사용해서 JSX를 반환
import React from 'react';
const App = () => {
const str = 'world';
return (<div>Hello, {str}</div>);
}
React에서 컴포넌트는 여러 종류의 "생명주기 메소드" 를 가지며 이 메소드를 오버라이딩(상속하여 재정의) 하여 특정 시점에 코드가 실행되도록 설정
"Life Cycle Method"는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메소드들, 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 존재
클래스 컴포넌트에만 해당되는 내용이며, 함수형 컴포넌트는 Hook를 사용하여 생명주기에 원하는 동작을 실행
Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook은 기존에 사용하던 class를 이용한 코드를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.
함수형 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었는데 이 캐시를 이용하고자 만든 여러개의 API가 'React Hook' 함수이다. 훅에 의해 함수형 컴포넌트도 클래스형 컴포넌트처럼 사용할 수 있다.
React Hooks 총정리
React Hooks 사용법
React Hooks 공식문서
비교적 더 간결한 코드와 로직으로 최적화 가능
Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점