리액트 컴포넌트

웹어플리케이션, 웹페이지에서 독립적이고 재사용이 가능한 단위로(박스 단위로) 나뉘어진 블럭

리액트에서 컴포넌트를 만들기 위해서는
1. React.Component 클래스를 상속한다.
2. this.state에 데이터를 담는다.
3. render() 함수에 JSX 문법으로 데이터를 UI로 표기하도록 코드를 작성한다.

컴포넌트를 만드는 방법

1. 클래스 컴포넌트
2. 함수 컴포넌트

👑클래스 컴포넌트

• Class : React.Component 클래스를 상속
• render() : UI가 어떻게 표기 될 것인지 정의
• this.state 멤버변수 : 컴포넌트 자체에서 기억해야 하는, UI를 표기 하기 위한 데이터를 오브젝트 형태로 저장해 둠

this.state의 데이터를 업데이트하면 React가 자동으로 render 함수를 호출하여 브라우저에 업데이트 한다.

클래스의 특성

클래스의 멤버 변수는 한번 생성된 이후 직접 수정하지 않는한 값이 유지된다.
클래스의 인스턴스(오브젝트)가 생성이 되면 클래스의 메소드(함수)를 아무리 많이 호출해도 마찬가지이다.

따라서 render함수가 여러번 호출되어도 컴포넌트에서 가지고 있는 데이터는 손실되지 않고 사용자에게 보여줄 수 있다. (컴포넌트 내부의 데이터가 변경되지 않아도 부모 컴포넌트에서 전달받은 props값이 변경되는 경우 render함수가 계속해서 호출될 수 있다.)

🎩함수형 컴포넌트

JSX를 리턴하는 함수 정의

다음과 같은 경우에는 굳이 클래스를 정의하지 않고 함수만으로 컴포넌트를 정의할 수 있다.

• 컴포넌트 자체에 데이터(State)가 없는 경우
• 외부에서 전달받은 데이터(Props)만 보여주면 되는 경우
• State, Props 둘다 없는 아주 정적인 컴포넌트인 경우

함수의 특성

함수를 호출할때마다 함수의 코드 블럭이 다시 실행이 되고,
그안에 선언한 모든 로컬 변수들은 함수의 실행 컨텍스 안에서 재 정의, 값이 할당되어진다.
함수가 호출될때 모든 로컬 변수들의 값이 초기화 되어서 기존의 데이터 들이 다 초기화된다.
이 때 함수 안에서는 State를 보관해서 일관적으로 사용할 수 없다.

✨리액트 훅 (React Hooks)

함수형 컴포넌트에서 클래스 컴포넌트에서만 이용이 가능했던 State와 라이프 싸이클 메소드들을 이용할 수 있도록 도와준다.
기본적으로 use로 시작하는 함수들이며, 커스텀할 수도 있다.

State Hook

함수형 컴포넌트에서도 State를 쓸 수 있도록, 함수형 컴포넌트가 여러번 호출이 되어도, 계속 일정한 데이터를 기억하고 있는 useState()가 있죠? :)

Effect Hook

• useEffect() : 라이프 싸이클 메소드와 같이 원하는 데이터만 타켓으로 삼아서 그것이 변경될때마다 호출 될 수 있도록 할 수 있다.

그 외 : useCallback, useContext, useMemo, useReducer, useRef...

정리

1. 정적인 컴포넌트일 경우 함수형 컴포넌트
2. state가 필요하거나, 라이프 사이클 메소드가 필요할 경우
3. 클래스 컴포넌트
4. 함수형 컴포넌트 + 훅