본문 바로가기

공부/react

React 입문 5 (명령형, 선언형)

반응형

 

명령형 프로그래밍 vs 선언형 프로그래밍 📖

선언형 프로그래밍

선언형 프로그래밍은 원하는 결과를 묘사하는 방식으로 코드를 작성합니다.

 

아래 예시는 자바스크립트를 이용해 배열에 짝수만 필터링하는 간단한 예제입니다.

이 코드는 evenNumbers라는 새로운 배열을 만들어, filter메서드를 이용해 짝수만 필터링해 저장합니다. 

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);

 

이 예시는 짝수를 어떻게 필터링해야 하는지가 아닌, 짝수를 필터링한 결과를 얻는 것에 초점이 맞춰져 있는데요.

 

선언형 프로그래밍의 특징✨

데이터를 어떻게 조작해야 하는지가 아니라 원하는 데이터는 무엇인지에 집중

 

선언형 프로그래밍 스타일로 코드를 작성하면 전체적인 가독성추상화 수준을 높여 문제의 본질에 집중할 수 있도록 도와줍니다.

 

 

명령형 프로그래밍

명령형 프로그래밍은 코드가 어떻게 동작해야 하는지를 작성합니다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = [];

for(let i = 0; i < numbers.length; i++) {
  const number = numbers[i];
  
  if(number % 2 === 0) evenNumbers.push(number);
}

console.log(evenNumbers);

 

이 예시는 numbers 배열의 길이만큼 반복, 만약 number가 2로 나누어떨어지면 evenNumbers 배열에 number변수를 push 해 문제를 해결하는 과정을 작성한 코드입니다.

 

이처럼 명령형 프로그래밍에서는 상태와 제어 흐름을 명시적으로 관리하는 방식으로 코드를 작성합니다. 따라서 코드의 가독성이 저하되거나, 재사용성이 낮아질 수 있어 코드 관리에 많은 노력이 필요합니다.

 

 

그럼 선언형으로 코드를 작성하는 게 더 좋은 방법인가❓

`선언형 프로그래밍`

 

코드의 가독성과 유지 보수를 향상시킬 수 있지만 문제 해결을 위한 알고리즘의 세부 사항을 직접 제어할 수 없기 때문에 성능 저하나 예기치 못한 동작을 불러일으킬 수도 있습니다.

 

`명령형 프로그래밍`

 

코드의 복잡성이 증가해 유지 보수가 어렵지만, 프로그램의 세부적인 제어 흐름을 결정할 수 있어 정확한 결과를 얻을 수 있는 장점이 있습니다.

 

따라서 현재 프로젝트에서 해결하고자 하는 문제의 성격, 요구사항 등을 고려해 사용하는 것이 좋습니다.

 

반응형

'공부 > react' 카테고리의 다른 글

React 숙련 3 (Memoization)  (0) 2024.08.16
React 숙련 2 (react hooks)  (1) 2024.08.16
React 숙련 1 (styled-components)  (0) 2024.08.16
React 입문 6 (DOM, VirtualDOM)  (0) 2024.08.09
React 입문 4 (불변성)  (0) 2024.08.09
React 입문 3 (Props, State)  (0) 2024.08.09
React 입문 2 (컴포넌트, jsx)  (0) 2024.08.08
React 입문 1 (SPA, CSR, SSR, 라이브러리)  (0) 2024.08.08