티스토리 뷰

React

:Taste the principles of functional programming in React


이 글은 원작자 David Kopal의 허락을 맡고 https://www.codinglawyer.io/posts/taste-the-principles-of-fp-in-react 번역한 글입니다.


(본인이 의역한것도 있으므로, 잘못된 번역 피드백 주시면 감사하겠습니다! 감사합니다)



지속가능한 컴포넌트 구조는 안정적인 react application을 개발할때, 선행되어야하는 필수요건입니다. 이러한 것은 higher-order-components (HoCs) 고차 컴포넌트를 사용하면서, 즉 함수형으로 코드를 짜면서 이뤄낼수 있습니다.


이러한 아이디어는 당신의 컴포넌트에서 로직을 분리하기 위함입니다. 이러한 패턴을 사용하게 되면 결국, 재사용 가능한 컴포넌트이면서 읽기 쉬운 컴포넌트를 제작 하게 되고, 각각의 컴포넌트를 오직 하나의 task를 책임지는 테스트 하기 쉬운 컴포넌트로 제작할수 있게 됩니다.


하나 또는 여러개의 HOC 활용 함으로써, Presentational 컴포넌트의 성능을 향상 시켜 함수형 프로그래밍을 활용하는 방법 대해서 배울 있을 뿐 아니라 이러한 함수형 패턴의 기본 원리도 이해하게 될 것입니다.


| Let's get started


React 프로그래밍을 할때 FP의 원리를 도입해야 하는 이유를 보여주기 위해, 이글에서 FP의 중요한 여러 개념들에 대해서 말할 것입니다. 이 아이디어는 프로그램을 작은 함수로 분해 하고, 이것들을 하나의 애플리케이션으로 합치는 것입니다. 따라서, 모두 함수 그자체에 대한 것이고, 더 정확히는 간단한 함수에 대한 것입니다. 이것은 각각의 함수가 오직 하나의 task에 대한 책임을 가져야 하는것입니다. 함수가 더 간단해 질수록 더 재사용이 가능해집니다.


Higher Order Functions


자바스크립트에서는, 당신은 다른 값들처럼 함수를 사용 할 수 있습니다. 함수의 인자로서 넘겨질수 있으며, 또한 다시 return 될수도 있습니다. 함수를 return하거나, 새로운 함수를 만드는 함수를 higher-order-function (고차함수) 라고 합니다.


const numbers = [1, 5, 8, 10, 21]
const createAddingFunction = number => arr => arr.map(num => num + number)
const numbersPlusOne = createAddingFunction(1)
console.log(numbersPlusOne(numbers))  // [2, 6, 9, 11, 22]

createAddingFunction 함수는 higher-order-function(고차함수) 입니다. 이 함수는 number 변수를 받아 배열이 받아지길 기다리는 함수를 return하게 됩니다.


위 예 에서,  1 을 넘겨주어 array를 기다리는 함수를 return 하게 됩니다. 우리는 이것을  numberPlusOne 이라는 것으로 저장하게 됩니다. 그러면, 우리는 numbers 라는 배열을 전달하고, 함수는 반복하여 각각의 요소들을 1씩 증가시켜 주게 됩니다. 이코드는 자명(self-explanatory)합니다. 위의 예제를 보면 당신은 코드가 즉시 어떻게 동작할지 알게 됩니다.


이러한 코드들을 declarative하다고 부르게 되는것입니다. Functional Programming은 이러한  declarative한 코드에 대한 것입니다.


Avoid side effects


함수형 프로그래머로서, 당신은 가능한 당신의 함수에서 side effect를 피하고 싶을 것입니다. 다른 말로는, 함수는 그 함수 자체에게 local 변수가 아닌것들은 바꾸지 말아야 합니다.


당신은 이러한 함수들을 당신의 application 어디에서든 쉽게 재사용 할 수 있습니다. side effect가 없는 함수들은 pure하다고 부르게 됩니다. 그들은 항상 같은 인자들에 대해서 같은 결과를 내게 됩니다. 


