React.js- State

 

State는 어쩌면 React의 꽃이라고 부를 정도로 가장 중요한 부분이 아닐까 싶다.

그만큼 심오하고 깊게 파고들 필요가 있을 필요가 있다. 사실 이 부분의 대해 깊게 파보지 않은 상태지만

그 전에 State가 뭔지, 그리고 State를 어떻게 써야되는지의 대해 글을 쓰려고 한다.

물론 이번에도 정말!!! 쉽게 풀어보려고 한다.

 

 

리액트에서 State(컴포넌트)란?

 

 

State의 특징이라면 Props와 다르게 동적으로 값을 수정할 수 있다는게 가장 큰 핵심이자 특징이다.

 

Props는 부모에서 자식으로 전달되는 단방향 방식으로 수정할 수 없지만 State는 Component안에서 수정이 가능하다.

 

 

 

State를 만들자.

 

 

 

제일 먼저 state를 선언해 준다.

 

state는 여러가지 방법으로 만들 수 있는데 첫번째는 class fleid로, 두번째는 단순한 JSON 객체로 만든다.

(위 예제는 단순 JSON 방식으로 만듬)

 

값을 변경하기 위해서 state의 기본 값을 공백으로 두었다.

 

 

State의 값을 변경해보자.

 

state의 가장 큰 특징은 '값을 변경할 수 있다'라는 타이틀에 걸맞게 값을 변경해보려고 한다.

 

위 사진은 처음 state를 공백으로 선언한 상태에서 버튼을 누르면(_changeHandle 함수) state가 '수박'으로 바뀌는 예제다.

기본적으로 state의 값 변경은 'setState'를 통해서 이루어 진다.

 

처음 공백이였던 title이 _changeHandle 함수에서 setState를 통해 값이 변경 된다.

 

어쩌면 state와 setState는 빼놓을 수 없는 짝꿍이 아닐 수 없다.

 

밑의 사진은 왜 setState를 쓰는 지의 대해 나와있다.

 

 

 

(위 사진은 React 공식 홈페이지에 있는 State 올바르게 사용하는 방법이다.)

 

 

 

위 예제는가장 기본적인것으로 설명했지만, 실제 실무에서는 더욱 복잡한 값을 받아와 state로 받고 setState를 통해 값을 변경해 주는 일이 많다.

 

예를들어 날씨앱을 하나 만들어도 그 날의 날씨의 따른 기상정보 API를 받아와 state의 담고 하루하루의 날씨가 변할 때 마다 state가 변하는 식으로 구현되어 있다.

 

State의 기본 사용이 익숙해 지는 것은 너무 당연하다.