컴포넌트 props 간단예제

import React from 'react';

// 이름 없는 함수로 컴포넌트를 정의하고, Text라는 변수에 대입한다
// Text 컴포넌트는 부모로부터 'content' 라는 데이터를 받는다.

const Text = (props: {content: string})=>{

    // props로 부터 cntent라는 값을 꺼낸다.
    const {content } = props;

    // props로 전달된 데이터를 표시한다.
    return <p className='text'>{content}</p>
}

const Message = (props:{}) => {

    const content1 = 'This is parent component';
    const content2 = 'Message uses Text Component';

    return (
        <div>
            <h3>예제2. Message</h3>
            <Text content={content1}/>
            <Text content={content2}/>
        </div>
    );
};

export default Message;

 

 부모컴포넌트(Message)로 부터 받은  content 라는 props를 자식컴포넌트(Text)에 표시하는 간단 예제.

 

 props는 부모로부터 자식에게 한 방향으로 데이터를 전달한다. props의 내용을 자식이 변경 할수 없으며, 변경하고자 하면 에러가 발생한다. 이런 구조/제약으로 데이터를 여러 위치에서 변경할 수 없으므로 디버그가 쉬어진다.

 그래도 바꿀 수 있는 방법은 있으니 Context가 그 방법이다. 하지만 남용하지는 말자.