State & Props

리액트에는 State와 Props라는 두 종류의 데이터 전달 방식이 있다.

State

특정 React 컴포넌트 안에서 사용하는 데이터(변경 가능)

State 사용법

Class 컴포넌트

class MyComponent extends Component {
  state = { 상태이름: 상태값 };

  componentMethod = () => {
    this.setState({상태이름: 새로운 상태값})
  }

  render(){
    return (표시할 요소, 컴포넌트)
  }
}

• setState(): 컴포넌트를 만들 떄 상속받은 리액트의 컴포넌트 클래스의 메서드이다. setState 메서드를 정의하지 않아도 사용할 수 있다.

함수형 컴포넌트

function MyComponent() {
  const [상태, 상태변경함수] = useState(상태값);

  const componentMethod= () => {
    상태변경함수(새로운 상태값)
  }

  return (표시할 요소, 컴포넌트)
}

• useState():
• useState() 함수를 쓰면, 상태 이름 앞에 set을 붙여 상태변경함수 이름을 만들어준다.
• useState()로 상태를 만들어주는 코드는 컴포넌트의 최상단에 위치해야 한다.

before

import "./App.css";

function App() {
  let counter = 0;
  return (
    <>
      <div>counter : {counter}</div>
      <button
        onClick={() => {
          counter += 1;
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          counter -= 1;
        }}
      >
        -
      </button>
    </>
  );
}

export default App;

useState

// setCounter에 상태를 직접 넘겨주는 방법
import { useState } from "react";
import "./App.css";

function App() {
  const [counter, setCounter] = useState(0);
  return (
    <>
      <div>counter : {counter}</div>
      <button
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          setCounter(counter - 1);
        }}
      >
        -
      </button>
    </>
  );
}

export default App;

jsx

import { useState } from "react";
import "./App.css";

function App() {
  const [counter, setCounter] = useState(0);
  return (
    <>
      <div>counter : {counter}</div>
      <button
        onClick={() => {
          setCounter((prev) => prev + 1);
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          setCounter((prev) => prev - 1);
        }}
      >
        -
      </button>
    </>
  );
}

export default App;

주의

상태 변경 함수를 사용하지 않으면, React는 상태 변경을 감지하지 못한다.

• Class 컴포넌트: setState()
• 함수형 컴포넌트: useState()

State 끌어올리기 (Lifting State Up)

부모의 상태를 변경하고 싶으면, 상태 변경 함수를 props로 받아와서 사용하면 된다. 상태 변경 함수를 자식 컴포넌트로 내려줘서 자식이 다루는 것을 상태 끌어올리기 라고 한다.

상태 변경

1. 상태 변경 함수를 사용해야한다.
2. 새로운 상태 값이 기존 상태 값과 달라야한다. === React의 불변성을 지켜야 함

원시 자료형(Primitive Data Type) 불변하는 단순한 데이터, 변수에 값 자체를 저장

참조 자료형(Reference Data Type) 가변하는 복잡한 데이터, 변수에 메모리 주소를 저장

기존 상태를 재사용하면서 주소 값을 바꾸려면?

1. 기존 상태를 복사해서 가공한다.

• Spread Syntax
• Array.slice()
• Object.assign()

2. 새로운 배열을 리턴하는 고차 함수 메서드를 사용한다.

• Array.map()
• Array.filter()

Props

부모 컴포넌트에게 전달받은 데이터 (변경 불가능)
<자식 컴포넌트 props이름 = {props}/>

• 읽기 전용 데이터이다. 자식 컴포넌트에서 주체적으로 이 데이터를 변경할 수 없다.

Props 사용법

class 컴포넌트

super(props);
props.props이름;

this.props.props이름;

함수 컴포넌트

function 자식컴포넌트({ props이름 }) {...}