[React JS] #7 props (컴포넌트에 프로퍼티로 인자 전달하기)

코드 작성

App.js

import './App.css';
import Hello from './component/Hello';

function App() {
    return <div className="App">
        <h1>Props : properties</h1>
        <Hello age={10}/> 
        <Hello age={20}/>
        <Hello age={30}/>
    </div>;
}
// 프로퍼티로 준 값이 Hello 컴포넌트에 인자로 전달됨. 

export default App;

Hello 컴포넌트에 age라는 프로퍼티를 설정한다.

 

Hello.js

import { useState } from "react";

export default function Hello(props) {
    const [name, setName] = useState("Mike");
    const [age, setAge] = useState(props.age);
    const msg = (age > 19) ? "성인입니다." : "미성년자입니다.";

    // 중괄호 내부 변수명도 props.age가 아니라 age로 바꿔줘야 함.
    // 만약 props.age를 직접 변경하려고 하면 에러가 남.

    // msg가 갱신되는 이유는 useState로 인해 age 변경 시 리렌더링이 진행되기 때문
    return <div>
        <h2 id="name">{name} ({age}세) : {msg}</h2>
        <button onClick={()=>{
            setName((name === "Mike") ? "Jane" : "Mike");
        }}>Change Name</button>
        <button onClick={()=>{
            setAge(age+1);
        }}>Add age</button>
    </div>; 
}

props로 전달받은 age를 Hello 컴포넌트에서 state로 이용할 수 있도록 코드를 작성한다.

• msg가 const형으로 선언되었음에도 불구하고, age가 state이므로 변경 되면 리렌더링이 진행되어 msg도 갱신된다.
• props.age를 직접 변경시키려고 하면 에러가 발생한다.