과거 프로그래밍 자료들/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 |