[React] useState hook 실습

[React] useState hook 실습

useState hook 실습 내용

저번 게시글에서 확인한 useState를 실습해보려고 한다.

실습 내용은 아래와 같다.

• 1. state 정상 변경 - 렌더링 확인
• 2. state 비정상 변경 - 렌더링 확인
• 3. object type state 변경 - 렌더링 확인

 

실습 코드가 필요한 경우 핵심 코드만 작성할 것이다.

전체 코드는 링크해둔 url에서 확인할 수 있다.

 

◆ state 정상 변경 (setState)

전체 코드 보러가기

state 값을 변경할 때는 setState를 이용해야 하는 것을 배웠다.

예를들면 아래와 같이 변경해야한다.

이렇게 setState를 이용해 state를 변경한 결과는 아래와 같다.

count 증가 버튼을 클릭하면 count가 증가하는 것을 볼 수 있다.

추가로 state가 변경되었으니 render count도 증가하는 것을 확인할 수 있다.

(+ render count가 1로 시작하는 이유는 처음 화면 렌더링이 되었기 때문이다.)

즉 setCount로 count를 변경하니 count도 잘 변경되었고 렌더링이 된 것을 확인할 수 있었다.

그러나 count를 직접 변경하면 어떻게 될까?

 

◆ state 비정상 변경 (직접 변경)

전체 코드 보러가기

state를 비정상적으로 변경하는 것은 직접 state의 값을 변경하는 것이다.

예를들면 아래와 같다.

아래 이미지는 위 코드와 같이 state를 직접 변경한 결과이다.

콘솔 창을 보면 count, render count 값이 변하지 않는다.

즉 렌더링이 다시 되고 있지 않다는 것이다.

그러나 count 값은 1씩 정상적으로 증가되고 있다.

사용자는 count를 0으로 알고 있는데 실제 값은 변하고 있는 것이다.

이러한 문제를 방지하기 위해 state는 꼭 setState로 변경해야 한다.

만약 렌더링할 필요가 없는 변수이면 일반 변수 let, const를 사용하면 된다.

 

◆ object type state 변경

전체 코드 보러가기

object type을 변경하는 경우이다.

이 경우는 주소 값을 변경한 경우와 아닌 경우로 비교할 수 있다.

(+ 전체 코드를 확인 !)

아래 이미지를 보면 렌더링 X의 경우 object의 주소 값을 변경하지 않은 경우이고

렌더링 O의 경우 object의 주소 값을 변경한 경우이다.

결과를 보면 주소 값이 변경이 되어야지만 렌더링이 일어나는 것을 확인할 수 있다.

따라서 꼭 object type의 경우 새로운 배열이나 객체를 만들어야 한다는 것을 기억하자.

 

◆ 정리 및 다음 게시글 소개

이번 게시글은 state 실습을 하였다.

1. setState를 이용하여 state 값을 변경해야지만 렌더링 하는 것을 확인하였다.

2. object type의 경우 새로운 배열이나, 객체를 만든 후 setState를 해야하는 것을 확인하였다.

다음 게시글에서는 useState hook을 이용하여 동적 테이블을 구현해보자.

 

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.