명령형 프로그래밍(Imperative Programming)과 선언형 프로그래밍(Declarative Programming)은 두 가지 주요 프로그래밍 패러다임이다
명령형 프로그래밍
"어떻게(How)" 작업을 수행해야 하는지를 명시적으로 세부적으로 기술한다
명령어들이 순차적으로 실행되며, 각 단계에서 상태를 변경하는 방식으로 동작한다
특정 작업의 세부적인 제어가 필요한 경우에 더 적합하다
예시: C, Java, Python과 같은 대부분의 프로그래밍 언어, 절차적 프로그래밍
let string = 'THis is the midday show with Cheryl Waters';
let urlFriendly = "";
for(let i = 0 ; i < string.length ; i++){
if(string[i] === " "){
urlFriendly += "-";
}else{
urlFriendly += string[i];
}
}
console.log(urlFriendly);
선언형 프로그래밍
프로그램이 "무엇(What)"을 하는지를 명시하며 "어떻게(How)"를 상세하게 정의하지 않는다.
함수, 메서드, 컴포넌트로 선언
상태 변경에 대한 추상화 수준이 더 높아서 코드가 더 간결하고 이해하기 쉽다
예시: SQL, 리액트(React)와 같은 UI 라이브러리이다
const string = 'This is the midday show with Cheryl Waters';
const urlFriendly = string.replace(/ /g, '-');
console.log(urlFriendly);
이렇게 보니 선언형 프로그래밍에 대해 다음과 같이 정리할 수 있었다.
- 선언형 프로그래밍은 원하는 결과물에만 집중하고, 그 과정에 대해서는 추상화를 통해 깊게 알려하지 않는다.
- 명령형 프로그래밍보다 한눈에 코드가 더 잘 읽힌다. 명령형 프로그래밍의 경우 인간 컴파일러 마냥 한 줄 한 줄 코드를 읽어나가면서 앞으로 어떤 일이 발생할지에 대해 예측한다. 반면 선언형 프로그래밍의 경우 방법은 잘 모르겠지만 어떤 일이 발생할 지 한 순간에 예측 가능하다.
- 즉, 선언적 프로그래밍이 더 읽기 쉽고 예측이 쉽다.
리액트 JSX
리액트의 JSX는 비 선언적인 부분의 캡슐화를 통해, 명령형 프로그래밍적인 부분을 선언형 프로그래밍적으로 바꾼다.
JSX의 문법 자체가 선언형 프로그래밍이라기보다는, JSX를 통해서 우리는 컴포넌트를 표현하고 이 컴포넌트를 사용하는 쪽에서는 <ReviewPage /> 이렇게 쓰게 된다.
그렇다면 코드를 읽는 개발자는 return 부분을 쭉 보면서 '아 ReviewPage 컴포넌트의 내부 로직을 자세히는 모르겠지만, Review와 관련된 페이지구나!'라고 이해할 수 있다. 이런 점에서 JSX는 선언형 프로그래밍이라고 보는 것 같다
'React' 카테고리의 다른 글
React에서 다국어 지원하기 (0) | 2024.08.21 |
---|---|
React로 채팅앱 구현 시 스크롤 맨 아래로 내리는 법 (0) | 2024.04.16 |
[React] TTF, OTF 폰트 적용하기 (0) | 2023.12.05 |
Manifest: Line: 1, column: 1, Syntax error 에러 해결하기 (0) | 2023.12.04 |
CRA에서 .less파일 사용하기 (0) | 2023.10.30 |