이롭게 현명하게
[React] 리액트 컴포넌트(Component) 란? / component의 개념 본문
목차
Component란?
Component 만들기
Component의 이름
[Component란?]
리액트는 Component 기반의 구조라는 특징을 가지고 있다.
리액트는 모든 페이지가 Component로 구성되어 있고 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성될 수 있다.
이러한 Component들을 마치 레고 블록을 조립하듯 끼워 맞춰 새로운 Component를 만들 수 있다.
Component : 입력(props)을 받아 출력(Element) 하는 역할
< Component 사용 시 장점>
- 코드 양을 줄일 수 있다.
- 개발 시간을 줄일 수 있다.
- 유지 보수 비용이 줄어든다.
Component를 사용해야 하는 이유
에어비앤비 홈페이지다.
에어비앤비의 Component는 다음과 같다.
파란색 Component, 빨간색 Component가 React Component라고 할 수 있다.
Component를 여러 번 반복적으로 사용해서 하나의 페이지를 구성하고 있다.
작은 Component들이 모여서 하나의 Component를 구성하고 이러한 Component가 모여 전체 페이지를 구성한다.
하나의 Component를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있다.
이러한 이유로 리액트를 Component기반이라고 부른다.
Component 를 하나의 작은 ui 덩어리로 보고, 메서드는 기능을 가진 함수라고 생각하면 이해하기 쉽다.
React Component는 개념적으로는 자바스크립트 함수와 비슷하다.
함수가 입력을 받아 출력을 리턴하는 것처럼 React Component도 입력을 받아 정해진 출력을 리턴한다.
그래서 Component를 하나의 함수라고 생각하면 좀 더 쉽게 개념을 이해할 수 있다.
하지만 React Component의 입력과 출력은 일반적인 자바스크립트 함수와는 조금 다르다.
React Component에서의 입력은 props며 출력은 React Element가 된다.
결국 React Component가 해주는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 React Element를 생성하여 리턴해 주는 것이다.
React Element는 리액트 앱을 구성하는 가장 작은 빌딩 블록들이다.
자바스크립트 객체 형태로 존재하며 화면에 보이는 것을 기술한다.
React Component를 만들고자 하는 대로 props, 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타날 Element를 만들어준다.
이것은 붕어빵을 굽는 과정과 비슷하다.
붕어빵 기계에 붕어 모양의 틀이 있고 반죽을 부어서 붕어빵을 만든다.
이것은 React Component로부터 Element가 만들어지는 과정과 비슷하다.
여기서 React Component는 붕어빵 틀을 의미한다.
객체지향의 개념에서 나오는 클래스와 인스턴스 개념과 비슷하다.
리액트의 Component는 객체지향까지는 아니지만 비슷한 개념을 가지고 있고 생각하면 이해하기 쉽다.
붕어빵 틀만 있다면 붕어빵을 계속해서 만들어 낼 수 있다.
props는 Component의 입력으로 들어간다.
prop는 property의 의미로 재산이라는 뜻도 있지만 속성, 특성이라는 뜻도 가지고 있다.
property를 줄여 prop이 되었고 여러 개라는 의미로 복수형 props가 되었다.
리액트에서 props는 리액트 컴포넌트의 속성이다.
- Component : 붕어빵 틀
- Element : 붕어빵
- props : 붕어빵 재료
같은 붕어빵이라도 넣는 재료에 따라 다른 맛이 난다.
이처럼 props는 같은 React Component에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때는 사용하는 컴포넌트의 속 재료이다.
https://devyihyun.tistory.com/171
[React] 리액트 props / props란?
목차 props란? props 특징 props 사용법 [props란?] props(properties) : 어떠한 값을 컴포넌트에게 전달해줘야할 때 props를 사용한다. Component에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 p
devyihyun.tistory.com
[Componenet 만들기]
React에서 Componenet는 Class Componenet와 Function Component로 나뉘다.
React 초기 버전에서는 Class Component를 주로 사용했다.
Class Component가 사용하기 불편하다는 의견이 많이 나와 Function Component가 나왔다.
Function Component를 개발하면서 나온 것이 Hook이다.
React Component에서는 Hook을 대부분 사용한다.
<Component를 만드는 방법>
- Function Component
- Class Component
<Function Component>
React Component는 pure 함수 같은 역할을 해야 한다.
즉, 리액트의 Component를 일종의 함수라고 생각한다.
function Welcome(props){
return <h1>안녕, {props.name}</h1>;
}이 함수는 하나의 props객체를 받아 인사말이 담긴 React element를 리턴하기 때문에 React Component라고 할 수 있다.
이런 것을 Function Component라고 한다.
Function Component는 코드가 간단하다는 장점을 가지고 있다.
<Class Component>
자바스크립트 ES6의 class라는 것을 사용해서 만들어진 형태의 Component다.
Class Component의 경우 Function Component에 비해 몇 가지 추가적인 기능을 가지고 있다.
class Welcome extends React.Component{
render(){
return <h1>안녕, {this.props.name}</h1>;
}
}이 함수는 Function Component를 Class Component로 만든 것이다.
<Function Component와의 차이점>
리액트의 모든 Class Component는 React.Component를 상속받아서 만든다.
상속 : 객체지향 프로그래밍에서 나오는 개념으로 한 클래스의 변수들과 함수를 상속받아서 새로운 자식클래스를 만드는 방법
React.Component라는 클래스를 상속받아 Welcome이라는 class를 만들었고
React.Component를 상속받았기 때문에 결과적으로 React component가 된다.
[Component의 이름]
Component의 이름은 항상 대문자로 시작해야 한다.
리액트는 소문자로 시작하는 Component를 DOM 태그로 인식하기 때문이다.
div, span과 같이 사용하는 것은 내장 컴포넌트라는 것을 뜻하며 div나 span과 같은 문자열 형태로 react.createElement에 전달된다.
하지만 대문자로 시작하는 foo와 같이 대문자로 시작하는 경우에는 react.createElement foo 형태로 컴파일되면 자바스크립트 파일 내에서 사용자가 정의했거나 import 한 Component를 가리킨다.
그렇기 때문에 Component의 이름은 항상 대문자로 시작해야 한다.
<HTML div 태그로 인식>
const element = <div />;DOM 태그를 사용하여 element를 만들었다. DOM 태그는 모두 소문자로 시작한다.
<Welcome이라는 React Component로 인식>
const element = <Welcome name="리액트" />;Welcome이라는 Component를 사용한 element이다.
Component 이름이 소문자로 시작했다면 리액트는 내부적으로 이것을 Component가 아닌 DOM 태그로 인식한다.
결과적으로 에러가 발생하거나 원하는 결과가 나오지 않을 수 있다.
그러므로 항상 컴포넌트의 이름은 대문자로 시작해야 한다.
소문자로 사용하려면 먼저 대문자로 시작하는 변수에 할당 뒤 변수를 사용한다.
잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊
댓글과 좋아요는 큰 힘이 됩니다!
[ 참고자료 ]
<a href="https://www.flaticon.com/kr/free-icons/" title="피자 아이콘"> 피자 아이콘 제작자: Freepik - Flaticon</a>
<a href="https://www.flaticon.com/kr/free-icons/" title="팥 아이콘">팥 아이콘 제작자: justicon - Flaticon</a>
<a href="https://www.flaticon.com/kr/free-icons/-" title="타이 야키 아이콘">타이 야키 아이콘 제작자: Freepik - Flaticon</a>
<a href="https://www.flaticon.com/kr/free-icons/-" title="슈퍼 볼 아이콘">슈퍼 볼 아이콘 제작자: amonrat rungreangfangsai - Flaticon</a>
<a href="https://www.flaticon.com/kr/free-icons/" title="크림 아이콘">크림 아이콘 제작자: Kanyanee Watanajitkasem - Flaticon</a>
'웹 개발 > React' 카테고리의 다른 글
| [React] 리액트 조건부 렌더링 (1) | 2023.12.21 |
|---|---|
| [React] 리액트 props / props란? (0) | 2023.12.20 |
| [React] 리액트 JSX (0) | 2023.12.19 |
| [React] 리액트 시작하기 / 리액트 설치 / 개발환경 (1) | 2023.12.15 |
| [React] 리액트란 (0) | 2023.12.11 |
