Components

🍰 Components

🎂 UI를 구성하는 독립적인 구성 요소, 모듈 🍰

컴포넌트는 독립적이고 재사용이 가능한 코드 조각으로 구성 되어 있다. 자바스크립트 함수와 동일한 목적을 수행하지만 독립적으로 작동하고 HTML을 반환한다. 데이터(props)를 받아 뷰(state) 상태에 따라 DOM Node를 출력한다.

컴포넌트에서 가장 중요한 속성은 재사용성!

재사용이 필요한 이유

1. 구현 시 시간과 리소스를 절약 할 수 있다
같은 코드를 두 번 치지 않음으로 시간/리소스 절약
2. 중복을 줄인다
코드 업데이트 시 해당 코드를 사용하는 곳에서 모든 업데이트가 적용된다(일관성)
-> 유지보수를 쉽게!

컴포넌트 작성

컴포넌트 작성 방법에는 클래스형 컴포넌트와 함수형 컴포넌트 두 가지 방법이 있다.

두 컴포넌트의 역할은 동일하지만, 과거에는 상태관리/라이프 사이클 관리를 이유로 대부분 클래스 컴포넌트를 사용했지만 현재는 React Hook의 지원으로 공식 문서에서도 함수형 컴포넌트와 훅(Hook)을 함께 사용할 것을 권장하고 있다.

하지만 과거 클래스형 컴포넌트로 이루어진 프로젝트를 이해하고 유지보수 하기 위해서는 알아두어야 한다.

---

🍰 함수형 컴포넌트와 클래스형 컴포넌트

함수형 컴포넌트

function 으로 정의하고 return 문에 jsx 코드를 반환

• state, lifeCycle 기능 사용 불가능 (->hook으로 해결)
• 메모리 자원을 클래스 컴포넌트보다 덜 사용한다
• 선언이 쉽고 편하다
  
  

클래스형 컴포넌트

Component 클래스를 상속, render()메소드 사용

• state, lifeCycle 기능 사용 가능
• 메모리 자원을 클래스 컴포넌트보다 좀 더 사용한다
• 임의 메서드 정의 가능
  
  

차이점

state, 컴포넌트 내부에서 바뀔 수 있는 값

state) 클래스형

• constructor 안에서 this.state 초기 값 설정
• constructor 없이 바로 초기값 설정도 가능
• 객체 형식의 state
• this.setState 함수로 state 값 변경

state) 함수형

• useState 함수 사용
• useState 함수를 호출하면 배열이 반환되는데 첫 번째 값이 현재 상태
• 두 번째 값은 상태를 바꾸어 주는 함수

props, 읽기 전용으로 컴포넌트 속성을 설정할 때 사용

props) 클래스형

• this.props를 통해 값을 불러옴
• 부모 객체의 키 값, 자식 props 활용

props) 함수형

• props를 불러올 필요없이 매개 변수로 바로 호출 가능

LifeCycle API, 컴포넌트가 DOM 위에 생성되기 전 후 및 상태 업데이트 하기 전 후로 실행되는 메소드

LifeCycle) 함수형

• useEffect()를 이용해 함수형 컴포넌트의 LifeCycle 메서드를 대체 할 수 있다.

이벤트 핸들링

이벤트 핸들링) 클래스형

• 함수 선언 시 화살표 함수로 바로 선언 가능
• 요소에 적용 시 this를 붙인다

이벤트 핸들링) 함수형

• const 키워드 + 함수 형태로 선언
• 요소에 적용하기 위해 this가 필요 없음

참고

https://www.w3schools.com/react/react_components.asp

https://born-dev.tistory.com/27

https://brunch.co.kr/@blckschrl/66

https://velog.io/@sdc337dc/0.클래스형-컴포넌트

https://tecoble.techcourse.co.kr/post/2021-11-01-component-dependency/