React/ part.2 component

Components란?

이번 글에서는 component에 대한 기본적인 내용들을 다룹니다.

Hook과 state에 대해서는 다른 글에서 더 자세히 설명하고 있습니다.

---

 

1. 컴포넌트의 정의

재사용이 가능한 UI 구성 단위 

컴포넌트 기반의 개발로 복잡한 UI도 효과적으로 구성이 가능하다.

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 그 조각들을 사용할 수 있다. 

쉽게 말해, 레고블럭 같은 역할이다.

페이지 내부 여러 곳에서 호환될 수 있도록 만든 UI 레고블럭이라고 생각하면 된다.

개념적으로 컴포넌트는 JavaScript 함수와 유사하다.

 

 

2. 컴포넌트의 특징

 

1. 필요한 곳에 가져와서 재사용이 가능하다.

⇒ export와 import 방식으로

 

2. 독립적으로 사용되어 유지보수에 용이하다.

⇒ 변경사항 발생시 일일이 찾아서 바꾸지 않아도 된다.

컴포넌트만 변경하면 전체를 수정할 수 있다.

 

3. 직관적이다.

⇒ 바닐라 자바스크립트의 경우 페이지가 어떻게 구성되어있는지 한눈에 파악이 어렵다.

하지만 컴포넌트로 구성할 경우 직관적으로 코드를 짤 수 있어 한 눈에 구조를 볼 수 있다.

 

4. 컴포넌트가 다른 컴포넌트를 포함할 수 있다. 

=> 부모 컴포넌트와 자식 컴포넌트가 존재한다.

 

 

 

3. 컴포넌트의 종류

컴포넌트의 종류로는 클래스 컴포넌트와 함수 컴포넌트가 있다.

 

 

클래스 컴포넌트 class component

이전에 주로 사용했던 클래스 컴포넌트는 state 및 lifecyle API를 통해 관련 기능 사용 가능하다.

반드시 render() 메소드가 필요하다. → JSX를 반환

 

 

함수 컴포넌트  function component

현재 주로 사용하는 컴포넌트는 함수 컴포넌트이다.

 

함수 컴포넌트는 함수와 작성법이 같기 때문에 이름의 첫글자로 구분한다.

소문자로 쓸경우 함수로 인식해서 HTML로 출력이 안된다.

그래서 함수 컴포넌트는 반드시 이름의 첫글자를 대문자로 작성한다.

 

함수 컴포넌트는 render() 메소드가 필요 없기 때문에 클래스 컴포넌트보다 훨씬 간단하다.

하지만 state 및 lifecyle 관리가 안된다는 단점 때문에 잘 사용되지 않았다.

그러나 Hook 의 등장으로 state를 사용할 수 있게 되어 현재는 함수 컴포넌트가 더 널리 사용되고 있다.

 

 

함수컴포넌트에서 클래스 컴포넌트로 변환하기

다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있다.

1. React.Component를 확장하는 동일한 이름의 ES6 class를 생성한다.
2. render()라고 불리는 빈 메서드를 추가한다.
3. 함수의 내용을 render() 메서드 안으로 옮긴다.
4. render() 내용 안에 있는 props를 this.props로 변경한다.
5. 남아있는 빈 함수 선언을 삭제한다.

 

 

---

 

 

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!