[React] state와 props

state

• 현재 컴포넌트에서 생성, 변할 수 있는 데이터
• state가 생성된 컴포넌트 내에서만 변경이 가능하다
• 반드시 객체 형태로 생성되거나 null 타입이어야 한다
• state 업데이터를 하려면 무조건 setState라는 메소드를 사용해야 한다
  • 특정한 작업이 이루어졌을 때에만 HTML이 업데이트 되도록 만든 규칙

 

(예제)

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

버튼을 클릭할 때마다 숫자가 커지거나 작아진다.

 

 

 

 

 

 

 

 

 

 

 

props

• 컴포넌트에 값을 전달할 때 사용한다
• 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 것들을 의미
• props로 넘겨준 값들은 불변하며, readOnly 속성을 가지고 있다
• 자식 컴포넌트에서의 직접적인 props 변경은 불가능하며, 내려받은 setStaet나 함수를 이용하여 props를 바꾸도록 부모 컴포넌트에 요청할 수 있다

 

(예제)

import React, { Component } from 'react';

function App() {
  return (
    <div>
      <Hello name="seoyeon" />
    </div>
  );
}

function Hello(props) {
  return <div>hello my name is {props.name}</div>
}

export default App;

App이 부모 컴포넌트고 Hello가 자식 컴포넌트이다. App에서 props를 넘겨받아서 사용한다.

 

 

 

 

 

 

 

 

 

 

state와 props의 차이점

state는 내부에서 생성하고 활동하고, 데이터를 변경할 수 있다

props는 외부(부모 컴포넌트)에서 상속 받는 데이터이며 데이터를 변경할 수 없다