관리 메뉴

프로그래밍 삽질 중

[러닝리액트 2판] 3장 자바스크립트를 활용한 함수형 프로그래밍 1 본문

과거 프로그래밍 자료들/React

[러닝리액트 2판] 3장 자바스크립트를 활용한 함수형 프로그래밍 1

평부 2022. 6. 9. 23:23

 

* 러닝리액트 2판 내용 중 노트에 정리한 부분을 다시 옮기는 글

* 모든 내용을 담고 있지 않음

* 책 자체가 예시도 있으나(색 바꾸기, 체크박스 등) 주로 이론 중심

 

 

ㅇ 문서 객체 모델(DOM) : 명령적 접근(Imperative) 코드가 많아지거나 새로운 기능 추가나 규모의 확장이 어려움

-> 선언적 접근(Declative) 중심(리액트)으로 이루어지는 편, 리액트의 경우 render 함수를 통해 컴포넌트에 있는 지시에

따라 DOM을 생성함

 

 

1
2
3
4
5
const rateColor = (color, rating) => ({ //color는 변형 불가능한 객체
    ...color,
    rating
}) 
//중괄호({})는 바로 객체를 반환하지 못함, 괄호가 필요함
cs

 

1
2
3
4
5
const addColor = (title, list) => [...list, {title}]
 
//첫 번째 list : 새로운 배열에 복사(...list)
//두 번쨰 {title} : title 파라미터로 받은 값을 title 프로퍼티로 하는 객체를 배열에 추가
 
cs

 

ㅇ 순수함수 : 파라미터에 의해서만 반환값이 결정되는 함수

최소한 하나 이상의 인수를 받음, 인자가 같으면 항상 같은 값이나 함수 반환

 

ㅇ 순수함수의 조건

1. 파라미터를 최소 하나 이상 받아야 함

2. 값이나 다른 함수를 반환할 것

3. 인자나 함수 밖에 있는 다른 변수를 변경하거나 입축력 수행해서는 안 됨

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
const korea {
    name: '서울',
    canRead: false,
    canWrite: false
}
 
const selfEducate= (country) => ({
    ...country, canRead = true, canWrite = true
})
 
 
console.log(selfEducate(korea)) //{name: '서울', canRead: true, canWrite: true}
console.log(korea); //{name: '서울', canRead: false, canWrite: false}
cs