Props와 State

Props와 State

·

1 min read

Table of contents

Props ❓

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

✔ Props 특징

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

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

carbon (5)

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

carbon (6)

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

State ❓

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

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

✔ State 문법

useState hook 을 사용 합니다.

carbon (7)

✔ State 특징

  • useState를 사용하여 할당받은 변수는 불변값(Immutable)입니다.

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

carbon (8)