React.js Component의 State에 대해서 정리해 보겠습니다.

오늘은 React.JS의 state에 대해서 정리해 보도록 하겠습니다.

1.  State

1-1. Props vs State

state를 애기하려고 하면, props에 대해서 조금 짚어보고 가야 할 것 같은데요.

state와 props모두 컴포넌트에 어떤 값을 주는데요.

가장 큰 개념적인 차이라면,

props는 외부 컴포넌트에 의해서 변경될 수 있는 값을 전달받기 위해서 사용하고,

State는 컴포넌트 내부적으로 변경되는 값을 저장하기 위해서 사용한다고 생각합니다.

전달하는 형태도 조금 다른데요.

state가 {}안에object형태로 전달되는 반면, props는 JSX의  태그안에 key=value형태로 전달되어 집니다.

사용하는 방법도 서로 다르구요.

props와 state의 비교는 여기까지만 하구요.

이제 state에 대해서 좀 더 알아 보도록 하겠습니다.

1-2. State

props와 달리 state는 외부에서 값이 전달되지 못하고, 생성자에서 만들어 집니다.

아래와 같이 this.state으로 정의한 값을, 

다시 this.state으로 접근해서 값을 불러올 수 있습니다.

2.  SetState

그럼 생성자에서 초기화한 값을 어떻게 변경할 수 있을까요?

setState을 이용하면 됩니다.

컴포넌트에서 메소드를 만들고, 그 메소드에서 this.setState()해주면 됩니다.

한가지 더 해야하는 작업이 있습니다.

컴포넌트 클래스에서 이벤트 핸들러를 만들 경우에,

생성자에서 bind메소드를 사용해서 this를 컴포넌트로 bind해 주는 작업입니다.

JSX에서 this를 사용할 때는 주의가 필요한데요.

만약 bind를 하지 않으면, this는 undefined가 되버립니다.

아래도 비슷한 경우인데, boolean값을 toggle하였습니다.

ReactJS에서 state를 이용하는 방법에 대해서 정리해 보았습니다.

추가적인 부분에 대해서는 이 글에서 계속 정리하도록 하겠습니다.

2.  정리

이제 state에 대해서 알게 되었으니,

이전 글에서 정리했었던 props와 state를 같이 사용할 수 있다면,

여러가지 형태로 ui를 그리고 업데이트 할 수 있습니다.

예를들면, 유저가 무언가를 선택하면 그 값에 따라서 UI를 변경해 주려고 한다고 가정하겠습니다.

유저가 선택하는 UI를 그려주는 ComponentA와 

ComponentA를 import해오고 반영된 결과 값을 보여주는 ,

render()를 해주는 ComponentB를 만들어 줍니다.

ComponentB에서는 state를 set할 메소드를 만들어서

ComponentA에서 변경된 값을 받아서 반영할 수 있도록 하구요.

ComponentA에서는 ComponentB에서 만든 인자를 가진 EventHandler를 props를 이용해 전달받아서,

유저가 선택을 할 때, 전달받은 eventHandler의 인자를 이용해 이벤트값의 타겟밸류를 받아 값을 전달해주고,

이 값이 B의 state값을 변경하며 setState이 UI를 다시 렌더링 해주어 화면이 업데이트 되도록 해주는 것인데요.

말로는 조금 복잡하지만, props와 state를 통해서 이러한 일들을 할 수 있으므로,

오늘 정리한 state가 매우 중요한 개념이라는 것을 알 수 있겠네요.