[React🌌] 리액트 공식문서 함께 읽기 📘 / 4️⃣ - 리액트는 순수함수다 /

순수함수란?

 순수 함수는 함수형 프로그래밍에서 자주 사용되는 개념입니다. 함수 중에서도 함수 내부의 명령들을 실행했을 때, 외부에 영향을 주지 않는 함수들을 순수함수라고 하죠. 전역 변수를 건들인다거나, 들어온 input 상태를 바꾼다거나 하면 전부 순수함수가 아닙니다! 함수형 프로그래밍은 input => output / output이 다시 다른함수의 input 으로 =>  output / 이런식으로 구현이 되기 때문에 함수는 들어온 input 에 맞게 정해진 일을 해서 그에 따른 output 을 내놓아야만 합니다!

 

순수함수의 예

 

function sub(n1, n2) {
  return n1 - n2;
}

Input인 n1 과 n2 에 따라 정해진 output 을 반환하고, 외부에 전혀 영향을 주지 않기 때문에 순수함수입니다.

n1 - n2 계산을 한다고 하더라도 n1 은 call by value로 들어온 것이기 때문에 상관이 없습니다.

 

순수함수가 아닌 함수의 예

 

function objectSub(target, m) {
  target.key -= m;
}

위 함수는 target 객체의 key 값을 변화시키고 있습니다. 이 함수의 input으로 들어갈 때의 target과 이 함수가 끝나고 외부에서의 target은 달라져있겠죠? 따라서 순수함수가 아닙니다!

 

요약

1. 순수함수는 input -> output 으로 구성돼있다. (input, output은 void 일 수도 있다)

2. 순수함수는 외부 변수나 상태에 영향을 미치면 안된다.

3. 순수함수는 input 의 상태를 변화시키면 안된다. (input을 계산에 사용하는거랑은 다릅니다.)

4. 함수형 프로그래밍에서의 핵심 개념이다.

 

---

 

리액트는 순수함수

저는 함수형 컴퍼넌트를 사용하기 때문에, 클래스형에 대한 언급은 하지 않겠습니다. 공식문서를 보면

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

그러면 앞서 말했던 것을 바탕으로 생각해보죠. 함수형 컴퍼넌트에서의 input 은 부모 컴퍼넌트에서 내려준 props들 이고, output은 JSX 컴퍼넌트입니다. 함수형 컴퍼넌트 요약 3번에 따라 input, 즉 props들을 변화시키면 안된다는 뜻입니다!

props들은 단지 읽기 전용으로 사용하는 것이 좋습니다. 변화가 필요한 것은 반드시 state를 사용해야합니다! props를 변화시켜야 되는 상황이라면, props의 값을 state에 복사하는 방식이 있겠죠?

 

---

요약

 

1. 리액트 컴퍼넌트는 순수함수처럼 동작해야한다.

2. 부모로부터 받은 props를 변화시키면 안된다.

3. 기능적으로 변화시키는게 필요하다면 state를 이용한다.

 

 

 

---

 

 | 리액트 공식문서 함께 읽기 📘 | 

2020/08/24 - [컴퓨터 지식/생각해 볼만한 것] - [개발일기] 한 단계 더 도약하자 / 리액트 공식문서 함께 읽기 0️⃣ - 도입

2020/08/24 - [웹 개발/React] - [React🌌] 리액트 공식문서 함께 읽기 📘 / 1️⃣ - JSX 없이 사용하는 리액트

2020/08/28 - [웹 개발/React] - [React🌌] 리액트 공식문서 함께 읽기 📘 / 2️⃣ - 리액트를 사용하는 여러 방식 /

2020/09/04 - [웹 개발/React] - [React🌌] 리액트 공식문서 함께 읽기 📘 / 3️⃣ - 엘리먼트란?

 

 | 리액트 개발 관련 🌀 | 

2020/08/17 - [웹 개발/React] - [React🌀] React로 2048 게임 만들기 ! / 1️⃣ - 기본 세팅 및 소개 / Clone Coding

2020/07/30 - [웹 개발/React] - [React🌌] React + Ant Design + TypeScript 적용하기! / antd 사용

2020/01/17 - [웹 개발/React] - [React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅

2020/07/20 - [웹 개발/React] - [React] 마우스 비밀번호 입력기🖱 / 키보드 보안 입력기 / 2차 비밀번호

 

 

* 출처 및 참고 : 리액트 공식 문서 https://ko.reactjs.org/ 

* 제가 직접 읽고 느낀 생각을 글로 쓰는 것이기에, 잘못된 내용이 있을 수 있습니다. 피드백과 지적은 언제나 환영합니다!