[React] state(상태)와 React 프로그래밍 방식

React 는 실시간으로 상태값이 변동됨에 따라 스타일, 구성, 및 구조가 변경되기 때문에 상태 변동에 예민합니다.
예를 들어 물이 일정 수준의 온도 이하로 내려가면 얼음이 되고, 다시 온도가 올라가면 물이 되듯이 React도 어떠한 상태에 따라 결과가 변하게 됩니다.
이런 상태를 state 라고 합니다.
state를 변경할 때마다 새로이 동작되는 React 프로그래밍 방식에는 대표적으로 선언적 프로그래밍, 명령형 프로그래밍 두 가지가 있습니다.

 

 

Declatative Programming (선언적 프로그래밍)

var isDone = false;

function strike() {
  isDone = true;
}

function unStrike() {
  isDone = false;
}

function App() {
  return (
    <div>
      <p style={isDone ? { textDecoration: "line-through" } : null}>Buy milk</p>
      <button onClick={strike}>Change to strike through</button>
      <button onClick={unStrike}>Change back</button>
    </div>
  );
}

 

선언적 프로그래밍은 코드를 작성할 때 사용자 인터페이스 state가 달라질 때, 혹은 다른 조건에서 어떻게 보여져야 하는지 선언하고 변동된 조건이나 상태에 따라 적용하는 프로그래밍 방식입니다.

위의 예시 코드를 보자면, isDone 이라는 boolean 타입의 state를 가지고 있는 변수가 존재하고 이를 변동시켜주는 strilke 함수, unStrike 함수가 존재합니다.
strike 버튼을 누르게 되면 isDone 상태값이 true 로 변하게 되고, unstrike 버튼을 누르면 isDone이 false 로 state가 변동하게 되며, 이에 따라 삼항 연산자로 isDone 의 상태값을 확인한 뒤 조건에 따라 인터페이스 스타일이 바뀌게 됩니다.

 

 

Imperative Programming (명령형 프로그래밍)

function strike() {
   document.getElementById("root").style.textDecoration = "line-through";
}

function unStrike() {
   document.getElementById("root").style.textDecoration = null;
}

function App() {
  return (
    <div>
      <p>Buy milk</p>
      <button onClick={strike}>Change to strike through</button>
      <button onClick={unStrike}>Change back</button>
    </div>
  );
}

명령형 프로그래밍은 말 그대로 상태가 변동되어 보여질 인터페이스 영역에 직접적으로 명령해서 결과를 업데이트시키는 프로그래밍 방식입니다.

위의 예시 코드를 보면, 삼항 연산자로 변동될 때마다 유기적으로 변동되던 선언형 프로그래밍 방식과 다르게 명령형 프로그래밍은 버튼을 누를 때마다 유저 인터페이스에 직접적으로 명령하여 상태를 업데이트 시킵니다.

 

 

어느 프로그래밍 방식이 맞는지 안맞는지는 중요하지 않습니다.
하지만 제가 개인적으로 생각했을 때 상태값을 지정해두고 변경 시 그 때마다 적용되는 선언형 프로그래밍 방식이 조금 더 React 에 효율적이지 않나 싶습니다.
또한 지금 예시 코드로 상태값을 변동할 시 스타일이 실시간으로 바뀌어야 하지 않느냐 하고 생각할 수도 있겠지만 아직은 아닙니다.
현재 위의 코드 요소들은 렌더링 중이고 변경할 수 없기 때문에 변화를 주기 위해서는 다시 렌더링을 해야 합니다.
그러기 위해서는 hook(훅)이라는 기능을 사용해야 합니다.
다음에는 hook에 대해서 알아보겠습니다.