[React] Props와 State

Props ❓

Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터

 

✔  Props 특징

자식 컴포넌트에서 데이터를 변경 할 수 없습니다. ( 컴포넌트 내부의 속성이라고 봐도 무방 합니다 )

• 이미 HTML 를 사용하면서 태그에 대한 속성을 알고 사용하고 있습니다. ( id, class, onClick 등 )

<div id="name" class="label" onclick="alert('Hello World!');">
  Hello world!
</div>

• React에서는 이 속성 개념에 데이터를 전달하는 느낌으로 추가 확장 

const Text = ({text}) => {
  return <div>{text}</div>
}

const App = () => {
  return <Text text='Hello world!'/>
}

결과, 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 속성(Props)을 이용하여 Hello world! 라는 문자열이 출력 됩니다.

---

State ❓

State는 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 컴포넌트 안에서 데이터를 변경할 수 있습니다.
즉, State는 한 컴포넌트의 상태(State)를 나타냅니다.

• State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용 

 

✔ State 문법

useState hook 을 사용 합니다.

const [변수명, Set함수명] = useState (데이터 초기값);

 

✔ State 특징

• useState를 사용하여 할당받은 변수는 불변값(Immutable)입니다.
• 따라서 해당 값은 직접 수정이 불가능하며 해당 값을 변경하기 위해서는 반드시 Set 함수를 사용해야 합니다.

const App = () => {
  const [count, setCount] = useState(0);

  return 
  <div>
    <Text text={count} />
    <div onClick={() => setCount(count + 1)}>+</div>
  </div>
}