리액트 질문 정리 Part 1.

순수 함수란 무엇인가?

리액트에서 순수 함수란, 상태나 props, 외부의 어떤 것도 변경하지 않는 함수를 말한다.

리액트 순수 함수 특징

1. 상태나 props 외부의 어떤 것도 변경하지 않는다.
2. 같은 인자 props 를 받으면 항상 같은 결과를 반환한다.
3. 부작용 side-effect 가 없다.
4. 렌더링 결과가 예측이 가능하다.

예시
배열의 요소를 정렬하는 utils 함수는 순수 함수이다.
항상 일관된 결과를 반환해야 하므로 순수 함수로 구현된다.

리액트에서 사이드 이펙트란?

리액트에서 사이드 이펙트란, 순수 함수와 달리 함수 외부에 영향을 미치는 동작을 말한다.
대표적인 사이드 이펙트로는 상태 변경, 네트워크 요청, 브라우저 캐시 등이 있다.

1. 라이프 사이클 메서드
   componentDidMouunt, componentDidUpdate, componentWollUnmount
2. 이벤트 핸들러
   onClick, onSubmit
3. useEffect 훅
   useEffect, useLayoutEffect

리액트에서 사이드 이펙트를 통제하기 위해서 hook을 사용한다.
hook을 사용하면, 상태 관리와 사이드 이펙트를 별도로 분리가 가능하다.

stopPropagation() vs preventDefault()

event.stopPropagation()

이벤트 전파를 중지시킨다. 이벤트 전파란 하위 element 에서 발생한 이벤트가 상위 element 로 전파되는 것을 말한다.
event.stopPropagation() 을 호출하면 이벤트가 전파되지 않으므로 상위 엘리먼트의 이벤트 핸들러가 호출되지 않는다.

event.preventDefault()

이벤트의 기본 동작을 중지시킨다.
submit 이벤트에서 폼을 제출할 때 페이지가 새로고침이 된다. 하지만, event.preventDefault()를 호출하면,
폼 제출 후 페이지가 새로고침되지 않는다.