React의 데이터 :: props와 state

props, state....

리액트 공부할때마다 앞부분이라 꼭 한번씩 보게되기 때문에 거의 4번째 보는 놈들이지만

아직도 설명하라면 잘 못하겠다... 잘 정리해봐야징..

 

Props와 State는 리액트에서 데이터를 다룰 때 사용하는 개념으로 정말정말 중요하고 정말정말 헷갈리는 개념이다

꼭꼭 잘 정리해보자

고정 표지 박제!

---

Props

properties의 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소

props는 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(주로 App컴포넌트)에서 설정할 수 있다.

단! props는 state처럼 변경할 수는 없다.

 

index.js에서 message라는 변수를 App.js가 받아서 props로 사용할 수 있게 하는 코드이다.

이처럼 부모(여기서 부모는 index.js)에게 상속을 받아서 사용하는 변수가 props이다.

 

props는 변경이 불가능하지만 App.js에 다른 컴포넌트를 상속시키고 props를 변경하는 방식으로 간접적으로 변경이 가능하다!

InsideApp이라는 컴포넌트를 생성

App.js에서 InsideApp컴포넌트를 받아오고, 그 때 App컴포넌트의 state와 메소드인 count와 handleChange를 상속

 

---

State

하나의 컴포넌트가 가질 수 있는 변경가능한 데이터(컴포넌트 내부에서 바뀔 수 있는 값)

컴포넌트를 렌더링할 때 새로운 데이터를 생성해야 한다던지... 기존의 데이터를 참고해서 새로운 데이터를 만들어야 한다던지...뭐 그럴때...?!

 

state는 현재 컴포넌트 안에서 새로운 데이터를 만들어 낼 때 사용한다.

메소드가 실행될 때 마다 state값에 변화가 생긴다. 

* 메소드명은 카멜표기법 (oneTwo)을 따르며, JSX에서 메소드를 불러올 때 ()붙이지 않는 것 주의!

{this.state.hello} ==> 문자열이 들어갈 state변수

* state뿐만 아니라 JSX에 변수를 넣을 때에는 중괄호 {}에 담아야 한다!

---

state 예제

1. 버튼 클릭시 state변화

2. 버튼 클릭시 카운트 업

=> 위 예제를 보면 알 수 있듯이 countUp 메소드가 실행될 때 마다 state인 count의 숫자는 올라간다. 컴포넌트 안에서 count라는 데이터가 생성되어 countUp 이라는 메소드에 의해 작동이 된 것!

---

State와 Props 정리

1. State는 현재 컴포넌트 내에서 변경이 가능하다.
2. Props는 현재 컴포넌트 내에서 변경이 불가능하다.
   (예전 리액트 버전에서는 가능했으나 현재 버전에서는 사용하지 않는 것을 추천)
3. Props와 State 모두 하위 컴포넌트에 상속이 가능하다.

 

 

 

참고 medium.com/wasd/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-part-5-77e997cf597