state를 직접 바꾸지 않고 setState를 사용해야만 하는 이유
리액트에서 직접적으로 state를 변경해서 렌더링할 경우 업데이트한 값이 변경되어 렌더링되지 않는다. 이는 state의 저장방식이 객체이기 때문이다. 값이 변경되었다는 걸 인지하기 위해서 React는 객체로 저장된 state를 비교 연산하는데, 여기서 비교하는 판단의 근거가 객체의 메모리의 참조값(레퍼런스, 주소) 이기 때문이다. 이 말인 즉슨, 직접 상태(state) 값을 변경할 경우에 메모리의 참조 값(레퍼런스, 주소) 은 그대로이기 때문에 리액트는 변경이 안된 것으로 판단하고 업데이트도, 렌더링도 하지 않을 거란 이야기가 된다. 그렇기 때문에 새로운 객체를 만들어 상태(state)값을 반환하는 상태(state) 업데이트 함수 useState() 를 사용해서 상태를 업데이트 해줘야 한다.
리액트의 부수 효과로 인해 생기는 문제점
Side Effect(부수효과)
함수 내에서 어떠한 구현 내용이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect가 있다고 한다.
여기서 부수 효과를 일으키는 함수를 예를 들어보면, Math.random() 처럼 원본을 수정하고, 값이 랜덤으로 바뀌게 되는 등 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우에 부수 효과를 일으킨다고 볼 수 있다. 반면, 부수 효과를 일으키지 않는 순수 함수의 경우엔 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미하게 된다.
부수 효과는 함수 외부에 영향을 끼치기 때문에 예측할 수 없다. 예를 들어, 실패한 서버에서 데이터(예: 블로그 게시물)를 요청하고 게시물 데이터 대신 500 상태 코드 응답을 제공할 때를 생각해보자. 함수 외부에 영향을 끼쳤지만, 내가 예측할 수 없는 응답을 받은 것이다. 부수 효과를 일으키는 또 다른 예시를 생각해보자.
- 백엔드 서버에서 API에 데이터 요청하기
- 브라우저 API와 상호 작용(즉, 직접 document 또는 window 를 사용) 할 때
- setTimeout, setInterval 같은 예측할 수 없는 타이밍 기능을 사용할 때
불순 함수의 예
let smile = 'Good Morning';
function morning(){
smile = 'Have a good day.';
}
morning();
// morning은 Side Effect를 발생시키고 있다.순수 함수의 예
function afternoon(lunch){
return lunch.toUpperCase();
}
afternoon("pizza")✍🏻 사실 웹 어플리케션에서 부수효과(Side Effect)의 존재는 필수적이다. 그리고 모든 응용 프로그램은 어떤 식으로든 작동시키기 위해 부작용을 감수할 때도 있음을 알아야 한다.
라이프 사이클이란 무엇인가?
리액트의 클래스 컴포넌트에서 가지고 있는 라이프사이클(생명주기)을 의미한다. 특정한 어떤 상황 일 때 각각의 상황에 맞는 라이프싸이클에 따라서 함수를 구현해놓으면, React가 알아서 자동적으로 함수를 호출해주는 방식이다.
React Hooks란 무엇인가?
리액트 훅스는 함수형 컴포넌트를 클래스형 컴포넌트처럼 사용할 수 있도록 등장한 개념이다. 리액트 훅은 클래스 컴포넌트에서 사용하던 state(상태)와 라이프 사이클(생명주기) 메서드를 함수형 컴포넌트에서도 사용할 수 있게 해준다.
React Hook의 특징
- 리액트에서 기본적으로 제공되는 훅(기능)은 use로 시작되는 함수이다.
- 여러 컴포넌트에서 재사용되는 로직인 경우 Custom Hooks 을 만들어서 사용할 수 있다.
기존에 사용하던 클래스형 컴포넌트가 아니라 리액트 훅스를 이용한 함수형 컴포넌트를 사용해야하는 이유는 무엇일까?
클래스형 컴포넌트는 디자이너들과의 협업에서 소통의 어려움을 느꼈고, 기존의 개발자들도 클래스형 컴포넌트를 이해하는데 굉장히 많은 어려움을 겪었다. 또한, 클래스 컴포넌트에서 사용하는 라이프 사이클 메소드는 component가 mount 되었을 때나 unmount 되었을 때 혹은 업데이트 되었을 때 등등 세부적으로 함수가 나뉘어져 있어서 중복되는 코드를 작성해야 하는 경우가 있었다. 이런 단점들을 해결하고자 등장한 것이 바로 함수형 컴포넌트와 hook 이다. 훅(hook)의 등장으로 중복되는 코드의 양 을 줄일 수가 있게 되었다.
출처
The React useEffect Hook for Absolute Beginners
prepare_frontend_interview
REACT Side Effect(부수효과)
