React State & Props

dice0314·2023년 5월 22일

React

State & Props

State는 컴포넌트 내부에서 변경 가능한 데이터
State는 컴포넌트의 로컬 상태를 유지하고 업데이트할 때 사용된다.
Props는 부모 컴포넌트로부터 전달받은 읽기 전용 데이터
Props는 컴포넌트 간 데이터를 전달할 때 사용된다.

State

1. 컴포넌트 내부에서 선언한다.

클래스 컴포넌트에서는 this.state를 사용하여 선언한다.
함수형 컴포넌트에서는 React Hooks의 'useState'를 사용하여 선언한다.

2. 컴포넌트 내에서 변경될 수 있다.

setState 메서드를 사용하여 값을 변경한다.

3. state는 해당 컴포넌트에 속한다.(데이터 소유권)

다른 컴포넌트에서 접근하려면 props로 전달해야 한다.

4. state가 변경되면 해당 컴포넌트와 그 자식 컴포넌트들이 다시 렌더링된다.(업데이트)

useState

React의 hook 중 하나이다.
함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용된다.
배열을 반환하며, 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태 값을 변경하는 함수이다.

💡 hook: 함수형 컴포넌트에서 상태 관리, 생명주기 메서드, Context, 렌더링 제어 등의 기능을 제공하는 함수

// useState를 사용하기 위해 import해야 한다.
import { useState } from "react";

function func() {
  // useState훅을 사용
  // text라는 현재상태와 setText라는 상태변경 함수 선언
  // 초기값은 ""
  const [text, setText] = useState("");
  // input의 값이 변경될 때 호출
  const handleChange = (event) => {
    // input의 값을 text에 업데이트한다.
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>{text}</p>
    </div>
  );
}

Props

1. 읽기 전용 데이터이다.

부모 컴포넌트로부터 전달되었으며, 변경할 수 없다.
컴포넌트 내에서 직접 변경할 수 없다.
부모 컴포넌트에서 변경된 props를 전달하면 자식 컴포넌트는 새로운 props를 받고 다시 렌더링한다.

2. 부모 컴포넌트에서 소유된다.

자식 컴포넌트에서는 props를 사용하여 데이터에 접근한다.

3. 부모 컴포넌트에서 전달하는 props가 변경되면 해당 자식 컴포넌트가 다시 렌더링된다.

❗ 주의점
props로 전달하는 것은 최대 1 depth으로 제한하는것이 좋다.
props를 이용해 깊이 전달 될수록 코드가 복잡해지고 알아보기 힘들어진다.
이 문제를 해결하기 위해서는 전역 상태관리를 도와주는 라이브러리를 사용해야 한다.

props의 사용 방법 순서

하위 컴포넌트에 전달할 값과 속성 정의
props를 이용하여 정의된 값과 속성 전달
전달받은 props를 렌더링

function func(props) {
  // props를 매개변수로 <p>Hello {props.name}</p>를 반환한다.
  return <p>Hello {props.name}</p>;
}

function App() {
  return (
    <div>
      <Name name="John" />
      <Name name="Jane" />
    </div>
  );
}

props.children

부모 컴포넌트에서 자식 컴포넌트를 사용할 때, 부모 컴포넌트의 태그 안에 작성된 내용을 가리킨다.

const Component = (props) => {
  return (
    <div className="component">
      {props.children}
    </div>
  );
};

const App = () => {
  return (
    <Component>
      <p>Hello</p>
    </Component>
  );
};

실행결과

<div class="component">
  <p>Hello</p>
</div>

{props.children}는 <Component></Component> 내부에 있는 <p>Hello</p>를 가리키므로 위와 같은 결과가 나온다.

React 이벤트 처리

onChange

<input>, <textarea>, <select>와 같은 입력값에 따라 변경되는 이벤트를 처리하는데 사용한다.
event.target.value로 이벤트 객체에 담겨있는 입력값을 가져올 수 있다. 여기서 event는 매개변수이다.
React의 이벤트는 카멜 케이스(camelCase)를 사용한다.

💡 카멜 케이스: 첫 단어를 소문자로 시작하고, 그 이후 단어의 첫 글자는 대문자로 쓰는 방식

function func() {
  const [text, setText] = useState("");

  // 이벤트이므로 첫 단어는 소문자 이후는 대문자인 handleChange로 선언한다.
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <input type="text" value={text} onChange={handleChange}></input>
  );
}

onClick

<button>과 같은 클릭 이벤트를 처리하는데 사용한다.

function Button() {
  const handleClick = () => {
    console.log('Button click');
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}