리액트의 엘리먼트, 컴포넌트, props

엘리먼트란?

리액트 앱의 가장 작은 빌딩 블록

자바스크립트 객체 형태로 존재합니다.

화면에 보이는 것을 기술하고 DOM 엘리먼트의 가상 표현입니다.

const element = <h1>Hello, world</h1>;

이 코드가 실행될 때, 대입 연산자의 오른쪽 부분은 리액트의 createElement() 함수를 사용하여 엘리먼트를 생성하게되고 리액트는 이 엘리먼트를 이용해서 실제 화면에서 보게 될 DOM 엘리먼트를 생성합니다.

엘리먼트의 특징

한 번 생성된 엘리먼트는 변하지 않습니다.

다르게 표현하면 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다는 말이 됩니다.

그렇다면 화면을 갱신시키고 싶다면?

이때 사용하는 것이 컴포넌트입니다.

컴포넌트란?

컴포넌트는 엘리먼트를 만드는 틀입니다.

화면 갱신 시에는 컴포넌트를 사용하여 새로운 엘리먼트를 생성 후 기존 엘리먼트와 바꿔치기합니다.

자바스크립트의 함수가 입력을 받아서 출력을 내뱉는 것처럼, 리액트 컴포넌트도 입력을 받아 정해진 출력을 내뱉습니다.

입력 → 자바스크립트 함수 → 출력

입력 → 리액트 컴포넌트 → 출력

다만, 자바스크립트의 함수에는 파라미터를 넣지만 리액트 컴포넌트에는 props가 들어갑니다.

props란?

props는 property의 줄임말입니다.

property는 '재산', '속성', '특성' 이라는 뜻을 가지고 있고 여기서는 속성이라는 뜻으로 사용됩니다.

리액트 컴포넌트라는 틀에 들어가는 재료라고 볼 수 있습니다.

Props의 특징

props의 중요한 특징은 읽기 전용이라는 것입니다.

다른 props의 값으로 엘리먼트를 생성하려면 새로운 값으로 새로 엘리먼트를 생성하면 됩니다.

리액트 컴포넌트에서는 props를 바꾸지 않는 것이 좋고, 같은 props에 대해서는 항상 같은 결과를 보여줘야 합니다.

컴포넌트의 종류

- 클래스 컴포넌트

자바스크립트의 ES6 클래스를 사용하여 만들어진 형태이며 항상 React.cComponent를 상속받습니다.

class Welcome extends React.Component {
	render() {
    	return <h1>안녕, <this.props.name}</h1>;
    }
}

- 함수 컴포넌트

클래스 컴포넌트를 개선하여 개발된 것입니다. Hook과 함께 사용합니다. 이는 나주에 다루겠습니다.

간결한 코드가 특징입니다.

function Welcome(props) {
	return <h1>안녕, {props.name}</h1>;
}

컴포넌트의 이름은 항상 대문자로 시작해야합니다. 소문자로 시작하면 Dom 태그와 구분하지 못합니다.

실습 코드

- 댓글 창처럼 보일 수 있도록 만든 Comment 컴포넌트

import React from "react"

const styles = {
    wrapper: {
        margin: 8,
        padding: 8,
        display: "flex",
        flexDirection: "row",
        border: "1px solid grey",
        borderRadius: 16,
    },
    imageContainer: {},
    image: {
        width: 50,
        height: 50,
        borderRadius: 25,
    },
    contentContainer: {
        marginLeft: 8,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
    },
    nameText: {},
    commentText: {}
}

function Comment(props) {
    return (
        <div style={styles.wrapper}>
            <div style={styles.imageContainer}>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" style={styles.image} />
            </div>
            <div style={styles.contentContainer}>
                <span style={styles.nameText}>{props.name}</span>
                <span style={styles.commentText}>{props.comment}</span>
            </div>
        </div>
    )
}

export default Comment;

- Comment 컴포넌트에 props를 넣어 댓글 리스트로 만드는 CommentList

import React from "react"
import Comment from "./Comment"

const comments = [
    {
        name: "서연",
        comment: "하이루"
    },
    {
        name: "이슬",
        comment: "밥주세용"
    },
    {
        name: "코코",
        comment: "냥"
    },
]

function CommentList(props) {
    return (
        <div>
            {comments.map((comment) => {
                return (
                    <Comment name={comment.name} comment={comment.comment}></Comment>
                );
            })}
        </div>
    );
}

export default CommentList;

- 최종적으로 <div id="root">에 엘리먼트 렌더링

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import CommentList from './chapter_05/CommentList';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
    	<CommentList/>
    </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

- 결과물

멋진 개발자 되기 프로젝트