# pure function
React component의 순수성이란
Component를 순수하게 유지하자 > 순수 함수(Pure function)는 계산만 수행합니다. 그러므로 component를 순수 함수로만 엄격하게 작성하면, 코드 베이스가 커짐에 따라 함께 올 수 있는 각종 버그들과 예측 불가능한 동작을 피할 수 있습니다. 순수 함수 효과를 얻기 위해서 따라야할 몇 가지 규칙이 있으며, 지금부터 알아보겠습니다. 순수성 함수형 프로그래밍에서는 순수 함수가 다음의 특성을 따릅니다. 호출되기 전에 존재했던 객체나 변수는 변경하지 않습니다. 즉 자기 자신에 대해서만 생각합니다. Input이 같으면 output도 같습니다. Input으로 같은 값이 주어지면, 순수 함수는 항상 같은 결과를 반환해야 합니다. 이미 우리는 수학에서 순수 함수와 비슷한 것을 본 적이 있습니다. > y=2x 일 때, 만약 x=2 라면, y는 언제나 4입니다. 만약 x=3 이라면, y는 언제나 6입니다. 만약 우리가 JavaScript
순수함수(Pure Function)란?
순수함수의 조건 다음의 두 가지 조건을 만족하는 함수를 말합니다. 동일한 인자에 대해 항상 동일한 값을 반환합니다. 즉, 함수가 수행될 때 인자값 외에 다른 외부 상태나 변수에 의해 영향을 받지 않습니다. 함수가 수행되는 동안 인자나 외부 상태를 변경하지 않습니다. 즉, 함수가 호출되면 인자값을 받아 연산을 수행하고 결과값을 반환하며, 이때 인자값이나 외부 상태를 변경하지 않습니다. 순수함수의 장점 함수의 예측가능성을 높인다 순수함수는 함수형 프로그래밍에서 중요한 개념 중 하나로, 부작용(Side Effect)이 없고 안정적인 동작을 보장하기 때문에 코드의 테스트, 추론, 병렬 처리 등을 쉽게 할 수 있습니다. 또한, 순수함수는 같은 인자값에 대해 항상 같은 결과값을 반환하기 때문에 캐싱이나 메모이제이션 등을 이용하여 성능을 개선할 수 있습니다. 순수함수의 예시 다음은 순수함수의 예시입니다.
[개념] 호이스팅, 순수함수
호이스팅 참고: 모던 자바스크립트: 선언하기 전 사용할 수 있는 var MDN Hoisting > 호이스팅: 변수가 끌어올려지는 현상.var로 선언한 모든 변수는 함수의 최상위로 끌어올려짐. 변수의 선언과 변수에 값을 할당하는 단계를 분리한 후, 모든 변수/함수 선언을 해당 스코프의 최상단으로 끌어올리는 것 => 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있음. var var로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 가짐 var선언은 함수가 시작되는 시점(전역 공간에선 스크립트가 시작되는 시점)에서 처리됨 단 변수 선언(var)은 호이스팅되지만 변수에 값을 할당(=)하는 경우는 호이스팅되지 않음 >

리액트와 순수함수
부수효과 부수효과란 함수가 만들어진 목적과는 다른 효과 또는 부작용이다. 더 쉽게 말하면함수에 예상할 수 없는 일이 생길 가능성이 존재한다면, 이 함수는 부수 효과를 가질 수 있는 함수가 된다. 이 부수효과가 있는 함수를 비순수 함수라고 한다 함수의 안팎에서 뭔가 예기치 않은 일이 생길 가능성이 있는 함수는 순수함수가 될 수 없다. 비동기 요청을 보내는 함수는 요청이 실패할 가능성이 있다. 입력을 포함하는 함수도 입력에 따라 출력이 달라질 가능성이 있기 때문에 순수함수가 될 수 없다. 매개변수로 들어온 값을 직접 변경하는 함수 역시 순수함수가 될 수 없다. 배열과 같은 참조 자료형 객체를 어떤 함수 안에서 직접 변경한다면, 나중에 이 객체를 인자로 받는 다른 함수의 작업에 영향을 미칠 수 있기 때문이다. 순수함수 함수의 매개변수로 들어온 값을 직접 변경하는 것을 피하기만 해도, 순수함수를 만들 수 있다. 매개변수에 대한 직접 조작을 피하는 이유
함수형 프로그래밍
먼저 함수형 프로그래밍의 특징을 알아보자. 1. 순수함수(pure function) 동일한 입력에는 항상 같은 값을 반환해야 하는 함수 함수의 실행이 프로그램의 실행에 영향을 미치지 않아야 하는 함수 함수 내부에서 인자의 값을 변경하거나 프로그램 상태를 변경하는 Side Effect가 없는 것 위와 같은 예제에서는 add라는 함수 안에서 전역으로 선언된 변수인 num을 참조하기 때문에 순수함수라고 볼 수 없다. 위와 같이 add의 함수가 프로그램 실행에 영향을 미치지 않고 입력 값에 대해서만 값의 변환이 있으므로 순수함수이다. > 순수 함수는 프로그램의 변화 없이 입력 값에 대한 결과를 예상 할 수 있어 테스트가 용이하다. 2. 비상태, 불변성 (Stateless, Immutability) 함수형 프로그래밍에서의 데이터는 변하지 않는 불변성을 유지해야 한다. 데이터의 변경이 필요한 경우, 원본 데이터 구조를 변경하지 않고 그 데이터의

