React 10 Component , props

우리는 지난시간에 간단한 JSX 문법을 사용해서 React 컴포넌트(엘리먼트) 를 만들었다 이번시간에는 Component 하고 Props 에 대해서 알아보도록 하자

Component

리액트트는 리액트 컴포넌트의 조합으로 이루어져 있습니다 하나의 페이지는 리액트 컴포넌트로 이루어져 있고 그 리액트 컴포넌트는 다른 작은 리액트 컴포넌트로 이루어져 있습니다 그래서 React 어플리케이션을 만들때에는 수많은 작은 조각 레고 블럭을 조립해서 하나의 어플리케이션을 만드는 과정입니다

Props

리액트가 말하는 Props 는 Property 의 준말로 특성이라는 뜻을 가지고 있습니다 이때 말하는 속성은 리액트 컴포넌트 속성을 의미하게 됩니다

Props 의 특징

1. 데이터 전달 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달하는데 사용합니다 부모를 통해 데이터를 받은 자식은 그 데이터를 활용할 수 있습니다

2. 읽기 전용 Props 는 읽기 전용으로 전달된 데이터를 수정할 수 없습니다

Props 를 통한 데이터 전달

import React from "react";

function AvatarImage(props){

    return (
        <img
            className="avatar"
            src = {props.imagUrl}
            alt = {props.usernmae}
            width={props.width}
            height={props.height}
        >
        
        </img>
    )
}

export default AvatarImage

우리는 하나의 작은 ReactComponent 를 만들었다 이는 img 태그를 가지며 props 를 받아서 부모로 부터 넘어오는 데이터를 성실히 렌더링 할것이다

import React from "react";
import AvatarImage from "./React_props";

function Profile(props){

    return (
        <div>
            <AvatarImage  imagUrl="https://img.seoul.co.kr/img/upload/2021/11/16/SSI_20211116180452.jpg"
                          alt = "웰시코기"
                          width = {50}
                          height = {100}
            />
            <AvatarImage  imagUrl="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Golden_retriever.jpg/640px-Golden_retriever.jpg"
                          alt = "리트리버"
                          width = {200}
                          height = {300}
            />

            <AvatarImage  imagUrl="https://upload.wikimedia.org/wikipedia/commons/5/5f/Italian_Greyhound_standing_gray.jpg"
                          alt = "이탈리아 그레이 하운드"
                          width = {500}
                          height = {500}
            />
            

        </div>
    )
}

export default Profile

이 부분이 바로 AvatarImage 리액트 컴포넌트의 부모컴포넌트가 된다 이때 AvatarImage 들어간 각 속성 imagUrl , alt , width , height 가 자식으로 전달될 props key 값이고 그 뒤에 값들은 key 매핑이 된 value 값이 된다 그러면 우리는 부모로 부터 자식에게 props 값을 전달한 간단한 예제를 본것이다 여기서 특징중 하나는 사진크기 수정이 필요하다고 해서 AvatarImage 를 수정하는 것이 아니라 부모가 보내주는 데이터를 수정만 하면된다 이처럼 리액트 컴포넌트는 목적에 맞게 최소 기능단위로 분리를 하게 되면 유지 보수 하기 쉬운 특징이 있다 오늘은 React 컴포넌트와 , Pros 에 대해서 알아보았습니다