K-Pen과 함께 골을 넣어보자! 상태관리 'State'!

안녕하세요! 크레이입니다.

지난 시간, 리액트의 기본 코드를 살펴보고, 화면에 글자를 띄워봤는데요.
마지막에 제가 살짝 흘렸던 말, 기억하시나요?
"버튼을 누르면 화면이 바뀌거나 계산을 하는 건 조금 복잡해요."

죄송합니다! 사실은 초심자분들에게는 많이 복잡할 수 있습니다^^..
집중하면서 몇번 반복해서 봐주셔야 이해하실수 있습니다만,
실습만 성공하셔도 큰 성과이니 100% 이해하지 못해도 결코 낙담하지 마세요 ㅎㅎ

오늘은 그 '복잡하지만 아주 중요한' 친구,
바로 '스테이트(State=상태)'를 만나볼 시간입니다.

📝 그냥 글씨 쓰기 vs 디지털 점수판

축구 경기 좋아하시나요?
저는 딱히 어느 팀 팬은 아니지만 월드컵에서는 단연 한국 편을 듭니다.
그러다 '골~'을 넣으면 아싸~ 하고 환호를 지르지요!
여러분도 그러신가요 ^^..

우리가 종이에 연필로 "점수 : 0"이라고 썼다고 가정해보죠.
경기가 진행되어서 점수가 1점이 났습니다.
종이에 쓴 글씨가 저절로 "점수 : 1"로 바뀔까요? 절대 아니죠.
지우개로 지우고 다시 써야 합니다.

그런데 종이가 아닌 전자 점수판은 어떤가요?
심판이 버튼 하나만 딱 누르면, 전광판의 숫자가 0에서 1로 순식간에 바뀝니다.

리액트에서 말하는 State(상태)가 바로 이 '전자 점수판의 숫자'와 같습니다.
우리가 버튼을 눌러서 "숫자 바꿔!"라고 명령만 하면, 리액트가 알아서 샥- 바꿔주거든요.

💻 초간단 전광판 준비

나선 김에 State로 전자 전광판을 직접 만들어보죠!
K-Pen 에 처음 접속하시면 기본 코드가 보이실텐데요.
https://cray7.mycafe24.com/k-pen/

 

먼저 점수판을 만들어보겠습니다.
'안녕, 리액트 문구'를 지우고 아래 내용을 입력합니다.
복붙하셔도 좋고 타이핑하셔도 좋습니다.
타이핑을 자주 하시면 손이 코드를 기억합니다 ^^

<h1>점수 : 0</h1>

우측 화면에 점수판이 만들어졌고 큼지막한 글씨가 나왔습니다.

이어서 '골'을 넣는 버튼도 추가해보죠!
아래 코드를 추가합니다.

<button>골!</button>

이제 화면은 이와 같이 보이실텐데요.

현재는 아무 것도 작동하지 않는 고정된 화면일 뿐이지요.
우리는 이제 여기에 생명을 불어넣을 겁니다.

💻 상태 변수 준비!

점수 옆의 '0'이란 숫자가 바뀔 수 있는 값이 되게 하려면 'State(상태)'로 관리할 수 있게 바꿔주어야 하는데요.
2가지를 해주시면 됩니다.

1번 영역에 [상태변수, 상태변수변경함수] 를 규칙에 맞게 선언합니다.
2번 영역에 '상태변수'가 들어갈 곳을 {상태변수}라고 적어줍니다.

1번부터 해볼까요?
아래 코드를 1)번 영역에 적어주시면 되는데요.

const [score, setScore] = useState(0)

여기서 score 는 상태변수입니다.
setScore는요? 상태변수변경함수라고 잠시 후에 보실 겁니다.

이어서 2번을 진행해보죠.
점수 : 옆의 '0'을 이렇게 바꿔주시면 됩니다.

점수 : {score}

자, 이제 점수 옆의 숫자는 상태변수가 된 상태이며 상태변수 이름은 'score' 입니다.
아직 화면에는 변화가 없을텐데요.

💻 상태변수 변경함수 준비!

현재 상태변수 score 에는 '0'이란 값이 들어 있고 컴퓨터는 이렇게 기억하고 있습니다.

이제 버튼에 마법을 심을 겁니다. 역시 2단계로 구성됩니다.
1번 영역에 '함수'를 만듭니다.
2번 영역 버튼에 '함수'를 연결합니다.

