<aside> 🤠 컴포넌트를 순수한 함수로만 엄격히 작성하면 코드베이스가 커짐에 따라 당황스러운 버그와 예측하기 어려운 일련의 문제 상황에서 벗어날 수 있음

</aside>

순수함수의 조건

순수함수 : 주어진 처리만 진행하고 호출되기 전 존재했던 객체, 변수를 변경하지 않음, 동일한 입력, 출력을 보장함

<aside> 🤠 각 컴포넌트는 독립적으로 관리되어야 하며, 렌더링 중 다른 컴포넌트에 관여하지 않고 자체적으로 JSX를 계산해 반환해야됨 ▶️ 컴포넌트가 특정 순서대로 렌더링 될 것을 기대해선 안 됨

</aside>

Side Effects : 예측 불가능

<aside> 🤠 React는 렌더링 하는 동안 읽을 수 있는 입력의 유형 : props, state, context ▶️  이러한 입력은 항상 읽기 전용 으로 취급해야되며 사용자 입력에 대한 응답으로 무언가 변경하려면 변수가 아닌 상태를 설정해야됨

</aside>

리액트의 렌더링 프로세스는 항상 순수해야됨 컴포넌트는 JSX만 반환해야하며, 렌더링 전 존재했던 객체나 변수를 변경해선 안됨 → 이러한 상황을 mutation 이라고 합니다

▶️  렌더링 시점에 따라 다른 JSX를 생성함

let guest = 0 ;
//외부변수를 변경하는 것은 순수하지 않음
const Cups =()=>{guest += 1}
export default function TeaSet(){
	return (
		<>
			<Cups/>
			<Cups/>
			<Cups/>
		</>
	)
}

React는 개발 중에 각 컴포넌트 기능을 2번 호출하는 Strict Mode제공 ▶️ 2번 호출함으로써 순수함수규칙을 위반하는 컴포넌트 찾는데 도움

Local Mutation

: 컴포넌트 내부적으로 생성, 수정되는 것   ▶️ 렌더링하는 동안 방금 만든 변수와 객체를 변경하는 것은 전혀~ 문제가 되지 않음

const Cup = ({guest})=>{return <h2>{guest}명분의 차 준비</h2>}
export default function TeaGathering(){
	let cups = [];
	for(let i = 0 ; i<=12; i++){
		cups.push(<Cup key={i} guest={i}/>);
	}
	return cups
}

Side Effects 처리

<aside> 🤠 side effects ? 함수형 프로그래밍은 순수함수에 크게 의존하지만, 어느시점, 위치에서는 무언가 변경되어야 함 . 이러한 변경사항(화면 업데이트, 애니메이션 시작, 데이터 변경)을 사이드 이펙트라고 함 ▶️ 외부에서 발생하는 부수적인 일

</aside>

React 에서 사이드 이펙트: 이벤트 핸들러 연결에 속함. 이벤트 핸들러는 *( 버튼을 클릭하거나 / 어떤 행동을 할 때 )*React에 의해 실행되는 콜백함수로, 컴포넌트 내부에 정의되어 있지만 렌더링 중에는 실행되지 않음. → 이벤트 핸들러는 순수하지 않아도 됨

사이드 이펙트를 처리할 이벤트핸들러가 없을경우 useEffect 훅을 호출해 컴포넌트가 반환한 JSX에 연결할 수 있음. useEffect훅을 사용하면 사이드 이펙트가 필요한 렌더링 시점 이후에 React에 의해 실행 하지만 이러한 방법은 꼭 필요한 경우(DOM 접근 조작)에만 사용되어야 함⭐️