[처음 만난 리액트] section 5. Components and Props

 

1. Components와 Props의 정의

📌 Components

리액트는 컴포넌트 기반, 모든 페이지가 컴포넌트로 구성

작은 컴포넌트들을 모아서 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여서 전체 페이지를 구성

하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드 양을 줄이고 개발 시간 단축과 유지보수가 용이

 

🔎 component의 역할

어떠한 속성들을 입력(Props) 받아서 리액트 element를 생성하여 리턴

 

📌 Props(Property)

리액트 컴포넌트의 입력, 컴포넌트의 속성을 의미

props는 글자나 색깔 등의 속성 등 컴포넌트에게 전달할 다양한 정보를 담고 있는 자바스크립트 객체

 

 

2. Props의 특징 및 사용법

📌 Props의 특징

🔎 Read-only

값을 변경할 수 없음

 

🔎  Pure 함수

모든 리액트 컴포넌트는 Props에 관해 Pure 함수 역할을 해야함

→ props는 변경할 수 없고 컴포넌트는 같은 props에 대해선 항상 같은 결과를 리턴

 

• 자바스크립트 함수 특징 Pure vs Impure

pure

입력값을 변경하지 않으며 같은 입력값에 대해서는 항상 같은 출력값을 리턴

function sum(a, b) {
	return a + b;
}

 

impure

입력값을 변경

function withdraw(account, amount) {
	account.total -= amount;
}

 

📌 Props 사용법

🔎 JSX를 사용하는 경우

key=value 형태로 사용

{ }를 사용할 경우 자바스크립트 사용

function App(props) {
  return(
    <Profile
      name = "Taexee"
      viewCount={1500}
    />
  );
}

Profile 컴포넌트에 props로 name과 viewCount가 있고

 

props는 아래와 같은 자바스크립트 객체로 전달됨

{
  name: "Taexee",
  viewCount: 1500
}

 

props 값으로 컴포넌트도 넣을 수 있음

function App(props) {
  return(
    <Layout
      width={2560}
      header={
        <Header title="Taexee.blog" />
      }
    />
  );
}

 

 

🔎 React.createElement 사용하는 경우

React.createElement(
  Profile,
  {
    name: "taexee",
    viewCount: 1500
  },
  null
);

 

 

3. Component 만들기 및 렌더링

📌 Component 만들기

🔎 컴포넌트 종류

• class component : 리액트 초기 버전에서 주로 사용, React.Component를 상속받음

• function component : 현재 주로 사용

 

🔎 컴포넌트 명명법

컴포넌트의 이름은 항상 대문자로 시작

소문자로 시작하는 경우 컴포넌트를 DOM태그로 인식

 

📌 컴포넌트 렌더링

컴포넌트를 렌더링하기 위해선 엘리먼트를 생성 후 렌더링

 

4. Component 합성과 추출

📌 Component 합성

여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것

복잡한 화면을 여러 개의 컴포넌트로 나눠서 구현

 

🔎 Component 합성 예제

Welcome 컴포넌트의 props 값을 다르게 해서 여러 번 사용

App 컴포넌트는 Welcome 컴포넌트 3개를 가지고 있는 컴포넌트가 됨

 

📌 Component 추출

복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나누는 것

재사용성이 좋아짐 → 컴포넌트는 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고 props도 단순해지기 때문에 

재사용성이 좋아짐에 따라 개발 속도도 빨라짐 → 재사용 가능한 컴포넌트를 많이 갖고 있을수록 개발이 빨라짐

추출 기준은 없지만 기능단위로 구분하고 재사용 기준으로 추출하는 것이 좋음

 

🔎 Component 추출 예제

UserInfo, Avatar 추출

 

5. 댓글 컴포넌트 만들기

📌 Component 만들기

📃 Comment.jsx

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,
    heigh: 50,
    borderRadius: 25,
  },
  contentContainer: {
    marginLeft: 8,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
  },
  nameText: {
    color: "black",
    fontSize: 16,
    fontWeight: "bold",
  },
  commentText: {
    color: "black",
    fontSize: 16,
  },
}

function Comment(props) {
  return (
    <div style={styles.wrapper}>
      <div style={styles.imageContainer}>
        <img 
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/200px-React-icon.svg.png"
          style={styles.image}
        />
      </div>

      <div style={styles.contentContainer}>
        <span style={styles.nameText}>Taexee</span>
        <span style={styles.commentText}>제가 만든 첫 컴포넌트입니다.</span>
      </div>
    </div>
  );
}

export default Comment;

 

📃 CommentList.jsx

import React from 'react';
import Comment from './Comment';

function CommentList(props) {
  return (
    <div>
      <Comment />
    </div>
  );
}

export default CommentList;

 

📃 index.js

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

reportWebVitals();

 

📊 결과

 

📌 Props 추가하기

📃 Comment.jsx 수정

이름과 댓글 props로 변경

function Comment(props) {
  return (
    <div style={styles.wrapper}>
      <div style={styles.imageContainer}>
        <img 
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/200px-React-icon.svg.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>
  );
}

 

📃 CommentList.jsx 수정

props 추가

function CommentList(props) {
  return (
    <div>
      <Comment name={"Taexee"} comment={"안녕하세요"}/>
    </div>
  );
}

 

📊 결과

 

📌 Comment 데이터를 별도의 객체로 분리하기

📃 CommentList.jsx 수정

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} />
        );
      })}
    </div>
  );
}

export default CommentList;

 

📊 결과