5강. Components and Props

Components와 Props의 정의

Components : 속성들을 입력으로 받아서 element 생성, 리액트를 구성하는 가장 작은 빌딩블록, JS객체형태, 화면에 보이는 것들 기술, 붕어빵 틀

Props : Property(속성)의 줄임말, components의 속성, 붕어빵의 재료, 컴포넌트에 전달할 다양한 정보를 담고있는 자바스크립트 객체

 

Props의 특징 및 사용법

Props의 특징 : Read-only(값 변경x), 값을 변경하기 위해서는 새로운 값을 컴포넌트에 전달하여 새로운 Element 생성, 모든 리액트 컴포넌트는 Props를 직접 바꿀수 없고 같은 Props에 대해서는 항상 같은 결과를 보여줄것

 

Props 사용법

//jsx 사용
function App(props){
  return (
    <Profile	//component
      name="소플"	//props
      introduction="안녕하세요."	//props
      viewCount={1500}	//props, JS코드 
    />
  );
}

 

Component 만들기 및 렌더링

Function Component : 리액트의 컴포넌트를 함수로 사용

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

 

Class Component : ES6의 class기반

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

 

Component이름은 항상 대문자로 시작(소문자로 시작할 경우 DOM으로 인식)

//HTML div로 인식
const element = <div/>;

//Welcome이라는 리액트 Component로 인식
const element = <Welcome name="인제"/>

 

Component 렌더링

//DOM 태그를 사용한 element
const element = <div/>;

//사용자가 정의한 Component를 사용한 element
const element = <Welcome name="인제"/>

//렌더링
function Welcome(props){
  return <h1>안녕, {props.name}</h1>;
}
const element = <Welcome name="인제"/>
ReactDOM.render(
  element,
  document.getElementById('root')
);

 

Component 합성과 추출

Component 합성 : Component내에 또 다른 Component를 사용할 수 있음, 복잡한 화면을 여러개의 Component로 나눠서 구현 가능

function Welcome(props){
  return <h1>Hello, {props.name}</h1>
}

function App(props){
  return(
    <div>
      <Welcome name="Mike"/>	//컴포넌트 합성
      <Welcome name="Steve"/>
      <Welcome name="JAne"/>
    </div>
  )
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

 

Component 추출 : 큰 컴포넌트를 나눠서 새로운 컴포넌트 생성, 재사용성 ↑(기능, 목적 명확, props 단순), 개발속도 ↑

function Comment(props){
  return(
    <div className = "comment">
      <div className = "user-info">
        <img className = "avatar"	//1. Avatar 추출
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="user-info-name">
          {props.author.name}
        </div>
      </div>
      <div className="comment-text">
        {props.text}
      </div>
      <div className="comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

//1. Avatar 추출
function Avatar(props){
  return(
    <img className="avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

//2. avatar 컴포넌트 반영
function Comment(props){
  return(
    <div className = "comment">
      <div className = "user-info">
        <Avatar user={props.author} /> //avatar 반영        
        <div className="user-info-name">
          {props.author.name}
       </div>
      </div>
      <div className="comment-text">
        {props.text}
      </div>
      <div className="comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

//3. UserInfo 추출
function UserInfo(props){
  return(
    <div className = "user-info">
      <Avatar user={props.author} /> //avatar 반영        
        <div className="user-info-name">
          {props.author.name}
        </div>
    </div>
  );
}

//4. UserInfo 컴포넌트 반영
function Comment(props){
  return(
    <div className = "comment">
      <UserInfo user={props.author} > //UserInfo 반영        
      <div className="comment-text">
        {props.text}
      </div>
      <div className="comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

 

(실습) 댓글 컴포넌트 만들기

//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="http://upload.wikimedia.org/wikipedia/commons/8/89/Protrait_Placeholder.png"
                    alt="프로필"
                    style={styles.image}
                />
            </div>

            <div style={styles.contentContainer}>
                {/* <span style={styles.nameText}>이인제</span>
                <span style={styles.commentText}>제가 만든 첫 컴포넌트입니다.</span> */}
                <span style={styles.nameText}>{props.name}</span>
                <span style={styles.commentText}>{props.comment}</span>
            </div>
        </div>
    )
}
export default Comment;


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

//comments의 데이터
const comments = [
    {
        name: "이인제",
        comment: "안녕하세요, 소플입니다.",
    },
    {
        name: "유재석",
        comment: "안녕하세요, 유재석입니다.",
    },
    {
        name: "강민경",
        comment: "안녕하세요, 강민경입니다.",
    },
    {
        name: "의자",
        comment: "안녕하세요, 의자입니다.",
    },
];

function CommentList(props) {
    return(
        <div>
            {/* props추가하기 */}
            {/* 
            //Comment 컴포넌트 반영
            <Comment name={"이인제"} comment={"안녕하세요, 소플입니다."}/>
            <Comment name={"유재석"} comment={"리액트리액트"}/> 
            */}

            //Comment 데이터를 별도의 객체로 분리하여 동적으로 반영
            {comments.map((comment) => {
                return (
                    <Comment name={comment.name} comment={comment.comment} />
                    
                );
            })}
        </div>
    )
}
export default CommentList;

root.render(
  <React.StrictMode>
    <CommentList />	//Comment컴포넌트를 반영한 CommentList 컴포넌트
  </React.StrictMode>
)