React : 컴포넌트(Component)

컴포넌트(Component)

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트(Component)' 라는 단위를 사용한다.

컴포넌트는 리액트의 핵심 단위로, 독립적이고 재사용 가능한 UI 조각이다.

즉, 리액트에서 애플리케이션을 이루는 가장 작은 조각이라고 할 수 있겠다.

리액트에서는 이러한 작고 독립된 코드의 파편을들을 조합하여 복잡한 UI를 구축할 수 있다.

리액트 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 2가지로 나뉠 수 있으며,

현재는 Hook의 등장으로 클래스형 컴포넌트보다 함수형 컴포넌트의 사용 빈도가 월등히 많다.

✨ 하지만 하이테크한 로직이 있을 경우 클래스형 컴포넌트를 사용해주는 편이 더 좋아서 클래스형 컴포넌트를 잊어서는 안되겠다.

컴포넌트의 구성 요소

1. props
- props는 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터이다.

- props의 값은 자식 컴포넌트에서 수정할 수 없다는 특징을 가지고 있다.

2. state
- 컴포넌트의 내부에서 상태를 저장하고 수정 가능한 데이터이다.

- 해당 컴포넌트에서만 사용할 수 있는 지역 변수 개념의 데이터이다.

 

3. context 
- 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터이다.

---

클래스 컴포넌트(Class Component)

클래스 컴포넌트는 자바스크립트의 클래스 기반 컴포넌트이다.

클래스 컴포넌트의 경우 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다.

함수형 컴포넌트보다 사용 빈도가 떨어지지만 하이테크한 로직이 있을 경우 함수형 컴포넌트로 로직 작업을 처리하기보다 클래스형 컴포넌트를 활용하는 편이 더 나으니 클래스형 컴포넌트를 잊지 말아야 한다.

생성 방법은 class로 정의하고 render() 메소드에서 jsx 코드를 반환한다.

클래스 컴포넌트 특징

1. class 키워드로 클래스 컴포넌트 생성
2. React.Component 상속

3. render () 메서드 필수로 사용

4. this 키워드 사용하기 :

state, props, refs,컴포넌트 메서드, 생명주기 메서드를 사용할 때 this 로 프로퍼티를 참조하여 사용한다. 

클래스 컴포넌트 생성

import { Component } from "react";

class ClassComponent extends Component { // class 키워드로 클래스 컴포넌트 생성, React.Component 상속
    render() { // render() 메서드 필수 사용
        return (
            <h1>Hello, {this.props.name}!</h1> // this 키워드 사용 필수
        );
    }
}

export default ClassComponent;

---

함수형 컴포넌트(Function Component)

함수형 컴포넌트는 자바스크립트의 함수(function) 기반 컴포넌트이다.

가장 간단하게 컴포넌트를 정의하는 방법이다. 클래스형 컴포넌트보다 주로 함수형 컴포넌트를 사용한다.

생성 방법은 자바스크립트의 함수를 선언하듯이 function으로 정의하고 return문에 jsx코드를 반환하면 된다.

함수형 컴포넌트를 사용하는 이유 

1) Hook

과거에는 함수형 컴포넌트가 state, 라이프사이클을 지원하지 않았기 때문에 클래스형 컴포넌트를 많이 사용했지만, React v16 이후부터 Hook를 통한 state 및 LifeCycle 관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장한다. Hook의 useState를 사용해 state 를 관리할 수 있고, useEffect 를 사용해 LifeCycle 을 관리할 수 있다.

2) 직관적인 코드   

자바스크립트의 함수(function) 선언, 화살표 함수를 그대로 사용해 컴포넌트를 사용 가능하기 때문에 개발자에게 직관적이다. 

3) 메모리 자원 효율 

클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용한다. 

함수형 컴포넌트 생성

function FunctionComponent(props) {
    return (
        <h1>Hello, {props.name}!</h1>
    );
}

export default FunctionComponent;

함수형 컴포넌트 생성 (화살표 문법)

const FunctionComponent = (props) => {
    return (
        <h1>Hello, {props.name}</h1>
    );
}

export default FunctionComponent;