만약 당신이 순수함수를 작성하고 싶으면, 당신은 값들을 변경하는것을 피해야 할것입니다. 이러한 것은 immutability (불변성) 라고 부르곤 합니다. 그러나, 이것은 반드시 값들을 변경하지 말아야 하는것을 의미하는것이 아닙니다. 값들을 변경하고 싶으면 기존값을 변경하는것이 아니라 새로운 값을 만들어 내야 한다는 것을 의미하게 됩니다.


그러나, 자바스크립트에서는 객체나 배열과 같은 값들은 변경이 가능합니다. immutability의 원리를 따르려면, 우리는 값들을 immutable 하게 다뤄야 합니다. 예를 들어 이 원리를 고수하기 위해서, 당신은 함수에 인자로 들어온 객체를 갑자기 변경시킬 수 없을 것입니다.

// pure function
const numbers = [1, 5, 8, 10, 21]
const createAddingFunction = number => arr => arr.map(num => num + number)
const numbersPlusOne = createAddingFunction(1)
console.log(numbersPlusOne(numbers))  //[2, 6, 9, 11, 22]
console.log(numbers)  // [1, 5, 8, 10, 21]

// impure function
const numbers = [1, 5, 8, 10, 21]
const numbersPlusOne = numbers => {
  for(let i = 0; i < numbers.length; i++) {
     numbers[i] = numbers[i] + 1
  }
  return numbers
}
numbersPlusOne(numbers) // [2, 6, 9, 11, 22]
console.log(numbers) // [2, 6, 9, 11, 22]


여기 우리는 순수한 (이전과 같은 예제) 함수와 순수하지 않은 함수의 예가 있습니다. 처음 시나리오에서는 순수함수에 전달된 배열인  numbers 배열에 아무런 영향이 없었습니다.


그러나 두번째 시나리오에서는, 순수하지 않은 함수 내에서 배열은 변경되었습니다. 이러한 행동들은 우리의 코드들을 예측 불가능하게 만들어 버립니다. 그리고, 특별히 함수형 프로그래밍 영역에서는 이것을 피하려 합니다.



| Composition


이제는, 우리는 간단한 순수 함수를 만들 수 있게 됩니다. 그러나, 만약 우리가 필요한 행동은 복잡해서 로직이 하나의 함수에 저장될수 없다면 어떻게 할것인가요? 우리는 이것을 몇몇 함수들을 합쳐 새롭게 혼합된 함수를 composition을 활용해 해 낼 수 있습니다.

const number = 15
const increment = num => num + 5
const decrement = num => num - 3
const multiply = num => num * 2

const operation = increment(decrement(multiply(number)))
console.log(operation)  //32
Composition 값을 첫번째 함수에 전달하고 또 그결과를 두번째 함수에 전달하는 것을 말합니다, 이러한 결과는 세번째 함수에 전달되고 이렇게 계속 진행되게 됩니다.

위의 예제에서는, 세개의 함수가 있습니다. 우리는 그들을 안쪽에 감싸게 됩니다, 그리고 우리는 number 를 기다리고 있는 혼합 함수를 만들게 됩니다. Composition을 활용하면, 우리는 하나의 함수에서 결과를 저장할 변수를 만들 필요가 없어지게 됩니다.


Combined


함수형 프로그래밍의 장점을 모두 얻으려면, 당신은 이것들을 모두 함께 합칠 필요가 있습니다.


이상적으로는, 당신의 application은 data들이 immutable하게 다뤄지는 순수함수들로 구성되어 있어야 합니다. 그것들은, 상위 scope을 변경시키지 말아야 하며, 자유롭게 당신의 프로그램에서 그것들을 자유롭게 재사용할수 있어야 합니다. 


각각의 함수들은 하나의 task에 대해서만 책임을 가지고 있어야 하며, 각각 분리되어 있어야 합니다. 당신은 그러한 순수함수들을 사용하거나, 복잡한 기능을 구현하는 상황에서는 순수함수들을 compose 하여 원하는 기능을 구현하게 됩니다.


함수형 원리를 따르면서 당신은 간단하고 재사용 가능하며, 혼합 가능한 함수들을 만들수 있을 것입니다. 또한 이러한 패턴을 활용해 더욱 더 재사용 가능한 컴포넌트로 제작 된 application을 만들수 있을것입니다 :)



댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
TAG
more
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함