[React.js] 리액트 기초 - State, Props

State

state만 잘 관리하면 화면을 다시 그려주는 걸 신경쓰지 않아도 되는 편리함이 있다. 기존의 DOM Rendering 방식을 생각해보자.

export default function Hello() {
  let name = "Mike";

  function changeName() {
    name = name === "Mike" ? "Jane" : "Mike";
    document.getElementById("name").innerHTML = name;
  }

  return (
    <div>
      <h1>Hello</h1>
      <h2 id="name">{name}</h2>
      <button onClick={changeName}>Change name</button>
    </div>
  );
}

 

h2 태그의 id값을 주어 innerHTML로 name을 랜더링 하였다.

 

setState 사용하기

import { useState } from "react";

export default function Hello() {
  const [name, setName] = useState("Mike");

  function changeName() {
    const newName = name === "Mike" ? "Jane" : "Mike";
    setName(newName);
  }

  return (
    <div>
      <h1>Hello</h1>
      <h2 id="name">{name}</h2>
      <button onClick={changeName}>Change name</button>
    </div>
  );
}

 

인라인 익명함수로 선언할 수도 있다.

 

import { useState } from "react";

export default function Hello() {
  const [name, setName] = useState("Mike");

  return (
    <div>
      <h1>Hello</h1>
      <h2 id="name">{name}</h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change name
      </button>
    </div>
  );
}

 

state는 동일한 컴포넌트라도 고유의 값을 갖는다. 다른 컴포넌트에 영향을 끼치지 않는다.

 

 

각각의 컴포넌트들이 각각의 값을 갖는다.

---

Props

 

src/App.js

function App() {
  return (
    <div className="App">
      <Hello age={10} />
      <Hello age={20} />
      <Hello age={30} />
    </div>
  );
}

export default App;

 

age값들을 props로 넘겨주었다.

 

component/Hello.js

import { useState } from "react";

export default function Hello(props) {
  const [name, setName] = useState("Mike");

  return (
    <div>
      <h2 id="name">{name} ({props.age})</h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change name
      </button>
    </div>
  );
}

 

props.age로 props를 이름 옆에 표출시켰다.

 

결과화면

구조 분해 할당을 이용할 수도 있다.

export default function Hello({ age }) {
  ...
  {name} ({age})
  ...
}

 

props는 readonly이므로 값을 변경할 수 없고 넘겨받은 그대로 사용해야한다.

바꾸려고 하면 이런 에러를 만날 수 있다.

props.age = 100;
// Uncaught TypeError: Cannot assign to read only property 'age' of object '#<Object>'

 

만약 값을 변경하고 싶다면 컴포넌트 내부에서 state를 만들어야 한다.

 

component/Hello.js

import { useState } from "react";

export default function Hello(props) {
  const [name, setName] = useState("Mike");
  const [age, setAge] = useState(props.age);

  return (
    <div>
      <h2 id="name">
        {name} ({age})
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
          setAge(age + 1);
        }}
      >
        Change name
      </button>
    </div>
  );
}

 

age를 state로 만들어 age+1하는 함수를 구현했다.

 

props값을 활용해보자.

 

import { useState } from "react";

export default function Hello({ age }) {
  ...
  const msg = age > 19 ? "성인 입니다." : "미성년자 입니다.";
  {name} ({age}) : {msg}
  ...
}

 

age를 활용하여 성인인지 아닌지를 판별하였다.

 

 

컴포넌트가 가지고 있는 state를 props로 넘길 수도 있다.

 

UserName.js

export default function UserName({ name }) {
  return <p>Hello, {name}</p>;
}

 

Hello.js

<UserName name={name} />

 

위 구문을 추가하여 state로 생성한 name을 UserName의 props.name으로 넘겨주고 있다.

 

화면에 어떤 데이터를 갱신할 때는 props와 state를 사용하는게 좋다.

 

 

---

Reference

https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7- 

React js 강좌