[리액트(React)] Component, Props

// 컴포넌트, Component

- 사용자 인터페이스를 구성하는 독립적이고 재사용 가능한 부분

- 여러 컴포넌트들을 조립하여 UI를 구성한다.

- 컴포넌트명은 항상 대문자로 시작해야 한다.

- 컴포넌트 함수에서는 항상 렌더링 가능한 값이 반환되어야 한다.

- 컴포넌트 간의 연관성이 매우 높거나 반드시 함께 있어야만 작동하는 경우가 아니라면 별도의 컴포넌트는 별도의 파일에 저장하는 것이 좋다.

---

● 함수형 컴포넌트(Functional Components)

function Greeting(props) {
  return (
    <div>
      <h1>{props.name}입니다.</h1>
    </div>
  );
}

● 클래스형 컴포넌트(Class Components)

class Greeting extends React.Component {
  render() {
    return <h1>{this.props.name}입니다.</h1>;
  }
}

---

// Props

- 컴포넌트에 전달되는 data

- 상위 컴포넌트에서 하위 컴포넌트로 전달한다.

- Element가 생성된 후 값을 변경할 수 없다.
   > 값을 변경하려면 새로운 값을 컴포넌트에 전달한 후 Element를 새로 생성해야 한다.

- 컴포넌트와 함께 이름={값} 형태로 넘겨주고, 받을 때는 props.이름으로 받아서 사용한다.

function 보내는 컴포넌트() {
    return (
        <받는 컴포넌트 props명칭={넘길data}/>
    )
}

function 받는 컴포넌트(props) {
    return (
        <h1>{props.pops명칭}</h1>
    )
}

- props를 전달할 때 {....배열[인덱스]}를 이용하여 간단하게 선언할 수 있다. > 전개 구문(spread 구문 활용)

//기본
<CoreConcept title={CORE_CONCEPTS[1].title}
    description={CORE_CONCEPTS[1].description}
    image={CORE_CONCEPTS[1].image}
/>

//spread syntax 활용
<CoreConcept {...CORE_CONCEPTS[1]} />

- props를 받을 때 ({props1, props2, props3})으로 받아서 간단하게 사용할 수 있다. > 구조 분해 할당 활용

//기본
function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt="img" />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

//Destructuring Assignment 활용
function CoreConcept({ image, title, description }) {
  return (
    <li>
      <img src={image} alt="img" />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

- props.chilrdren으로 innerText를 받을 수 있다.

export default function TabButton(props) {
  return (
    <li>
      <button>{props.children}</button>
    </li>
  );
}

function App() {
  return (
      <TabButton>Hi</TabButton>
  );
}

export default App;

---

import React from 'react';

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;

 

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

const comments = [
  {
    name: 'Hana',
    comment: '나무의 하루',
  },
  {
    name: 'sorrel012',
    comment: '안녕하세요',
  },
];

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

export default CommentList;