State 소개

State

1. 유동적인 데이터를 사용할 때 쓴다. 

( cf . props 같은 경우는 정해진 데이터 )

App 클래스에 대해서 props의 value 값으로 propName 설정 , 그리고 고정 값인

props.children 설정 

ReactTest라는 클래스에서 App 클래스를 rendering한다.

rendering 할 때 App 클래스의 propName은 ReactTest 클래스의 props의 value 값인 propName으로 설정한 것이다. 

조금 꼬여서 복잡해 보일 수 있는데, <App propName = ~~ > 이 부분에서의 

propName은 App클래스의 props 값 propName을 가리키는 것이고 그 값을 정의할 때에 App 클래스의 props의 값인 propName으로 받는다는 것이다.

즉, ReactTest 클래스를 다시 랜더링 하는 곳에서 propName 값을 정의하면 그 값이 ReactTest의 props 값이자, App 클래스의 props 값이 되는 것이다. 

(엄밀히 말하면 props의 propName 값)

또한 props.children도 클래스 태그 내에 적혀있는 값이기 때문에 아래 그림처럼 

ReactDOM.render(<ReactTest propName = { "seongho " }> 12월 크리스마스! </ReactTest> , rootElement ):

부분에서 propName으로 선언한 값은 ReactTest 클래스의 propName 값이자 App 클래스의 propName으로 들어가게 된다.

사실 그냥 "seongho" 라고 해도 되는데 , 중괄호 안에서 하는 버릇을 들이는 것이 좋을 듯 싶다. 

JSX 문법에 따라 데이터 값은 { } 중괄호 내에서 정의해줘야 하기 때문에 

이에 대하여 큰 이견이 없을 것이라 본다.

12월 크리스마스! 는 prop.children 의 값으로 들어가게 된다. 

즉 , 이렇듯 값이 정의 되어서 표현되는 것은 prop의 특징인데, 이와 반대로 state는 

유동적인 데이터를 다루게 된다.

2.  state에 대한 초기값 설정은 필수! 

( >> 변수의 초기 값 선언은 constructor에서..! )

단 ! props가 먼저 선언되어야 한다.  ( 먼저 진행되어야 함 )

다음과 같이 Counter라는 클래스를 ReactDOM에서 랜더링 하여 보여주고 싶을 때, 

constructor를 먼저 선언해주는데, 인자로 props를 넣어준다. 

그리고 super(props); 를 통해서 state 값을 선언하기 이 전에 먼저 props가

진행될 수 있도록 구현을 해준다.

props 진행 이 후에 state의 초기 값을 설정해 주는 것이 필요하다.

this.state = {

   value : 0 

}

이것은 state의 변수가 value 이고 그 초기 값을 0으로 선언했다는 뜻이다.

이렇게 rendering 하는 부분에서 state의 변수 값 value는 앞서 생성자에서 선언한 대로 0을 초기값으로 가지게 된다.

이제 여기에 버튼을 만들고 클릭 이벤트가 발생할 때에 state의 변수인 value 값이 유동적으로 바뀌는 걸 설명하겠다.

3. 유동적으로 변수 값을 바꾸는데에 사용한 메소드는

this.setState ( { state변수 : state변수의 값이 바뀔 내용 }); 이다.

이를 활용하면 된다.

 단! Rendering 하기 전에 setState는 사용해선 안된다. 즉 , state의 변수의 값을 설정하는 부분 (constructor)에서는 사용할 수 없다는 뜻이다. 

또한 constructor 이 후에 ' this.state = ~~ ' 이런 식의 직접적인 접근을 통해서 수정하는 것은 올바르지 않은 방법이므로 지양하도록 한다.

다음 handleClick() 메소드는 constructor 다음에 선언한 내용으로 반드시 constructor에서 rendering 하고 나서 사용을 해줘야 하는 부분이다.

handleClick() 메소드에선 this.setState 메소드를 사용하여 state 값을 유동적으로 사용할 수 있다. 

state 변수인 value의 값을 바꾸는데, 바꾸는 대상이 this.state.value (현재 여기서 쓰고있는 state 변수 value 값) 이라고 올바르게 선언을 해줘야 한다. 

이 후에 Counter 클래스 전체를 rendering 할 때, 이벤트를 만들어 작업해야 하므로,

버튼을 하나 만들어주고 기존 자바스크립트 문법처럼 메소드를 호출한다. 

단, this.handleClick() 이것이 아니라 this.handleClick 이라는 것에 집중하자 

현재 클래스 내에서 사용하는 메소드 이름을 그대로 불러오는 것이기에 this.handleClick을 사용한 것이고, 괄호를 입력하게 된다면 이상한 값이 출력될 것이다.

이렇게만 정리하면 해당 값이 유동적으로 변하지 않을 것이다.

이유는 handleClick 메소드가 어떤 클래스의 소속인지 모르기 때문에 그렇다.

constructor에서 state 변수 선언 이 후에 여기 Counter 클래스에서 사용하는 

handleClick 메소드가 Counter 클래스 소속이라고 명시(바인딩)를 해줘야 한다.

따라서 this.handleClick = this.handleClick.bind(this); 라는 선언문을 통하여 

별도의 바인딩 과정을 진행해 주어야 버튼 클릭 이벤트에서 handleClick 메소드를

제대로 인식하고 handleClick 내에 this.setState 메소드로 정의한 내용이 진행되게 될 것이다. 

결과적으로 이벤트 발생에 따라 state의 변수 값은 유동적으로 값이 변하게 될 것이다.

https://github.com/Haamseongho/React_Study/tree/master/state

감사합니다!