절차적인 개발(HOW)
예를 들어, 집 청소를 한다고 가정하자.
절차적인 집 청소
1. 창문을 열고 환기시킨다.
2. 청소기를 돌린다.
3. 걸레질을 한다.
4. 설거지를 한다.
5. 빨래를 한다.
이렇게 집 청소를 어떻게 해야하는지, 목표를 위해서 어떻게 개발해야 하는지에 초점을 맞춘 개발 방식이다.
📌 절차적인 개발은 디버깅할 때 어떤 부분이 잘못되었는지 절차 하나하나 다시 뜯어봐야 한다. 집 청소를 완료하고 집이 그닥 깨끗해지지 않았다. 그럼 절차적인 집 청소는 빨래하는 절차에서 문제가 생겼는지, 걸레질을 하는 절차에서 문제가 생겼는지 봐야한다.
절차적인 개발로 로그인 버튼을 만들어 id 값이 true라면 버튼을 활성화 시키기
- id를 작성할 input태그를 DOM으로 가져온다.
- 사용자의 정보를 가져온다.
- input 태그에 작성하는 값과 사용자의 id값이 일치하는지 비교한다.
- 결과값이 true라면 버튼을 활성화 시킨다.
- 결과값이 false라면 버튼을 비활성화로 유지한다.
선언적인 개발(WHAT)
선언적인 집 청소
1. 깨끗해진 집의 모습을 상상하며 그린다.
2. 그 그림을 로봇에게 전달한다.
여기서 로봇은 React이다. 어떻게가 아닌 무엇이 되면 되는지 즉, 최종 결과물을 선언하면 된다. 우리가 생각한 웹 페이지의 모습에 대한 결과를 신경쓰지 그것을 어떻게 만들어가는지는 로봇이 해준다.
📌선언적인 개발에서 디버깅은 내가 그린 깨끗한 집의 모습과 현재 로봇이 완료한 집 청소를 보고 차이점이 있다면, 그 차이점만 콕 집어서 로봇에게 수정하거나 더 깨끗이 청소하라고 전달한다.
선언적인 개발로 로그인 버튼을 만들어 id 값이 true라면 버튼을 활성화 시키기
- id 값 등 최종적으로 UI에 그려질 재료들을 가져오고 그 재료들이 만들어낼 결과물을 선언한다.
해당 재료들의 값이 바뀌면 자동으로 React가 UI를 업데이트한다.
결론은!
우리가 원하는 결과물을 선언해주기만 하면 React가 알아서 UI를 업데이트 해준다!!!
Front-end Developer