리액트에서의 상태| Declarative vs Imperative programming

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 

 

 

오늘은 declarative와 imperative programming에 대해서 포스팅해보겠다.

 

나는 투두리스트를 만들고 싶고 여기 buy carrot이라는 나의 할일이 있다. 그리고 이 할일이 끝났을 때 위 paragraph를 아래와 같이 만들고 싶다.

 

여러가지 방법이 있겠지만, 우리는 isDone이라는 bool 변수를 만들어서 그것이 true일 때와 false일 때로 나누어 ui를 변경해주려고 한다. 이를 코드로 나타내면 이렇게 할 수 있다.

 

var isDone = false;

const strikeThrough = {textDecoration : "line-through"};

return <p style={isDone ? strikeThrough : null}>Buy carrot</p>;

 

이렇게 상태에 따라 ui가 달라지도록 코드를 짜는 것을 declarative programming이라고 한다. 반면, 아래와 같이 statement를 이용하여 프로그램의 상태를 변화시키는 것을 imperative programming이라고 한다.

 

document.getElementById("root").style.textDecoration="line-through";