[React] 6. Components and Props

6. Components and Props

Components

• A, B는 리액트 컴포넌트이다.

• 이러한 컴포넌트를 여러번 사용해서 하나의 페이지를 구성하고 있다.
• 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여 전체 페이지를 구성한다.
• 리액트 컴포넌트를 하나의 함수라고 생각하면 쉽다. 하지만 자바스크립트의 함수와는 약간 다르다.

  

리액트컴포넌트는 속성Props를 넣으면 엘리먼트를 리턴한다.

객체지향의 의미와 비슷하다.

Props

• prop이 여러 개인 것.
• prop : property, 속성 (엘리먼트를 만들기 위한 재료)
  • 컴포넌트의 속성
  • 자바스크립트 객체

    

컴포넌트 : props를 받아 엘리먼트를 리턴하는 함수
엘리먼트 : 보이는 부분
props : 컴포넌트에 전달할 정보를 담고 있는 자바스크립트 객체

 

 

Props의 특징

1. Read-Only : 값을 변경할 수 없다.
   • 엘리먼트 생성 도중 바뀌어버리면 안되기 때문이다.

javascript 함수의 파라미터 = 리액트 컴포넌트의 프랍스

1. 리액트컴포넌트 프랍스는 바꿀 수 없고, 같은 프랍스에 대해 같은 결과가 나와야 한다.
2. 자바스크립트 객체

 

Component 만들기

• 클래스 컴포넌트
• 함수 컴포넌트

리액트컴포넌트는 클래스 컴포넌트, 함수 컴포넌트 2가지로 나뉜다.

리액트 초기버전은 클래스 컴포넌트를 주로 사용하였으나 사용하기 불편했다.

때문에 함수컴포넌트를 개선해서 사용하였고 이후에는 ‘Hook’을 사용하게 되었다.

현재는 대부분 Hook을 사용하고 있다.

Function Component

Class Component

 

 

Component의 이름

1. 컴포넌트의 이름은 항상 대문자로 시작해야 한다. (사용자가 정의한 컴포넌트라는 의미)

• 리액트는 소문자로 시작하는 컴포넌트는 dom태그로 인식하기 때문이다.
  • div, span는 내장 컴포넌트. ⇒ React.createElement() 에 전달됨.
  • 대문자로 시작하는 컴포넌트 ⇒ React.createElementFoo 형태로 컴파일됨. ⇒ 자바스크립트 파일 내에서 사용자가 정의했거나 import한 컴포넌트를 가리킨다.

Component 렌더링

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

const root = ReactDOM.createRoot(document.getElementById());
const element = <Welcome name="수나" />;
root.render(element);

Component 합성

 

 

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,
    height: 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://cdn-icons-png.flaticon.com/512/6522/6522516.png" style={styles.image} />
      </div>

      <div styles={styles.contentContainer}>
        <span style={styles.nameText}>{props.name}</span>
        <br />
        <span style={styles.commentText}> {props.content}</span>
      </div>
    </div>
  );
}

export default Comment;

 

CommentList.jsx

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

const comments = [
  {
    name: "수나강",
    content: "안녕하세용!",
  },
  {
    name: "강수나강",
    content: "반갑습니데잉~",
  },
];

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

export default CommentList;

index.js

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

//import Library from "./chapter_03/Library";
import Clock from "./chapter_04/Clock";
import CommentList from "./chapter_05/CommentList";

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

reportWebVitals();

 

결과