1번부터 진행해보죠. 1번 영역에 상태 변수 score를 1 증가하는 함수 코드를 추가합니다.

function Goal(){
  setScore(score + 1)
}

2번 영역 <button> 태그에 onClick={Goal}을 추가합니다.

이제 완성되었습니다!
작동해볼까요?

버튼을 눌러 보세요.
그러면 신기하게도 점수가 올라가는 것을 보실수 있습니다.

💻 무신 원리여?

자, 이제 개념을 이해할 시간입니다.
이 개념을 이해하시면 리액트의 엄청난 코딩 내공이 한차례 쌓이시는 건데요.

score 라는 상태변수는 코드 내에서 이렇게 연결되어 있습니다.

그리고 화면과도 이렇게 연결되어 있지요.

이 score 상태변수의 값을 0에서 다른 값으로 바꿔주기면 하면 화면에도 바로 바뀌게 되는데요.
상태변수 값을 바꾸려면 상태변수 변경 함수를 사용헤야 합니다.
바로 이 녀석이지요. ( setScore )

버튼을 클릭하면 어떤 일이 일어나는지 봅시다.
'골!' 버튼을 클릭하면 코드내의 onClick 이라는 녀석이 이를 감지합니다.
개발 용어로 '클릭 이벤트'라고 부르지요.

onClick 이벤트는 연결된 Goal 이란 함수로 점프! 합니다.

그리고 Goal 함수 코드를 실행하는데요.
그 범위는 중괄호로 시작한 곳 { 부터 중괄호로 끝나는 곳 } 까지입니다.

여기서는 단 한줄 setScore( score + 1 ) 이 실행되는데요.
이 setScore 는 score 상태변수 값을 변경하는 상태변수 변경함수입니다.

만일 score 상태변수에 0이란 값이 들어 있다면 score + 1 은 0 + 1로 해석되어, 1을 전달하고
1이란 값이 들어 있다면 1 + 1로 해석, 2를 전달하는 데요.
전달하는 값으로 score 상태변수 값이 바뀌게 됩니다.

※ 기본 자바 스크립트를 익히신 분은 주의!
 리액트에서 상태변수를 변경할 때는 'score = score + 1' 와 같은 문법은 사용할 수 없어요!

그리고 score 상태변수가 바뀌었기 때문에 연결된 부분도 같이 바뀌는 것이지요.

이 부분은 복잡하니 다시 한번 그림 4장으로 깔끔히 정리해볼께요^^

score 상태변수는 이렇게 연결되어 있습니다.

버튼을 클릭하면, onClick 이라는 클릭 이벤트가 이를 감지, Goal 함수를 호출하고

함수 내의 코드 setScore 한줄이 실행됩니다.
여기서 score 상태변수의 값이 0이라면 score + 1 은 0 + 1로 해석되어 1이 전달되고,
값이 1이라면 score + 1 은 1 + 1 로 해석되어 2가 전달됩니다.

그래서 결국 바뀐 값이 표시가 되는 겁니다.

여기까지가 리액트의 State(상태)에 대한 설명입니다.
아마 처음 코드를 익히시는 분은 막막하고 이해가 어려우실 수 있습나다.
저도 처음에 그랬으니까요^^

하지만 코드를 반복해서 보고 또 보다 보면 머리가 그 패턴을 기억하고 이해하게 되니,
어렵더라도 좌절은 금물입니다^^

마무~리

오늘은 리액트의 큰 내공력 스테이트(State)에 대해 알아보았습니다.
도전과 열정을 갖고 계신 분께 숙제를 내어 드리려 합니다.
현재 '골!' 버튼은 1점을 올리는 기능인데요.
'빽골!'버튼을 추가하여 클릭하면 1점이 감소되게 해주세요.
잘 안되신다면 소스 전체를 댓글로 달아주시면 봐드리겠습니다.

"성공하면 상품도 있나요?"
"상.. 상품요.. 그냥 내공 쌓으시는 셈.. 앗 저기 펭귄이!" ( 후다닥- 바람과 함께 사라짐 )

---

성경 말씀 한 구절 공유드립니다.
새로운 배움 앞에서 두려움보다 기대함이 가득하시길 소망합니다!

너의 행사를 여호와께 맡기라 그리하면 네가 경영하는 것이 이루어지리라

• 잠언 16:3 -