728x90
반응형

코딩 공부/React 10

[React] 3.3.4 고차 함수(함수형 프로그래밍의 개념) - 가온 코딩

Higher Order Functions(고차 함수) 함수형 프로그래밍의 핵심 개념인 1. 불변성(immutability) 2. 순수성(purity) 3. 데이터 변환(transformation) 4. 고차 함수(Higher Order Functions) 5. 재귀(recursion) 중 4. 고차 함수 에 대해 설명하겠다. 함수형 프로그래밍에는 고차 함수가 꼭 필요하다! 고차 함수는 다른 함수를 조작할 수 있는 함수이다. 다른 함수를 인자로 받을 수 있거나 함수를 반환할 수 있고, 이 2가지를 모두 수행하기도 한다. 고차 함수의 분류는 다른 함수를 인자로 받는 함수이다. Array.map, Array.filter, Array.reduce는 모두 다른 함수를 인자로 받기에 고차 함수에 해당 된다. 1. ..

코딩 공부/React 2022.07.26

[React] 3.3.3 데이터 변환(함수형 프로그래밍의 개념) - 가온 코딩

Transforming Data(데이터 변환) 함수형 프로그래밍의 핵심 개념인 1. 불변성(immutability) 2. 순수성(purity) 3. 데이터 변환(transformation) 4. 고차 함수 5. 재귀(recursion) 중 3. 데이터 변환에 대해 설명하겠다. 데이터가 변경 불가능하다면 애플리케이션에서 데이터를 가지고 어떻게 뭘 할 수 있을까? 함수형 프로그래밍은 한 데이터를 다른 데이터로 변환하는 게 전부이다. 그래서, 함수를 사용해 원본을 변경한 복사본을 만들어내는 방식을 사용한다. 그렇게 순수 함수를 사용해 데이터를 변경하면, 덜 명령형인 코드가 되고 복잡도도 감소한다. 어떻게 데이터를 변환해서 다른 데이터를 만들어낼 수 있을까? 자바스크립트 언어 안에는 이미 그런 작업을 할 수 있..

코딩 공부/React 2022.07.25

[React] 3.3.2 순수 함수(함수형 프로그래밍의 개념) - 가온 코딩

함수형 프로그래밍의 핵심 개념인 1. 불변성(immutability) 2. 순수성(purity) 3. 데이터 변환(transformation) 4. 고차 함수 5. 재귀(recursion) 중 2. 순수성에 대해 설명하겠다. 순수 함수(pure Functions)는 파라미터에 의해서만 반환값이 결정되는 함수를 뜻한다. 순수 함수는 최소한 하나 이상의 인수를 받고, 인자가 같으면 항상 같은 값이나 함수를 반환한다. 순수 함수에는 부수 효과(side effect)가 없다. 부수 효과란 전역 변수를 설정하거나, 함수 내부나 애플리케이션에 있는 다른 상태를 변경하는 것을 말한다. 순수 함수는 인수를 변경 불가능한 데이터로 취급한다. 순수 함수를 이해하기 위해 순수하지 않은 함수를 먼저 하나 살펴보자. 1. Im..

코딩 공부/React 2022.07.25

[React] 3.3.1 불변성(함수형 프로그래밍의 개념) - 가온 코딩

함수형 프로그래밍의 핵심 개념인 1. 불변성(immutability) 2. 순수성(purity) 3. 데이터 변환(transformation) 4. 고차 함수 5. 재귀(recursion) 중 불변성에 대해 설명하겠다. Immutability(불변성) mutate 라는 영어 단어는 변한다는 뜻이다. 따라서 immutable는 변할 수 없다는 뜻이다. 함수형 프로그래밍에서는 데이터가 변할 수 없고 불변성 데이터는 결코 바뀌지 않는다. 1. Mutations 색에 평점을 메기는 함수를 만든다고 했을 때, 함수는 넘겨받은 color 객체의 rating 을 변경한다. let color_lawn = { title: "lawn", color: "#00FF00", rating: 0 } function rateColo..

코딩 공부/React 2022.07.25

[React] 3.1 함수형이란 무엇인가? - 가온 코딩