Functional Programming
OOP 다음으로 떠오르는 패러다임인 FP에 대해서 알아보자. 물론 FP는 OOP보다 먼저 등장했다. 그렇다면 갑자기 왜 등장하게 되었을까? FP의 장점과 개념을 이해하면서 알아가보자. Functional Programming 자료 처리를 수학적 함수의 계산으로 취급 상태와 가변 데이터를 피함 변수가 없다. Side-Effect가 없음 잘못된 code로 인한 오작동의 의미가 아님 실행 결과 상태 변화를 일으키는 모든 것 해당 코드의 실행으로 인해 결과값을 변경시킬 수 있는 모든 것 Function이란? 변수 x와 y사이의 관계 매핑(사상) 떠오르는 Paradigm OOP이후 가장 큰 패러다임 중 하나 SDK에도 들어가는 개념 Functional Programming 스타일을 사용한다고 해서 Functional Programming을 한다고 할 수 없음 동일한 문제의 해법에 대해 새로운 시각이라

[CS] React 데이터 흐름 Day-30
React 데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작하는 것입니다. 상향식(bottom-up)으로 앱을 만듭니다. 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다.(컴포넌트 계층 구조로 나누는 것이 가장 우선순위가 됩니다.) 컴포넌트는 트리 구조입니다. 컴포넌트 외부에서 props를 이용해 데이터를 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있습니다. 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 이때 데이터의 흐름은 하향식(top-down)을 의미합니다. 단방향 데이터 흐름(one-way data flow)는 React를 대표하는 설명 중 하나입니다. 변하는 값과, 변하지 않는 값이 있습니다. 사용자

Side Effect
Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기합니다. Pure Function (순수 함수) 순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없습니다. 순수 함수에는 네트워크 요청과 같은 Side Effect가 없습니다 그래서 예측 가능한 함수이기도 합니다. Q) Math.random()은 순수 함수가 아닙니다. 왜일까요? Math.random은 어떤 결과값이 나올지 예측이 불가능하기 때문에 순수 함수가 아니다. Q) 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요? 네트워크 상황, 서버상태에 따라 응답코드가 달라지기 때문에 예측이 불
useEffect
1. Side Effect(부수효과) 부수효과란, 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말한다. ex) React 컴포넌트에서의 Side Effect 타이머 사용(setTimeout) 데이터 가져오기(fetch API, localStorage) 2. Pure Function(순수함수) 순수함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다. 또한 순수함수는 입력으로 전달된 값을 수정하지 않는다. 순수함수에는 네트워크 요청과 같은 Side Effect가 없다. 순수 함수의 특징 중 하나는, 어떠한 전달인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다. 그래서 예측 가능한 함수이기도 하다. Q. Math.random()은 순수함수 일까? No. 같은 input에 대한 output이 늘

Pure function: Redux reducer
함수형 프로그래밍이란? 함수형 프로그래밍이란 성공적인 프로그래밍을 위해 부수 효과를 미워하고 조합성을 강조 하는 프로그래밍 패러다임이다. 함수형 프로그래밍의 목적은 4단계에 걸쳐 말하고 있다. > - 부수 효과를 미워한다. => 순수 함수를 만든다. > - 조합성을 강조한다. => 모듈화 수준을 높인다. > - 순수 함수 => 오류를 줄이고 안정성을 높인다. > - 모듈화 수준이 높다. => 생산성을 높인다. 여기서 말하는 조합성이란 단어는 모듈의 독립성으로도 대체 할 수 있을거 같다. 결국 모듈의 수준을 높이기 위해 모듈의 독립성과 응집력을 높입니다. 모듈화 수준이 높아지면 얻을 수 있는 효과로는 기획 변경의 대응력을 높이고, 오류를 줄이고 다른 모듈에 영향이 가지 않도록 하여 생산성과 안정성을 확보 할 수 있다. Pure Function? 리덕스(Redux)가 함수형 프로그래밍(functional programming)의 “순수 함수(pure functio

[프론트엔드 면접 문제 은행] 부수함수, 순수함수란?
순수함수란? 순수함수(pure function)이란 순수 입력과 순수 출력으로 구성된 함수이다. 순수함수는 부수 효과(side-Effect)가 없는 함수로, 사이드 이펙트가 없다는것은 어디서나 동일한 출력을 갖는것을 말합니다. 부수함수란? 외부의 상태를 변경하는 것 또는 함수로 들어온 인자의 상태를 직접 변경하는 것 위 함수는 순수 함수가 아닙다. 함수 외부에 있는 c의 값이 변하면 pure()함수에 같은 값을 입력해도 값이 변하기 때문입니다. 허나 c가 값이 변하지 않는 const로 선언 되어 있다면 순수 함수라고 할수 있습니다. 또 다른 예를 들어보겠습니다. 입력값과 출력값에 대한 변화가 없기 때문에 처음에는 순수 함수 인줄 알았습니다.
콜백 대신 동기로 ajax 호출하기
IE를 안 쓰는 당신은 축복받은 사람 ajax 호출을 할 때 async-await는 이제 기본이겠죠? 하지만 이런 경우가 아직도 왕왕 있답니다. > IE를 지원해야 해야 하는데, babel, polyfill을 쓸 수 없음 오.. 😭 (왜인지 묻지 말아요 더 슬프니깐요 😭😭) 소프트웨어의 성능과 편안한 개발을 트레이드-오프 해봅시다 콜백 지옥 대신 소프트웨어 성능을 '약간'! 낮추는 것으로 편안한 개발을 지킬 수 있답니다. async: false 때문에 getInfo()에서 blocking이 발생할거에요. 그치만 이 웹이 api 호출이 충분히, 충분히 빠를 경우 UI의 즉시성이 다소 훼손되어도 괜찮을 경우 소프트웨어의 성능을 개발의 편안함으로 트레이드-오프 할 수 있을 것 같습니다. 안티 패턴 아닐까요? 저는 순수함수를 굉장히 좋아합니다! 함수의 파라미터와 결과만 생각하면 되거든요. 순수함수로 개발하는 것은 정말로 편