반응형 순수 함수와 부수 효과2 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 77 (순수 함수와 부수 효과, 컴포넌트 부수 효과 관리) 목차순수 함수와 부수 효과(Side Effects)컴포넌트 부수 효과 관리오늘 하루를 돌아보며 순수함수와 부수 효과(Side Effects)함수는 일반적으로 입력을 받아 출력을 만들어내는 과정을 담당한다. 하지만 때로는 함수가 외부 상태에 의존하거나 외부를 변경하기도 한다. 이것을 부수 효과(Side Effects)라고 한다. 부수 효과의 예시로는 다음과 같은 것을 들 수 있다.외부 변수 변경: 함수 밖의 변수 값을 수정API 요청: 서버에서 데이터를 가져오거나 전송DOM 조작: 웹 페이지의 특정 요소 변경 부수 효과과 있는 함수는 예측하기 어렵기 때문에 버그 발생 가능성이 높다. 따라서 부수 효과가 없는 코드를 작성하고, 동일 입력에 항상 동일 출력을 반환하는 것이 견고한 프로그램을 만드는 두 가지 중.. 2025. 8. 26. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 76 (가상 DOM의 작동 방식, 컴포넌트 라이프사이클, 순수 함수와 부수 효과) 목차가상 DOM의 작동 방식컴포넌트 라이프사이클순수 함수와 부수 효과오늘 하루를 돌아보며 가상 DOM의 작동 방식가상 DOM은 실제 DOM 조작의 비효율성을 해결하기 위해 리액트가 도입한 핵심 기술이다. 실제 DOM은 변경될 때마다 전체 DOM을 다시 계산하고 그려야 해서 성능이 저하되지만, 가상 DOM은 메모리상에서 UI의 가벼운 복사본을 만들어 효율적으로 업데이트를 처리한다. 가상 DOM의 작동 원리는 다음과 같다.새로운 가상 DOM 생성: 컴포넌트의 상태(state)가 변경되면 컴포넌트가 다시 렌더링되면서 새로운 가상 DOM 트리가 만들어진다.이전 가상 DOM과 비교(Diffing): 리액트는 새로 만들어진 가상 DOM과 이전 가상 DOM을 비교하여 어떤 부분이 변경되었는지 찾아낸다.실제 DOM 업.. 2025. 8. 25. 이전 1 다음 반응형
