State를 통한 컴포넌트 상태 관리

전체 코드는 아래를 참고 하도록 한다.

github.com/mypiece/react-example

mypiece/react-example

---

리액트에서 상태를 관리하는 방법은 두가지가 있다.

전역적으로 관리가 필요하거나 상태를 관리하는 과정에서

api호출을 통해 외부데이터와 동기화 되어야 하는 경우에는 리덕스를 사용하고

컴포넌트 내부에서만 관리하면 되거나 외부데이터와 동기화가 필요없다면 State를 사용한다.

 

아래 Counter가 State를 이용해 상태관리를 한다.

 

Counter.js 파일이 최종 렌더링되는 컴포넌트 파일이며

내부에서 Counter 함수를 정의했고 리턴값으로 JSX 문법으로 작성된 View를 리턴하도록 되어 있다.

HTML 과 비교해서 onclick 지시어가 onClick로 선언된 것만 다르다.

 

State는 아래와 같이 선언한다.

이렇게 하면 해당 컴포넌트 내부에서 초기값이 0인

count 라는 상태값을 가지게 되며 setCount 함수로 상태를 변경할 수 있게 된다.

const [count, setCount] = useState(0);

 

실제로 +1, -1 버튼의 이벤트가 아래와 같이 정의되어 

버튼 클릭시마다 count 값이 증/감 하게 된다.

const onIncrease = () => {

  setCount(count+1);
}

const onDecrease = () => {
  setCount(count-1);
}

 

상태값은 JSX에서 아래와 같이 표현 되었는데

위에서 설명했듯이 상태와 컴포넌트는 옵저버 패턴처럼 연결되어 있기 때문에

위에 정의한 onIncrease, onDecrease 이벤트로 상태값만 바꿔주면

리액트에서 자동으로 이를 인지해서 화면을 리렌더링 해준다.

<h1>{count}</h1>

jsp, jQuery 환경에서 jsp에 JSTL로 선언된 상태값을 바꾸려면

상태값을 바꾸고 화면을 다시 읽어오거나 비동기통신으로 상태를 바꿨다고 하더라도

DOM을 직접 조작했어야 할텐데 리액트에서는 그냥 상태값만 바꿔주면

리액트가 알아서 DOM에 적용해준다.