리액트 컴포넌트 종류 및 Hook에 대한 정리

리액트 컴포넌트란???!

리액트에서 컴포넌트라는 것은 웹어플리케이션, 웹페이지 둘다에서 독립적이고 다시 사용이 가능하게 만들어진 단위로써(box단위로) 만들어진 block를 말한다. 최대한 간단하고 독립적이고 재사용이 가능하게 작은 단위로 만들면 좋다.

 

리액트 라이브러리를 이용해서 컴포넌트를 만드는 방법은 클래스형, 함수형 두가지가 있는데

 

클래스 컴포넌트

클래스 컴포넌트

리액트에서 제공하는 React.Component 클래스를 상속하는 클래스를 만들면 되고, UI가 어떻게 표기 될 것인지, 정의하는 render() 함수를 구현해 줘야 한다. 컴포넌트 자체에서 기억이 되어져야 하는, UI를 표기하기 위해서 데이터가 주어진다면 this.state 멤버 변수에 오브젝트 형태로 데이터를 저장할 수 있다.

 

클래스 특성상, 클래스의 오브젝트(인스턴스)가 생성이 되어 클래스의 메소드(함수)를 계속해서 호출해도 클래스의 멤버 변수를 직접 고치지 않으면 멤버 변수는 한번 만들어지고나서 계속 원래 값이 유지가 된다.

 

그래서 render함수가 계속 호출이 되어져도(부모 컴포넌트로 부터 받은 props가 변경되는 경우 컴포넌트 자체의 데이터, this.state가 변경되지 않아도 render함수가 계속 호출될 수 있다.) this.state에 있는 데이터는 안바뀌기 때문에, 컴포넌트에서 가지고 있던 데이터를 잃어 버리지 않고 데이터를 유저에게 보여줄 수 있다.

 

컴포넌트에서 데이터를 변경해서 UI를 업데이트 하고 싶으면, this.state만 업데이트 하면 리액트가 알아서 render 함수를 다시 호출하고 브라우저에 업데이트를 해주게 된다.

즉, 리액트 라이브러리에서 정해진 규칙으로써 리액트에서 컴포넌트를 만들려면 react.component 클래스를 상속하고, 데이터는 꼭 this.state에 담아 두고, render() 함수에 HTML과 같은 JSX 문법을 이용해서 데이터를 어떤식으로 UI로 표기 할건지 정의를 해놓도록 만드는 것이 중요하다.

 

그리고 또 중요한 것은 리액트는 변경사항이 한가지의 방향으로 흘러간다.

데이터가 변경이 되면 => UI가 업데이트 되는 식으로

즉, 데이터(State)가 변경되면 => 리액트가 render()함수를 호출해 UI가 업데이트 된다.

 

 

 

 

함수혐 컴포넌트

리액트에서 컴포넌트를 만드는 다른 방법은 JSX를 리턴하는 함수를 정의하는 것이다.

함수형 컴포넌트

컴포넌트 자체의 데이터(state)가 없으면, 외부에서 전달받은 데이터(Props)만 보여주면 되거나, State, props 둘다 없는 정적인 컴포넌트인 경우 클래스를 정의하지 않고 함수만으로 리액트 컴포넌트를 만들 수 있다. 

클래스와는 반대로 함수 특성상, 함수 호출할때 마다 함수의 코드 블럭이 실행되어야 하고 선언한 모든 로컬 변수를 함수의 실행 컨텍스 안에서 재 정의, 값이 할당되어진다.

 

그래서 함수 안에서 State를 보관해서 일관적으로 사용자에게 보여줄 수 있는 방법이 없기 때문에(함수가 호출될때 모든 로컬 변수들의 값이 초기화 되어 기존의 데이터 들이 다 초기화 된다.) 일반 함수형 컴포넌트에서 컴포넌트만의 자체적인 데이터(State)를 가질 수 없다. 그러므로 함수형 컴포넌트는 따로 State가 필요 없고, 리액트에서 제공하는 라이프 싸이클 메소들을 사용하지 않아도 될때, 함수만 정의해서 사용할 수 있다.

 

리액트 훅은??

리액트 훅은 함수형 컴포넌트에서 클래스 컴포넌트에서만 이용이 가능했던 State와 라이프 싸이클 메소드들을 이용하게 해주는, 함수형 컴포넌트에 리액트의 다른 기능들을 갈고리처럼 연결시켜주는 것이다.

리액트에서 기본적으로 제공되는 훅들은 use로 시작하는 함수이고, 여러 컴포넌트에 재사용 되게 하는 로직들이면 유저가 스스로 정의해서 만들 수 있다.(Custom Hooks)

 

State Hook과 Effect Hook이 있는데 State Hook부터 보면

State Hook

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

 

Effect Hook

리액트의 라이프사이클 메소드처럼 활용할 수 있고 원하는 데이터만 타겟으로 삼아서 변경될 때마다 호출될 수 있도록 쓸 수 있는 useEffect()도 있다.

 

외에도 useCallback, useContext, useMemo, useReducer, useRef 등등 다양한 것들이 있다.

 

 

정적인 컴포넌트라면 순수 함수형 컴포넌트를 사용하고 State가 필요하거나 라이프 사이클 메소드가 필요하면 클래스로 구현하거나 함수형 + Hooks을 이용해서 구현하면 된다. 리액트 훅은 최신기능이기 때문에 리액트사이트에가서 Hooks 챕터를 천천히 살펴보자.(즉, 클래스 컴포넌트와 리액트 훅 둘 다 잘 배워놓자..)

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)