컴포넌트는 쉽게 말해 UI를 구성하는 UI 요소를 의미한다.
리액트 홈페이지의 공식 문서에 따르면 컴포넌트를 사용하면 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다고 설명한다. '재사용 가능'과 '개별적으로 살표 볼 수 있음'이 핵심이라고 볼 수 있을 것 같다.
컴포넌트는 간단히 이런식으로 사용할 수 있다.
컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. 함수 안에 UI를 제작하여 컴포넌트를 사용할 부분에 HTML 태그를 사용하는 것 처럼 <함수명 /> 을 써주면 되는 것! 이로써 HTML을 줄여 쓸 수 있는 것이다.
이렇게 함수로 작성한 컴포넌트를 함수 컴포넌트라고 호칭하고 ES6의 class를 사용하여 정의할 수도 있는데 클래스 컴포넌트라고 호칭한다. (클래스 컴포넌트는 밑에서 다시 해보겠음)
컴포넌트 안에서는 자바스크립트에서 A 함수 안에 선언한 변수를 B 함수에서 사용할 수 없는 것과 같이 App() 안에 선언해준 state를 사용할 수 없다. 그래서 아무리 찍먹 하고 있다지만 state를 재선언 해주는 것은 너무 허접 그 자체인 것 같아 공식문서를 참고해 작성한 코드는 ~~
컴포넌트를 호출한 부분에 title 값을 선언 해준다. 그리고 컴포넌트에서 props 객체 인자를 받는데 여기서 props는 { title : titles[2] } 가 되는 것이다.
따라서 위와 같은 화면이 완성 된다!
title 값만 바꿔주어 위처럼 여러개 갖다 쓸 수 있는 ~
⚒️ 함수 컴포넌트를 클래스 컴포넌트로 변환하기
함수를 클래스로 변환하는 방법은 간단하다.
- React.Component를 확장하는 ES6 class를 생성한다.
- render() 메서드를 추가한다. (*클래스 컴포넌트에서 반드시 정의 되어야 하는 메서드!)
- 함수의 내용을 render() 메서드 안 return() 에 작성한다.
- props를 this.props로 변경한다.
컴포넌트를 호출한 부분에서의 title 선언은 그대로 유지 시켜두면 정상적으로 작동하게 된다.
과거에는 함수 컴포넌트에서 state와 LifeCycle을 지원하지 않았기 때문에 클래스형 컴포넌트를 많이 사용했지만 React v16 이후부터 Hooks를 통한 state 및 LifeCycle 관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장한다고 한다. (출처) 실제로도 많은 개발자들이 함수 컴포넌트로 개발 하고 있다고!
간단한 예시를 통해 컴포넌트를 이해해보았다.
컴포넌트를 만들 때 주의점(관습)이 존재하는데
- 이름은 대문자로 시작해야하고
- return 소괄호 안에 html 태그를 나열하는데 꼭 태그 하나로 크게 묶어줘야 하는데
- 의미없는 <div>가 싫다면 <> </> 와 같이 Fragment 묶기 문법을 사용하면 된다.
1번의 이유는 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문이다.
리액트 프로젝트를 생성하면 보게되는 funtion App() { } 도 하나의 컴포넌트라고 볼 수 있다고 한당
컴포넌트 사용의 장점은 무엇일까?
- HTML을 한 단어로 축약하여 사용할 수 있다.
- 컴포넌트를 만들면 HTML을 덩어리 채 관리 할 수 있기 때문에 관리가 용이하다.
그치만 컴포넌트를 많이 만들었을 때의 단점으로는 state 사용이 복잡해져서 컴포넌트간 state를 전해줘야한다. 위에서 해본 것 처럼 props 문법을 이용해야만 하는!
그렇담 컴포넌트를 만드는 기준? 어떨 때, 어떤 걸 만드는게 좋을까
- 반복 출현하는 HTML 덩어리들을 컴포넌트로 만들어주면 HTML 코드를 축약할 수 있을 것이다.
- 사이트에서 자주 변경되는, 자주 재렌더링 되는 HTML UI들을 컴포넌트로 만들어주면 성능을 높힐 수 있다.
찍먹은 여기까지만 하고.. 앞으로 리액트를 이용해 개발 해보며 이론 지식을 쌓아가야겠다!!
코딩애플 무료 리액트 강의를 보며 정리한 내용입니다.
댓글