React ) component에 props활용하여 만들어보기

component

- 컴포넌트는 props를 받아서 상태값(state)에 따라 DOM을 호출한다.

- 컴포넌트는 함수형과 클래스형으로 나뉜다. 둘의 차이점은 함수형 컴포넌트에서는 상태값과 LifeCycle을 가질 수 있는지 없는지의 여부다.

- 리액트 버전 16.8 버전부터 Hook이 등장하면서 함수형 컴포넌트에서도 상태값과 LifeCycle을 사용할 수 있게 되었다.

 

함수형 컴포넌트

import React from 'react';

function FunctionComponent() {
  return(
    <div>Function Component입니다.</div>
  );
}

export default FunctionComponent;

 

클래스형 컴포넌트

import React, {Component} from 'react';

class ClassComponent extends Component {
  render() {
    return(
      <h1>Class Component입니다.</h1>
    );
  }
}

export default ClassComponent;

 

함수형 컴포넌트를 활용하여 props값 받기 실습

comment 함수 컴포넌트를 생성하여 style을 주고, span태그 안에 props 값을 받게 한다. 

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://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;

CommentList 함수 컴포넌트를 생성하여 comments 변수 안에 props 값을 입력한다. 

Comment 컴포넌트를 호출하여 map 함수를 이용하여 value값을 props를 반복되게 넣도록 한다.

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

const comments = [
    {
        name: "lettuce",
        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;

 

index파일에서 commentList 컴포넌트를 호출하여 랜더링하게 넣어준다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import CommentList from './chapter05/CommentList';

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

 

>>> 결과

 

 

출처 : 인프런 강의 - 처음만난 리액트(React)