[멋쟁이 사자처럼 프론트엔드 스쿨] 64일차 TIL - 순수 함수, 부수 효과, 이벤트 핸들러, 버블링

🍰 5일 전 수업이지만 열심히 생각해내서... 써야 한다.

🍴 순수 함수

• 함수가 호출되지 전에 존재했던 객체나 변수는 변경하지 않음.
• 같은 입력이 주어지면 같은 결과를 반환해야 함.
• React 컴포넌트는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정함.
• => 같은 입력이 주어지면 반드시 같은 JSX를 반환한다는 뜻.
• 그럼 누가 순수함을 보장하는가? => 우리가 규칙을 지켜야 함.

🍫 어떤 게 순수 함수인데?

const plus = (x, y) => x + y;

위 함수는 1, 2를 넣는다고 가정했을 때 1, 2를 몇 번을 넣어도 결과는 항상 동일하게 3이 나온다.

• 컴포넌트(함수)는 순수한 로직만 가져야 함.
• 순수한 로직 => 컴포넌트를 렌더링 하는 것. 렌더링 프로세스는 리액트의 DOM을 생성하기 때문에 순수해야 함.
• 순수하다 => 리액트에 관한 렌더링만 해야 함.

 

🍴 부수 효과(Side Effects)

• 동일 입력임에도 결과가 동일하지 않음.
• 함수가 실행될 때 함수 외부의 상태를 변경하거나 외부의 상태에 의존함.
• 함수의 실행 시점에 따라 함수의 결과나 외부 상태가 달라질 수 있게 만듦.

🍫 부수 효과 예시

• 부수 효과 = 사용자와 상호작용
• 전역 변수의 값을 변경
• 함수 내부에서 파일 읽기/쓰기
• API 호출 등 외부 시스템과의 상호작용
• 콘솔 출력 등

let counter = 0;

function increment() {
  counter += 1; // 전역 변수인 counter를 변경함 (부수 효과)
  return counter;
}

console.log(increment()); // 1
console.log(increment()); // 2 (이전 호출의 결과에 의존)

 

🍴 함수형 프로그래밍의 장점

• 코드 단순해짐
• 테스트가 용이함(예측 가능)
• 부수 효과와 분리

🍫 그럼 시간이 흐름에 따라 데이터가 변경되는 건 어디서 처리해야 하나?

1. 이벤트 핸들러 - 사용자가 action 하는 것. 모든 action이 일어나는 곳.
2. 이펙트 함수

🍴 이벤트 핸들러(Event Handler)

이벤트 핸들러는 그럼 어디에 정의해야 하는가?

• 컴포넌트 내부에 작성해야 함(또는 JSX 내부에서 inline으로)
• 컴포넌트 body(함수 몸체) - React rendering process 관련된 것만 작성
• 컴포넌트 body 내부 - Side Effect(부수 효과) 처리 함수, React rendering process와 연관 없는 것 처리
• 이벤트 핸들러(이벤트 객체는) 매개변수 맨 마지막에 들어와야 함
• 이벤트 핸들러는 사이드 이펙트를 위한 최고의 위치임
• 함수를 렌더링 하는 것과 다르게 순수할 필요가 없기 때문에 무언가를 변경하기 최적의 위치다

선생님 필기

🍴 버블링

: 리액트는 기본적으로 버블링을 지원함. 캡처링 하려면 -> onClickCapture 사용하기

• 이벤트 전파 중지 -> stopPropagation()