component

컴포넌트

• 컴포는트는 element를 생성하는 함수이다. 이는 붕어빵에서 틀 하 현타오네
• props는 컴포넌트 객체에 주입되는 정보이다. 쉽게 생각하면 그냥 자바 클래스랑 매우 비슷한거임 근데 그 클래스 만들어질때 전해지는 파라미터 같은거지
• props는 Read only이다.
• props를 변경하고 싶으면 새로운 element를 생성해야한다.
• 그말은 즉 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고 같은 props에 대해서는 항상 같은 결과를 보여주어야 한다는 것이다.

<Profile
    name={"소플"}
    introduction ="안녕"
    viewCount={1500}
    />

위에서 보는 코드가 props에 값을 전달하는 코드인테 component를 사용할 때 같이 전달하는 것을 알 수 있다 값을 전달할때는 문자열을 제외한 모든 자료형에는 {} 중괄호를 사용한다 또한 이를 문자열에서 중괄호를 사용해도 상관은 없다.

react는 초기에는 클래스형 컴포넌트를 사용했지만 지금은 함수형 컴포넌트를 사용한다.

또한 위의 함수 컴포넌트는 항상 대문자로 시작해야한다.

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

컴포넌트 합성

여러개의 컴포넌트르 합쳐서 새로운 컴포넌트를 만든다

컴포넌트 해체

하나의 큰 컴포넌트르 여러개의 컴포넌트로 만들 수 있다.

import React from "react";
import Comment from "./Comment"
function CommentList(props){
    return(
        <div>
            <Comment name={"박진은"} comment={"안녕하세요 박진은 입니다."}></Comment>
            <Comment name={"이소명"} comment={"안녕하세요 이소명 입니다."}></Comment>

        </div>
    );
}
export default CommentList;'''

 javascript

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; ```