리액트 선언형프로그래밍

✨리액트 선언형프로그래밍

프로그램은 크게 명령형 프로그래밍과 선언형 프로그램으로 나눌 수 있다.

✅명령형 프로그래밍

명령형 프로그래밍은 어떻게에 집중하여 프로그래밍하는 방법을 말한다.

명령형 프로그래밍 장점

• 직관성: 단계를 명확하게 정의하므로 개발자가 프로그래밍의 동작 방식을 쉽게 이해할 수 있음
• 유연성: 절차적인 방식으로 문제를 해결하기 때문에 다양한 제어 구조를 사용해 원하는 방식으로 프로그램을 제어할 수 있음

명령형 프로그래밍 단점

• 과정이 복잡하다면 코드 역시 복잡해질 수 있고, 예측하기 어려워짐

예시1

우리 집을 처음 오는 사람에게 우리 집에 오는 방법을 명령형 프로그래밍으로 설명해보면 다음과 같다.

@@@에서 쭉 직진하다가 다음 사거리에서 좌회전 한 후에 계속 직진하다가, @@@@가 나오면 좌회전을 한다. 그리고 쭉 직진하면 우리집이 나온다.

어떻게 집을 찾아오는지에 집중하여 길을 설명한다.

예시2

함수로 전달받은 배열 안의 값을 열 배로 증가시키는 기능의 함수를 명령형 프로그래밍으로 작성해보면 다음과 같다.

const multiplyArrayByTen = (arr) => {
  const result = [];
  for (let i = 0; i > arr.length; i++) {
    results.push(arr[i] * 10);
  }
  return result;
};

위의 코드는 과정을 중심으로 코드가 짜여졌다.

• 주어진 배열의 값을 늘리기 위해 for문을 사용
• 변수(i)와 배열의 크기(arr.length)를 사용해서 배열(arr[i])의 값을 하나씩 가져와 10배로 만든 다음 result에 추가
• 모든 작업이 종료되면 result를 반환

✅선언형 프로그래밍

선언형 프로그래밍은 무엇에 집중하여 프로그래밍하는 방법을 말한다.

선언형 프로그래밍 장점

• 가독성: 예측 가능한 코드를 작성할 수 있음
• 코드 재사용성: 함수형 프로그래밍 기법을 사용하여 모듈화된 코드를 작성할 수 있음

선언형 프로그래밍 단점

• 초보자에게는 학습할 양이 많아 개념 및 기술을 익히는데 시간이 오래 걸릴 수 있음
• 불필요한 중간 데이터 구조를 생성하는 경우에는 성능 저하가 발생할 수 있음

예시1

우리 집을 처음 오는 사람에게 우리 집에 오는 방법을 선언형 프로그래밍으로 설명해보면 다음과 같다.

우리집은 @@@시 @@@구 @@@동 @@@입니다.

우리 집자체를 설명한다.

예시2

const multiplyArrayByTen = (arr) => {
  return arr.map((item) => item * 10);
};

위의 코드는 결과를 중심으로 코드가 짜여졌다.

• map() 메소드를 사용하여 배열의 값을 10배로 만들어 반환

✅비교

명령형 프로그래밍은 그 값을 얻기 위해 어떻게 해야하는지에 포커스를 맞추고, 선언형 프로그래밍은 결과값이 무엇인지에 포커스를 맞춘다.

출처

• 현장에서 바로 써먹는 리액트 with 타입스크립트