리액트의 기초 - props

이전 포스트 : https://actually-i-am.tistory.com/46

리액트의 기초 - 컴포넌트와 JSX

 

이전 포스팅에서 컴포넌트는 재사용하기 좋다고 설명했지만 props없이는 무리가 있다.

 

이전 포스팅에서 정의했던 Hello컴포넌트를 다시 보자. 만약에 'Hello, 유저이름'과 같은 식으로 나타내고 싶다고 생각을 해주자. 3명의 이름을 부르려면 3개의 컴포넌트가 필요하다. 하지만 props를 사용한다면 아래 하나의 컴포넌트를 재사용 가능하다.

import React from 'react';

function Hello(props){
return <div> Hello, {props.name}</div>;
}

export default Hello;

컴포넌트 함수의 인자로 props라는 객체가 들어오게 된다. Hello 컴포넌트를 호출하는 곳에서

<Hello name="김철수" />

위와 같은 형식으로 작성하면 데이터를 Hello 컴포넌트에서 사용할 수 있는 것이다.

이처럼 Props는 컴포넌트 밖에서 주어지는 데이터를 말하고, 컴포넌트의 재사용성을 높여주는 역할을 한다.