함수형 프로그래밍이라는 개념은 1930년대에 발명된 람다 계산법(lambda calculus)이 시작이라 할 수 있다. 17세기 함수가 등장한 이래 함수는 계속해서 계산법(calculus)의 일부였다. 함수를 함수에 넘기거나 함수가 함수를 결과로 내놓는 것도 가능하다. 다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 복잡한 함수를 고차 함수(high order function)라고 부른다. 1930년대에 알론조 처치(Alonzo Church)는 미국 프린스턴 대학교에서 람다 계산법을 발명하고, 고차 함수를 활용한 여러 가지 연구를 진행했다. 1950년대 말 존 맥카시(John McCarthy)는 람다 계산법에서 비롯된 개념을 활용해 새로운 프로그래밍 언어를 만들었는데, 바로 그 언어가 ..

코딩 공부/React 2022.07.25

[React] ES6 객체와 배열 스프레드 연산자 [...] - 가온 코딩

스프레드 연산자(spread operator)는 3개의 점(...)으로 이뤄진 연산자로, 몇 가지 다른 역할을 담당한다. 먼저, 스프레드 연산자를 사용해 배열의 내용을 조합할 수 있다. ex) 두 배열이 있다면, 두 배열의 모든 원소가 들어간 세 번째 배열을 만들 수 있다. 1. 배열과 스프레드 연산자 // Spread Operator // var peaks = ["Tallac", "Ralston", "Rose"] // var canyons = ["Ward", "Blackwood"] // var tahoe = [...peaks, ...canyons] // console.log(tahoe.join(', ')) // "Tallac, Ralston, Rose, Ward, Blackwood" let arr1 =..

코딩 공부/React 2022.07.23

[React] ES6 객체와 배열 객체 리터럴 개선 - 가온 코딩

1. 객체 리터럴 개선 객체 리터럴 개선(object literal enhancement)은 구조 분해의 반대이다. 구조를 다시 만들어내는 과정 또는 내용을 한데 묶는 과정이다.이를 사용하면 현재 영역에 있는 변수를 객체의 필드로 묶을 수 있다. // Literal Enhancements var name = "Tallac" var elevation = 9738 var funHike = {name,elevation} console.log(funHike) 한글예시 const name = "탈락"; // 캘리포니아에 있는 산 const elevation = 9738; // 고도(단위: 피트) const funHike = {name, elevation}; console.log(funHike); // {name:..

코딩 공부/React 2022.07.23

[React] ES6객체와 배열 구조 분해를 사용한 대입 - 가온 코딩

리액트에서는 ES2016부터 객체와 배열을 다루는 방법과, 객체와 배열 안에서 변수의 영역을 제한하는 방법을 다양하게 제공하기 시작했다. 이런 기능으로는 구조 분해(destructuring), 객체 리터럴 개선, 스프레드 연산자(spread operator) 등이 있다. 1. 구조 분해 구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있다. 아래 sandwich 객체에는 4개의 필드가 있는데 그 중에서 bread와 meat의 필드값만 필요한 상황이다. // Destructuring Assignment var sandwich = { bread: "dutch crunch", meat: "tuna", cheese: "swiss", toppings: ["lettuce", "tomato"..

코딩 공부/React 2022.07.22

[React] ES6에서의 변수 선언 let 키워드 - 가온 코딩

구문적인 변수 영역 규칙 lexical variable scoping 을 지원하는 let 키워드 구문적인 변수 영역이란? 자바스크립트에서는 중괄호 {} 를 사용해서 코드 블록을 만드는데, 이때 함수는 별도의 변수 영역을 이룬다. 하지만, if/else 문의 경우 예외적이다. 다른 언어에서는 if/else의 블록도 별도의 영역을 구성할 것으로 생각되겠지만 실제로 그렇지 않다. if/else 블록 안에서 변수를 새로 만들면, 그 변수의 영역이 그 블록 안으로만 한정되지 않는다. [그림1] if 안에 있는 topic 변수를 var로 바꾸었더니 if 밖에 있는 topic에도 영향을 미치는 경우 // Variables cannot be scoped to code blocks var topic = "자바스크립트";..

코딩 공부/React 2022.07.22

[React] ES6에서의 변수 선언 const 키워드 - 가온 코딩

변수 선언하기 ES2015 전에는 var을 사용하는 것이 이전에는 유일한 변수 선언 방법이었다. 그러나 ES6부터 상수(contant)가 도입되었다. 상수는 값을 변경할 수 없는 변수이다. 일단 선언하면 상수로 선언된 값을 변경할 수 없다. // The value of a variable can change var pizza = true pizza = false console.log(pizza) // ES6 introduces constants const pizza = true pizza = false console.log(pizza) 참고자료 러닝 리액트(Learning React), 알렉스 뱅크스, 한빛미디어 (2021)

코딩 공부/React 2022.07.22
728x90
반응형