'선언형 프로그래밍으로 이해하기 쉬운 코드 작성하기'에서는 선언형 프로그래밍의 개념과 선언형 프로그래밍을 통해 리액트에서 이해하기 쉬운 코드를 작성하는 방법에 대해 나와있다.
이 아티클을 읽고 내가 지금까지 명령형 코드를 많이 써왔다는 걸 알게 되었다. 그래서 아티클을 읽은 후, 플랜 빙고 ver. 0.1.15 업데이트에서는 기존의 명령형 코드를 선언형 코드로 바꾸는 작업을 했다.
이 포스팅에서는 아티클 내용 일부를 요약&정리 및 내가 어떻게 리팩토링했는지 쓸 예정이다.
선언형 프로그래밍과 명령형 프로그래밍
1) 선언형 프로그래밍
선언형 프로그래밍(Declarative Programming)이란 원하는 결과를 묘사하는 방식으로 코드를 작성하는 프로그래밍 패러다임이다.
다음은 자바스크립트를 사용해 배열에서 짝수만 필터링하는 예제이다.
이 예시에서는 짝수를 어떻게 필터링해야 하는지가 아닌, 짝수를 필터링한 결과를 얻는 것에 초점이 맞춰져 있다.
➡️ 선언형 프로그래밍은 '데이터를 어떻게 조작해야 하는지'가 아니라, '원하는 데이터는 무엇인지'에 집중한다.
선언형 프로그래밍의 장점
- 전체적인 가독성과 추상화 수준을 높여 개발자가 문제의 본질에 집중할 수 있도록 도와준다.
- 재사용성이 높고 병렬 처리가 유리하다.
2) 명령형 프로그래밍
명령형 프로그래밍(Imperative Programming)이란 선언형 프로그래밍과 대비되는 개념으로 '코드가 어떻게 동작해야 하는지'를 작성한다.
다음은 위의 코드 예시를 명령형으로 작성한 것이다.
이전의 선언형 프로그래밍 예제와 달리 문제를 해결하는 과정이 중점이 된다. 이처럼 명령형 프로그래밍에서는 상태와 제어 흐름을 명시적으로 관리하는 방식으로 코드를 작성한다.
➡️ 따라서 코드의 가독성이 저하되거나 재사용성이 낮아질 수 있다.
선언형 코드 작성을 위한 몇 가지 방법
1) 자바스크립트에서 제공하는 메서드 활용하기
자바스크립트는 선언형 코드를 작성할 수 있는 메서드를 제공한다.
대표적으로 map(), filter(), some(), every() 등이 있다.
예시1. 찾고자 하는 지원자 이름이 지원자 목록에 있는지 확인하는 기능
-
명령형 코드인 경우
-
some()을 활용한 선언형 코드인 경우
예시2. 사용자가 제출한 약관 배열이 모두 동의되었는지 확인하는 코드
-
명령형 코드인 경우
-
every()를 활용한 선언형 코드인 경우
필수 약관에서 모든 약관에 동의했는지 확인할 땐 다음과 같이filter()와every()를 함께 사용할 수 있다.
2) Concurrent UI 패턴 사용
리액트(18v 기준) Error Boundary와 Suspense를 활용하여 Concurrent UI 패턴을 사용할 수 있다. 상세한 내용은 다음 포스팅(2023.07.12 포스팅)에서 작성하겠다.
플랜 빙고 코드에서는?
나는 자바스크립트에서 제공하는 메서드를 활용하여 명령형 코드를 선언형 코드로 리팩토링하였다.
리팩토링 전
다음은 리팩토링 전의 코드 일부이다.
share 페이지에서 '링크 공유하기'버튼을 누르면 공유될 링크(shareUrl)가 만들어진다.
이 코드는 shareUrl에 빙고 이펙트 효과에 관한 정보를 넣기 위해 작성한 코드이다.
정리하면 다음과 같다.
trueBArr이란 빈 배열을 만든다.- 빙고 이펙트 효과 작동 여부가 true인 것을
trueBArr배열에 넣는다.for문을 이용하여shareUrl에 빙고 이펙트 효과에 관한 정보를 넣는다.
수많은 if문과 for문을 보면 딱 봐도 명령형 코드인 것을 알 수 있다.
리팩토링 후
나는 다음과 같은 순서로 리팩토링했다.
1. 빙고 이펙트 효과에 관한 이름 변경(예: b123 ➡️ bingo123).
2. 따로 getBingoUrlArr라는 함수를 만들어서, 빙고 이펙트 효과에 관한 정보를 얻는 기능을 분리했다.
3. getBingoUrlArr 안에서 map()을 활용하여 선언형 코드로 리팩토링.
4. trueBingoArr(기존의 trueBArr)에 getBingoUrlArr(BingoData)의 return 값을 할당.
5.join() 메소드를 활용하여shareUrl에 들어가야할 정보를 더해줬다. (⬆️ 위 코드 참고)
이렇게 선언형 코드를 알고 선언형 코드로 리팩토링하게 되어서 코드의 가독성이 더욱 높아졌다.
다음 포스팅(2023.07.12 포스팅)에서는 Concurrent UI 패턴을 활용하여 코드를 리팩토링한 과정을 포스팅하겠다.
