[React] props - 1

1. 개요

props는 properties의 약자로 속성을 의미한다. HTML 태그 내에 보면 value, name, id 등.. 각각의 속성이 들어가 있는 걸 본적 있을 것이다. 이를 props라고 하며, 각 컴포넌트에 props를 전달할 수도 있다.

 

 

 

2. 코드

먼저 MyProps.js를 보자.

import React from 'react';

function MyProps(props){

    const style = {
        color : props.color
    }

    return (
        <div>안녕하세요. {props.name}</div>
        <div style={style}>색상은 {props.color} 입니다.</div>
    );
}

export default MyProps;

MyProps 함수를 보면 파라미터로 props를 받고 있다. App.js에서 props를 정의하고 전달하면 저 props 객체로 받는 것이다.

 

App.js를 보자.

import React from 'react'
import MyProps from './props/MyProps';

function App(){
    return(
        <MyProps name="React" color="red" />
    );
}

export default App;

코드를 보면 컴포넌트에 name과 color라는 props를 정의했고, MyProps.js에 전달하여 해당 props를 사용할 수 있는 것이다.

 

위 MyProps.js에서 props객체로 받아 사용해도 되지만, 비구조화 할당 방법으로도 받을 수 있다.

import React from 'react';

function MyProps({name, color}){
	return (
        <div>안녕하세요. {name}</div>
        <div>색상은 {color} 입니다.</div>
    );
}

export default MyProps;

 

 

 

 

 

 

잘못된 내용이 있다면 언제든 댓글 남겨주시면 감사하겠습니다!