props

props

props는 태그에 작성된 속성이 저장되는 객체이다.

다음과 같이 Monster 컴포넌트가 있다고 가정한다.

function Monster(props) {
    return (
        <div>
            <h1>{props.name}</h1>
            <p>번호 : {props.no}</p>
            <p>속성 : {props.type}</p>
        </div>
    );
}

Monster 컴포넌트는 태그 생성 시 작성되는 no, name, type 속성을 읽어 내부 화면을 구현한다.

MainComponent에서 Monster를 다음과 같이 생성한다.

function MainComponent(){
    return (
        <>
            <Monster no={1} name={'이상해씨'} type={'풀'}/>
            <Monster no={2} name={'파이리'} type={'불'}/>
            <Monster no={3} name={'꼬부기'} type={'물'}/>
            <Monster no={4} name={'피카츄'} type={'전기'}/>
        </>
    );
}

Monster를 생성하며 no, name, type을 전달한다.

전달 방법은 정적, 동적 2가지가 있다.

정적 props

HTML 태그처럼 문자열 속성을 작성하는 방법이다. 프로그래밍 데이터를 작성할 수 없다.

<Monster no="1" name="이상해씨" type="풀"/>

동적 props

Javascript 값을 속성으로 작성하는 방법이다. 프로그래밍 데이터를 모두 전달할 수 있어 권장하는 방법이다. 자료형에 따라 다르게 작성해야 한다.

<Monster no={1} name={'이상해씨'} type={'풀'}/>

실행 결과

결론

props를 사용하면 컴포넌트간의 데이터 연결을 수월하게 할 수 있다. 따라서 세부적인 컴포넌트 단위로 이루어진 애플리케이션 구현이 용이하다.