컴포넌트 사용 예제

App.js (컴포넌트 사용 X)

function App() {
... 생략
	return (
		<div className="App">
			<div className="pink">
				<h4>{name}</h4>
			</div>
			<div  className="list">
				<h4>{title[0]}&nbsp; <span onClick={() => {likeCount()}}>👍</span> {count}</h4>{/* 좋아요 숫자는 자주 변화하는 값이라 state로 만드는 것이 좋겠다. */}
				<p>글쓴이 : {name}</p>
			</div>
			<div className="details">
				<h4>제목</h4>
				<p>날짜</p>
				<p>상세내용</p>
			</div>
			<div  className="list">
				<h4>{title[1]}&nbsp; <span onClick={() => {likeCount()}}>👍</span> {count}</h4>{/* 좋아요 숫자는 자주 변화하는 값이라 state로 만드는 것이 좋겠다. */}
				<p>글쓴이 : {name}</p>
			</div>
			<div className="details">
				<h4>제목</h4>
				<p>날짜</p>
				<p>상세내용</p>
			</div>
			<div  className="list">
				<h4>{title[2]}&nbsp; <span onClick={() => {likeCount()}}>👍</span> {count}</h4>{/* 좋아요 숫자는 자주 변화하는 값이라 state로 만드는 것이 좋겠다. */}
				<p>글쓴이 : {name}</p>
			</div>
			<div className="details">
				<h4>제목</h4>
				<p>날짜</p>
				<p>상세내용</p>
			</div>
		</div>
	);
}

export default App;

 

만약에 위 코드처럼 html 코드가 반복된다면 코드가 지저분해지고 알아보기 힘들 것이다.
리액트에서는 이렇게 반복되거나 복잡한 html코드를을 컴포넌트로 각 기능별로 분리시킬 수 있다.
컴포넌트를 각각 만들어 기능별로 나누어 활용해보자. 간단히 상세 내용 기능을 분리하여 보겠다.

Detail.js

const Details = () => {
    return (
		<div className="details">
			<h4>제목</h4>
			<p>날짜</p>
			<p>상세내용</p>
		</div>
    ); 
}

export default Details;

위 처럼 상세내용 기능을 별도의 컴포넌트로 나누어준다.

App.js

function App() {
... 생략
	return (
		<div>
			<div className="pink">
				<h4>{name}</h4>
			</div>
			<div className="list">
				<details>
					<summary>{title[0]} &nbsp;
					<span onClick={() => {likeCount()}}>👍</span> {count}
					<p>글쓴이 : {name}</p>
					</summary>
					<Details />
				</details>
			</div>
            ... 생략
		</div>
	);
}

export default App;

컴포넌트를 생성 후 내가 원하는 위치에 태그 형태로 넣어주어 사용하면 된다.

<detail> 태그를 사용해서 Accodion 느낌을 내봤다.

정리

✨ 정리
리액트에서는 컴포넌트를 통해 각 기능별로 나누어 재사용성을 늘리고 코드를 좀 더 간략하게 보이게 한다.

클래스형 컴포넌트와 함수형 컴포넌트가 있다. Hook의 등장으로 함수형 컴포넌트의 사용 빈도가 많지만 함수형 컴포넌트에서 처리하지 못하는 작업을 클래스형 컴포넌트에서 처리할 수 있기에 클래스형 컴포넌트도 공부를 해야한다.

🚨 컴포넌트를 생성시 주의할 사항으로는 반드시 컴포넌트명의 시작은 대문자로 만들어주는 것이다!

💡 컴포넌트를 언제 쓰면 좋을까?
반복적인 UI, 자주 변경되는 UI에 사용하면 좋겠다.
많은 UI가 필요할 때마다 굳이 많은 html 코드들을 반복적으로 적기보다는 컴포넌트로 나누어
메인이 되는 페이지에서 한줄로 구현해 주면 되겠다. 코드가 더 간략해진다.

Reference

🙏 갓대희's 작은공간 : [React] 4. React 컴포넌트(1) - 컴포넌트란?

🙏 코딩젤리 : [React] React 컴포넌트란? React 앱을 구성하는 요소