⚛️Start! React : section08 - props

이번 시간에는 props를 사용할 것이다. props는 우리가 직접 설정한 값을 함수로 가져와서 변형하고 응용해서 다시 값을 넘겨주는 역할을 한다. 기본적인 형태만 보아서는 단순해 보이지만 응용했을 때는 복잡하고 머리아프다. 따라서 props의 역할과 props를 응용했을 때 어떻게 사용될지를 생각하면서 해당 수업을 들으면 더 질좋은 강의 시간이 될 것이다. 아래 코드를 살펴보자

*App.js

import Class_App from "./section/section08/Class_App";

 

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <Class_App age={10}></Class_App>

        <Class_App age={20}></Class_App>

        <Class_App age={30}></Class_App>

          ...

*Class_App.js

import { useState } from "react";

 

function Class_App( props ) {

 

  const [name, setName] = useState("Mike");

  return (

    <div>

      <h2>

        {name}(props.age)

      </h2>

      <button

        onClick={() => {

          setName(name === "Mike" ? "Jane" : "Mike");

        }}>Change</button>

    </div>

  );

}

export default Class_App;

props는 외부 컴포넌트로부터 받아온 값을 내부 컴포넌트에서 변경할 수 없다. 실행하면다면 오류가 날 것이다. 임의로 변경한 코드는 아래와 같다.

  ...

function Class_App({ age }) { 

  props.age = 100;

  const [name, setName] = useState("Mike");

  const msg = age > 19 ? "성입입니다." : "미성년자 입니다."

  return (

  ...

 

위의 코드는 임의로 props의 값을 변경 했을 때이다. 브라우저에서는 에러 메세지 창이 뜰 것이다. 우리가 해당 props를 내부적으로 변경하려면 useState를 사용해야 한다. useState를 사용해서 변경한 모습은 아래와 같다.

import { useState } from "react";

 

function Class_App(props) {

 

  const [name, setName] = useState("Mike");

  const [age, setAge] = useState(props.age);

  const msg = age > 19 ? "성입입니다." : "미성년자 입니다."

 

  return (

    <div>

      <h2>

        {name}({age}) : {msg}

      </h2>

      <button

        onClick={() => {

          setName(name === "Mike" ? "Jane" : "Mike");

          setAge(age + 1); //이상태에서는 넘겨받은 값을 변경한 것이 아니다.

        }}>Change</button>

    </div>

  );

}

export default Class_App;

useState를 사용해서 클릭을 했을 때 age의 값이 변동된다. 이와 동시에 10의 값을 가지고 있는 컴포넌트는 1씩 증가되면서 msg의 삼항연산자 조건문에도 변동이 생겨 msg의 문자열도 바뀐다. 여기서는 컴포넌트 내부적으로 변경이 있는 것이기에 useState가 따로 필요 없다. 마지막으로 UserName이라는 컴포넌트를 따로 만들어서 name의 useState의 상태 변경이 된 것을 넘겨주는 코드를 작성해 볼 것이다. 아래 코드를 살펴보자.

*UserName.js

 

export default function UserName({ name }) {

  return <p>Hello, {name}</p>

}

*Class_App.js

import { useState } from "react";

import UserName from "./UserName";

 

function Class_App({ age }) {

 

  const [name, setName] = useState("Mike");

  const msg = age > 19 ? "성입입니다." : "미성년자 입니다."

  return (

    <div>

      <h2>

        {name}({age}) : {msg}

      </h2>

      <UserName name={name}></UserName>

      <button

        onClick={() => {

          setName(name === "Mike" ? "Jane" : "Mike");

        }}>Change</button>

    </div>

  );

}

export default Class_App;

변경되는 상태값을 내부 컴포넌트에서 다시 컴포넌트를 생성해서 넘겨 받은 형태이다. 결국 현재 Class_App내부 컴포넌트에서 name의 useState가 변경이되면 UserName이 props로 해당 name을 주었기에 UserName 컴포넌트 내부에서도 변경이된다. 마지막으로 {age}는 props.age로 작성해도 괜찮다. 개발자와 개발 환경에 따라 작성방법은 다를 수 있다. 

지금까지는 기본적인 형태들만 이루어져 있기 때문에 어려움이 없지만 이를 복합적으로 응용하게 되면 어려움이 생길 수 있다. 따라서 우리가 지금까지 배운 것을 빨리 익숙해지려고 노력할 필요가 있다.