[React] State와 Props란???

리액트를 하다보면 State와 Props에 대해 많이 나오는데 오늘은 이것에 대해 간단하게 정리해볼까 합니다.

State란?

1. 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하는 방법!
   예를 들어, 검색 창에 입력할때 글이 변하는 것은 state로 바꾸게 됩니다.
2. State는 변경 가능한 mutable 값입니다.
3. State가 변하면 re-render가 됩니다.

 

State는 해당 컴포넌트에서 useState라는 React hooks를 통해 사용가능합니다. 

간단한 코드로 설명을 하면 아래와 같습니다.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

위의 코드에서는 useState라는 Hook을 사용하여 상태를 정의하고 있습니다.

useState는 상태 값과 상태를 변경하는 함수를 반환합니다. 첫 번째 인자는 초기값이며, 여기서는 0으로 설정되어 있습니다.

상태 값을 count 변수에 할당하고, 상태를 변경하는 함수를 setCount 변수에 할당하고 있습니다.

 

handleClick 함수는 setCount를 호출하여 count 값을 증가시키고 있습니다.

그리고, 버튼을 클릭할 때 handleClick 함수가 실행되도록 onClick 이벤트를 등록하고 있습니다.

React hook의 useState 부분은 나중에 포스팅으로 더 자세히 적어보도록 하겠습니다.

 

props란?

1. props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소!
2. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.
3. Props는 읽기 전용인 immutable 값으로 자녀 컴포넌트 입장에서는 변하지 않습니다. 
   변하게 하려면 부모 컴포넌트의 state를 변경시켜야 합니다.

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

<MyComponent name="John" />

위의 코드에서는 name이라는 Props를 MyComponent에 전달하고 있습니다.

MyComponent에서는 props를 인자로 받아와서 name을 읽어와 "Hello, John!"이라는 문구를 출력하고 있습니다.

 

Props는 다양한 자료형을 가질 수 있습니다.

예를 들어, 문자열(String), 숫자(Number), 객체(Object), 배열(Array) 등을 Props로 전달할 수 있습니다.

또한, 컴포넌트 자체도 Props로 전달할 수 있습니다.

이를 통해 컴포넌트에서 다른 컴포넌트를 렌더링하거나 조건부 렌더링을 할 수 있습니다.