[리액트 3] 기본개념 - props, state

// react 의 props 와 state 의 개념, 예시 등을 자세히 설명해 주세요

 

1. Props

"props"는 React에서 부모 컴포넌트로부터 자식 컴포넌트로 전달하는 데이터를 의미합니다.
"props"는 속성(properties)의 줄임말이며, HTML의 속성과 유사한 방식으로 작동합니다.

예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 "name" prop을 전달하는 예시는 아래와 같습니다:

function ParentComponent() {
    return <ChildComponent name="John Doe" />
}

function ChildComponent(props) {
    return <h1>Hello, {props.name}!</h1>
}

 

이 예시에서, "name"은 ChildComponent에 전달되는 prop이며, ChildComponent는 이 prop을 사용하여 인사말을 출력합니다.

props는 읽기 전용이므로, 컴포넌트 내에서 props의 값을 변경하는 것은 허용되지 않습니다.

2. State

"state"는 컴포넌트가 관리해야 하는 동적 데이터를 의미합니다.
컴포넌트의 state는 시간이 지나면서 변할 수 있으며, state가 변경될 때마다 컴포넌트는 다시 렌더링됩니다.

React에서 state를 사용하려면, 주로 useState라는 Hook을 사용합니다. 아래는 state를 사용하는 예시입니다:

import React, { useState } from 'react';

function CounterComponent() {
    const [count, setCount] = useState(0);  // Initialize the state with a value of 0

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

이 예시에서, useState는 현재 state 값(count)과 이 값을 업데이트하는 함수(setCount)를 반환합니다. 버튼을 클릭하면 setCount가 호출되어 count의 값이 1씩 증가하며, 이로 인해 CounterComponent는 새로운 count 값으로 다시 렌더링됩니다.

props와 state는 React에서 컴포넌트가 동작하는 방식을 결정하는 두 가지 주요 요소입니다. props는 외부에서

전달받은 데이터를 나타내며 변경할 수 없고, state는 컴포넌트 내부에서 관리되며 시간에 따라 변경될 수 있는 데이터를 나타냅니다.