5. 컴포넌트(Component)

23.03.10 ver

1. 참고 도서 & 자료

• 리액트를 다루는 기술(초판 9쇄 22.06.30) http://aladin.kr/p/NMeIK

리액트를 다루는 기술

---

2. 컴포넌트의 기능

단순한 템플릿 이상이다.

데이터가 주어졌을 때 이에 맞추어 UI를 만들어 준다.

라이플사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있다.

임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다.

 

컴포넌트를 선언하는 방식

리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있다.

 

1) 함수 컴포넌트

 

2) 클래스형 컴포넌트

 

둘의 차이점

클래스형 컴포넌트

state 기능 및 라이프사이클 기능을 사용할 수 있다.

임의 메서드를 정의할 수 있다.

render 함수가 꼭 있어야 한다.

그 안에서 보여주어야 할 JSX를 반환해야 한다.

 

함수 컴포넌트의 장점

클래스형 컴포넌트보다 선언하기 훨씬 편하다.

메모리 자원을 덜 사용한다.

프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.

 

함수 컴포넌트의 단점

state와 라이플사이클 API의 사용이 불가능하다. 그러나 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다. 이로 인해, 클래스형 컴퍼논드와 똑같이 사용할 수 있는 것은 아니지만, 조금 다른 방식으로 비슷한 작업을 할 수 있게 됐다.

 

props

props는 proprties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.

해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.