React 순수함수와 커링기법

인프런 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 보고 정리한 내용입니다.

---

리액트는 함수형 프로그래밍을 적극 활용

순수함수

하나 이상의 인자를 받고, 인자를 변경하지 않고, 참조하여 새로운 값을 반환

Side Effects가 없도록 구성

let tom = {
	name="tom"
	canRun=fa;se
}
//순수함수 X
// 인자도 받지 않고, 기존 객체 속성도 변경해버림
function not_pure_fn(){
	tom.canRun = true
}

//순수함수 O
//인자를 받아서 참조하여 새로운 값을 반환
function pure_fn1(person){
	return{
		...person,
		canRun:true
	}
}
function pure_fn2=(person)=>({
		...person,
		canRun:true

});

컴포넌의 많은 루틴을 순수 함수로서 작성하기를 요구

• 상탯값/속성값이 같으면, 항상 같은 값 반환
• 다른 Side Effects를 발생 시키지 말아야 함❌ (HTTP 요청 데이터 저장, 쿠키 조작 등)

컴포넌의 상태값은 불변 객체 (Immutable Object)로 관리해야만 함

• 수정할 떄에는 기존 값을 변경하는것이 아니라, 같은 이름의 새로운 객체를 생성

이를 통해, UI 개발의 복잡도를 낮추고, 버그 발생 활률을 줄임

---

커링 (Currying)

일부의 인자를 고정한 새로운 함수를 반환하는 함수를 만드는 기법

//방법 1
function userLogs(username) {
  function wrap(message) {
    console.log(`${username} - ${message}`);
  }
  return wrap;
}

const log = userLogs("Jaeho Chung");
log("Hello World");

//방법2
const userLogs = (username) => (message) => {
  console.log(`${username}-${message}`);
};
const log = userLogs("Jaeho Chung");
log("Hello World");