State & Props

Props

props의 특징

• 컴포넌트의 속성(property)을 의미한다.
  성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.
• 부모 컴포넌트로부터 전달받은 값이다.
  React 컴포넌트는 JavaScript 함수와 클래스로 props를 함수의 전달인자(argument)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
  따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
• 객체 형태이다.
  props로 어떤 타입의 값이라도 넣어서 전달할 수 있도록 props는 객체의 형태를 가진다.
• 읽기 전용이다.
  props는 외부로부터 전달받은 후 변하지 않는 값이다.
  그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체가 되었다.

 

How to use props

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      <Child />
    </div>
  );
}

function Child(props) {
  console.log("props : ", props);
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

export default Parent;

또 다른 방법으로 태그 사이에 value를 넣어 전달할 수 있다.
이 경우 props.children을 이용해서 해당 value 접근하여 사용할 수 있다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child>I'm the eldest child</Child>
    </div>
  );
}

function Child(props) {
  return (
    <div className="child">
      <p>{props.children}</p>
    </div>
  );
}

export default Parent;

 

props를 활용한 또다른 예제

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      <Learn text1={itemOne} />
      <Learn text2={itemTwo} />
    </div>
  );
};

const Learn = (props) => {
  return (
    <div className="Learn">
      <span>{props.text1}</span> <span>{props.text2}</span>
    </div>
  );
};

export default App;

 

 

State

애플리케이션의 "상태"

다음 코드는 체크박스를 예시로 state를 활용한 방법이다.

import React, { useState } from "react";
import "./styles.css";

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };
  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

export default CheckboxExample;

위와 같이 컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 한다.

 

State hook, useState

React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한다.
useState를 사용하기 위해서 다음과 같이 import를 해야 한다.

import React, { useState } from "react";

이후에 useState를 컴포넌트 안에서 호출한다.
useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며, 변수의 이름은 마음대로 지정할 수 있다.
일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
useState를 이해하기 쉽게 풀자면 이렇다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에서 직접 불러서 사용하면 된다.
이에 해당하는 예시는 다음과 같다.

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

 

state 갱신하기

state를 갱신하려면 useState를 할당할 때 사용했던 state 갱신 함수를 호출한다.
state 갱신 함수가 호출되면 호출된 결과에 따라 state 저장 변수가 갱신되며, React는 새로운 state 저장 변수를 컴포넌트에 넘겨서 해당 컴포넌트를 다시 렌더링한다.

 

state hook 사용 시 주의점

React 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링된다.