React의 state와 props

 

 

State와 Props

state는 컴포넌트 자기 자신이 가지고 있는 값이다. 변화가 필요할 경우 setState()함수를 통해 값을 변경해줄 수 있다.

const 배열 = useState (데이터 초기값);

• 배열[0]: 데이터 초기값이 들어간 변수
• 배열[1]: 데이터를 수정할 수 있는 Set 함수

 

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

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

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

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

 

props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다

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

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

위와 같이 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 속성(Props)을 이용하여 Hello world!라는 문자열 데이터를 전달하는 것을 확인할 수 있습니다.

 

React Props, State 이해 및 사용법

 

[React] Props와 State