[React] State | Declarative vs Imperative Programming

우리가 만든 리액트 앱을 인터렉티브하게 하려면 어떻게 해야할까?

 

그러려면 State에 대한 개념을 이해해야 한다. 

 

방정식으로 표현해보면 

UI 즉 유저가 내 웹사이트를 보는 것은

내 앱의 state가 들어간 함수로 나타낼 수 있다.... 

 

 

 

예를 들면 

 

 

얼음과 물 둘 다 같지만

-10 일 땐 얼음으로 보여지고,

60 일 땐 물로 보여지는 듯

같은 리액트 컴포넌트지만 

value 또는 state가 얼마냐에 따라 보여지는 interface가 다르다.

 

 

---

 

 

To Do list 앱에서 유저가 할 일을 클릭하면

취소줄(line through / strikeout)이 그려지게 하는 경우 

2 가지 방법으로 실행할 수 있다. 

나오는 결과물은 같다. 

 

 

1. Declarative programming 방식 

 

 

일단 할 일을 하나 적어본다. 

 

 

 

취소선을 만들어 보았다. 

 

 

 

이제는 isDone 변수가 true 됐을 때 취소선이 생기게 하기 

 

 

 

Ternary operator를 바꿔서 쓸 수도 있다.

 

 

 

이런 식의 프로그램을 declarative programming이라고 한다. 

We're declaring when we're writing our code

how our user interface should look under different conditions dependent upon the state. 

 

 

 

2. Imperative programming 방식 

다른 스타일의 프로그래밍은 imperative 프로그래밍이다.

아이템을 찾아 직접 변화를 준다.

imperatively telling this element to do sth different. 

 

 

App().jsx에서 기본형만 남겨놓고, 

 

 

index.jsx로 가서 js로 코드를 아래와 같이 작성한다. 

똑같은 결과가 나오는 것을 볼 수 있다.

 

 

버튼을 하나 만든다. 

 

 

버튼을 눌렀을 때 취소선이 생기게 한다. 

html 로는 on-click 이지만 자바스크립트 스타일로 바꿔서 onClick으로 써준다. 

클릭시 strike() 함수를 부른다. 

 

 

버튼을 클릭하면 취소선이 그어진다.

 

 

취소선 없애는 버튼도 만들어 클릭해 본다. 

 

 

imperative 방식은 

아이템을 찾아 매번 새 벨류에 property를 세팅한다. 

 

 

---

 

declative 방식 문제점 

 

이 과정을 declarative 스타일로 해보면 다음과 같이 바꿀 수 있다. 

 

버튼을 클릭하면 isDone이 true나 false로 바뀌고 

isDone이 true이면 취소선이 그려지게 하였다. 

 

 

 

하지만.. 

이렇게 declative 방식으로 코드를 짜서

버튼을 누르면 아무리 눌러도 취소선이 생기지 않는다. 

 

 

이 element가 렌더되지만 이들은 바뀌지 않는다. 

 

 

스크린에서 보기 위해서는 style property를 바꿔야하고,

properties를 바꾸기 위해서는 스크린에서 다시 렌더를 해줘야한다. 

그러기 위해서는 Hooks가 필요하다. 

 

 

다음 포스트에서 hooks에 대해 알아보자.