리액트 props 사용법

리액트 props 사용법

props는 리액트 컴포넌트 간에 데이터 전달하는 데 사용된다.

import React from 'react';
import Greeting from './Greeting';

function App() {
    const userName = "John Doe";
    const userAge = 25;

    return (
        <div>
            <h1>Welcome to the Props Example!</h1>
            {/* 자식 컴포넌트에 props 전달 */}
            <Greeting name={userName} age={userAge} />
        </div>
    );
}

export default App;

import React from 'react';

function Greeting(props) {
    return (
        <div>
            <p>Hello, {props.name}!</p>
            <p>You are {props.age} years old.</p>
        </div>
    );
}

export default Greeting;

 

 

타입 스크립트로 작성하는 방법

import React from 'react';

interface GreetingProps {
    name: string;
    age: number;
}

function Greeting({ name, age }: GreetingProps) {
    return (
        <div>
            <p>Hello, {name}!</p>
            <p>You are {age} years old.</p>
        </div>
    );
}

export default Greeting;