프론트엔드 개발자가 되기위한 여정 -36

이정우·2022년 10월 22일
0

frontend-bootcamp

목록 보기
38/60

밸!하~

밸로그 여러분 안녕하세요!

오늘은 React Currying에 대해서 알아보겠습니다!

react는 다양한 라이브러리들과 기법들을 지원하고있는데요!
그중 오늘 소개드릴 개념은
리액트에서 정말 많이 사용되는 개념입니다!

바로
react currying이라는 기법인데요

그럼 바로 알아볼까요??

react currying 이란?

currying기법은 바로
인자가 여러개인 함수의 일부인자를 고정시키는 새로운 함수를 만드는 기법입니다!
도대체 무슨말 일까요??

글로 설명드리는것보다 코드를 보는 게 훨씬 이해가 쉽겠죠??

한번 봐볼까요??

function first(hello,world){
 console.log(`${hello},${world}`)
}

이 함수는 단순히 hello와 world라는 두개의 인자를 받아서 출력해주는 단순한 형태의 함수입니다
자 여기에 한번 커링을 적용시켜 볼까요??

function first(hello){
	return function(world){
     console.log(`${hello},${world}`)
};
}

const printHello=helloFunc("hello")
PrintHello("철수")
// hello, 철수

자 이렇게 아까의 함수에서 커링을 적용하면
이렇게 n개의 인자를 받던 함수가 n개로 쪼개진것을 확인할수있겠죠?

즉 함수의 특정 인자를 고정시켜서 어떤 단어를 출력해줄시 설정해준것과 같다는거죠

다시말해 커링기법이란것은 일부인자에 같은 값을 반복적으로 사용할때 그 반복되는 인자를 고정함으로써 중복을 최소화 하기에 적합한 기법이라고 할수있겠습니다!!


이렇게 커링의 개념이 무엇이고 어떻게 사용할지에 대해 알아보았는데요

여기 React currying에는 주의할 점이 있습니다

바로

인자의 순서가 매우중요하다는 겁니다!
왜그럴까요?

만약 고정되어있는 인자가 알고보니 자주 바뀌게되는 인자라면 어떻게될까요??

일일히 커링을 다시 적용을 시켜주셔야겠죠??

그렇기 떄문에
변동가능성이 적은 인자는 앞에, 변동 가능성이 높은 인자는 뒤에 배치해야한다는 겁니다!!

자 오늘의 포스팅은 여기까지입니다

오늘은
리액트에서 자주 사용되는 기법인 커링에 대해서 알아보았는데요
커링을 사용해서 특정부분을 고정적으로 그리고 동적으로 사용할수도있지만
주의점이 있었죠
바로 순서가 중요하다는것 잊지않았으면 좋겠습니다!!

오늘도 지식한개 쌓아가보게요!

그럼 이만

밸~바!

profile
주니어 프론트엔드 개발자

0개의 댓글