💗 Component의 종류

✍ Function Component

코드가 간단한 것이 특징, Component를 함수 취급

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

✍ Class Component

React.Component를 상속받아서 Component를 만드는 것

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

💗 Component의 이름

항상 대문자로 시작해야 한다!
소문자로 시작하면 domc 태그로 인식하기 때문

const element = <div/> 

💗 Component 합성과 호출

복잡한 화면을 여러 개의 컴포넌트로 나누어서 화면 구현 가능

✍ Component 합성

하위 컴포넌트를 상위 컴포넌트가 포함하여 작성되는 것

✍ Component 추출

큰 컴포넌트에서 일부를 추출하여, 작은 컴포넌트를 작성하여 재사용성을 높임

💗 코드 예시

//Comment(하위 컴포넌트)

const styles= {
  wrapper: {
    margin:8,
    padding:8,
    display:"flex",
    flexDirection: "row",
    border: "1px solid gray",
    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://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 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}/>
          );
      })}
      </div>
    );
}

export defualt CommentList;