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

2020. 2. 4. 15:27·강의노트

※이글의 예시들은 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";

 

'강의노트' 카테고리의 다른 글

react dependencies와 앱 스타일링  (2) 2020.02.21
map/filter/reduce에 대해 알아보기 +find,findIndex  (0) 2020.01.30
react 설치  (0) 2020.01.22
리액트 컴포넌트(react component)  (2) 2020.01.22
리액트 inline 스타일링  (0) 2020.01.22
'강의노트' 카테고리의 다른 글
  • react dependencies와 앱 스타일링
  • map/filter/reduce에 대해 알아보기 +find,findIndex
  • react 설치
  • 리액트 컴포넌트(react component)
권끼리마끼리
권끼리마끼리
  • 권끼리마끼리
    끼리마끼리의 개발노트
    권끼리마끼리
    • 분류 전체보기 (60)
      • 트러블슈팅 (5)
      • 프로젝트 개선 (6)
      • 강의노트 (19)
      • 웹 접근성 (27)
      • 웹개념 파보기 (3)
  • hELLO· Designed By정상우.v4.10.0
권끼리마끼리
리액트에서의 상태| Declarative vs Imperative programming
상단으로

티스토리툴바