[react] 컴포넌트 종류와 리액트 훅(React Hooks)

함수 컴포넌트

 

Function Component

 

함수형 컴포넌트는 JSX리턴하는 함수를 정의한다.

 

컴포넌트 자체에 State(데이터)가 없거나 외부에서 전달받은 데이터(Props)를 보여주거나 State, Props 둘다 없는 정적인 컴포넌트를 만들때 함수형 컴포넌트를 사용한다.

 

클래스 컴포넌트와 반대로 함수를 호출할때마다 함수 코드블럭 전체가 재실행되고 그 안에서 선언된 로컬변수, 값들이 다시 정의,할당 되어진다.

따라서 일반 함수형 컴포넌트에서는 자체적인 State를 가질수 없다.

 

 

정리:

함수형 컴포넌트는 자체적인 데이터가 필요없고 라이프 사이클 메소드를 사용하지 않는 정적인 컴포넌트를 만들때 사용한다

 

 

 

클래스 컴포넌트

 

Class Component

 

리액트에서 제공하는 React.Component 클래스를 상속하는 클래스를 만들고 UI를 어떻게 표기할 것인지 정의하는 render함수를 구현해야 한다. 그리고 컴포넌트 내에서 지속적으로 기억되어야 할 즉, UI를 표기하기 위한 데이터를 정의해야 한다면 this.state 멤버변수에 오브젝트 형태로 데이터를 정의할 수 있다.

 

클래스 특성상 클래스의 인스턴스(오브젝트)를 생성하면 클래스 메소드를 재호출해도 클래스의 멤버변수를 직접적으로 수정하지 않는 한 한번 만들어진 멤버변수는 값이 계속 유지된다.

때문에 render함수를 여러번 호출해도 컴포넌트에서 정의된 데이터는 사용자에게 일정한 데이터를 보여줄 수 있다.

 

 

정리

: 리액트에서 클래스 컴포넌트를 만들려면 React.Component를 상속하는 클래스를 만들고 데이터는 this.state 멤버변수에 정의한다.

그리고 render함수에 HTML같은 JSX문법을 이용하여 UI를 어떻게 표기할것인지 정의한다.

 

 

리액트 훅(React Hooks)

리액트 훅이란 함수형 컴포넌트에서 state와 라이프 사이클 메소드를 사용할 수 있게 해주는 도구이다.

 

즉, 클래스 컴포넌트에서만 사용할수 있었던 state와 라이프 사이클 메소드를 사용할 수 있게 해준다.

 

 

State Hook:

 

함수형 컴포넌트에서도 state를 쓸수 있도록하고 여러번 호출되어도 일정한 데이터를 유지하는 방법

useState()

 

 

Effect Hook:

 

리액트 라이프 사이클 메소드처럼 원하는 데이터를 설정하고 그 데이터가 변경되었을 때만 호출할 수 있도록 해주는 

useEffect()

 

외에도 useCallback(), useMemo(), useRef() 등