💬 Q&A 모음 #01

🔗 2024년 11월 넷째 주 ( 11.25 ~ 11.30 ) - 중요 Q&A 모음

---

Q. 가상 DOM의 변경 횟수 마다 생성, 비교 , 반영이 일어나는가?

"만약 각 버튼을 누르면 “hello”, “hi”, “yaya” 가 생성되는 3개의 버튼이 있을 때, 사용자가 그 버튼 3개를 연속으로 눌렀을 때, 3번의 렌더링이 일어나는 걸까?"

📍 결론

"이러한 부분은 성능 최적화와 관련이 깊다. 사용자가 버튼 3개를 빠르게 눌렀을 때, React는 각각의 버튼 클릭 이벤트로 인해 상태가 변경되지만, 변경을 처리하는 방식은 단순히 3번 모두 가상 DOM을 생성하고 비교하고 반영하는 게 아니다."

• React는 배치 업데이트(Batched Updates) 라는 최적화 기법을 사용한다. 이 기법은 여러 상태 변경이 발생해도, 그 결과를 한 번에 비교하고 브라우저 DOM에 반영할 수 있다.

✔ㅤ배치 업데이트(Batched Updates)

1. 상태 변경 요청 : 사용자가 버튼을 누를 때마다 상태 변경 요청이 발생한다.

2. 배치 처리 : React는 변경 요청들을 모아 하나의 렌더링 사이클에서 처리한다.

3. 가상 DOM 비교 : 변경된 상태를 기반으로 최종의 가상 DOM을 생성하고 이전 가상 DOM과 비교한다.

4. DOM 업데이트 : 변경된 부분만 브라우저 DOM에 한 번에 반영한다

---

Q. 캐싱 이란?

📍 결론

"자주 사용하는 데이터를 저장해두었다가 빠르게 꺼내 쓰는 것이다."

✔ㅤ캐시를 사용하는 이유

• 웹 사이트를 방문할 때, 이미 다운로드한 이미지나 데이터는 다시 가져오지 않고 저장된 데이터를 사용한다.
• 같은 데이터를 여러 번 다운로드 하지 않아서 데이터 사용량을 줄일 수 있다.

✔ㅤDisable Cache

• 캐시를 사용하지 않도록 설정하는 것으로, 항상 최슨 데이터를 가져와서 확인할 수 있다.
• 웹 사이트를 수정했는데, 브라우저가 옛날 캐시 데이터를 보여줄 수 있어서 필요하다.
• 개발 할 때는 Disable Cache 로 확인하는 게 좋다.

---

Q. JSX 범위 내부는 어디인가?

"조건부 렌더링에서 JSX 내부에서는 if 문은 사용할 수 없어서 JSX 범위 밖에서 사용한다고 하는데, 정확히 JSX 범위가 어디일까?"

📍 결론

"JSX 내부는 return 문 안에 있는 코드이다."

• JSX 내부에서 {} 를 사용하면 JavaScript 코드를 실행할 수 있다.
• JSX 외부에서는 일반 JavaScript 문법을 사용해야 한다.

"그러면 if 문도 {} 를 사용하면 JSX 내부에서 사용할 수 있는 거 아닌가?"

📍 결론

"JSX은 JavaScript 표현식을 사용할 수 있는 영역이지만, if 문은 표현식이 아니라 문이기 때문에 사용할 수 없다."

• 표현식은 값을 반환하는 코드이다.
• 문은 특정 작업을 수행하지만, 값을 반환하지 않는다. ex) if , for

---

Q. useState와 클로저, 콜백함수의 관계?

"[count, setCount]에서 setCount 함수에서 (count +1)이 아닌 콜백함수를 쓰는 게 더 안전한 이유는 뭘까?"

📍 결론

"useState 는 클로저를 사용하여 상태 값을 관리한다. React의 상태 업데이트는 비동기적이기에 여러번 setCount룰 호출할 때, 상태 업데이트가 예상대로 동작하지 않을 수 있다. 이때 콜백 함수를 사용하게 되면, 이전 상태를 확실하게 참조할 수 있고 이를 기반으로 안전하게 상태를 업데이트 할 수 있다."

✔ㅤ원인-결과 논리 흐름

• useState 는 상태 값과 상태를 변경하는 함수를 반환하는 것이며, 이 반환 값들은 내부적으로 클로저를 사용하여 상태를 저장하고 관리한다.
• 여기서 클로저는 변수에 대한 참조를 기억하는 함수 임을 생각해라.
• React의 상태 업데이트는 비동기적으로 처리 된다. 즉, setCount 가 호출될 때, 즉시 상태가 변경되는 것이 아니라 업데이트 큐에 상태 변경을 예약 하고 컴포넌트를 재렌더링 한 후에 상태를 실제로 변경하게 된다.
• 그래서 여러 번 호출하게 되면, 상태 값이 예상과 다르게 동작할 수 있다. 왜냐하면 즉시 상태를 변경해주는 것이 아닌데, 이전 상태를 기준으로 업데이트가 일어나기 때문이다. (아래의 코드를 참고)

const [count, setCount] = useState(0);

setCount(count + 1); // 1
setCount(count + 1); // 1

• 코드를 보면 setCount 를 호출했지만, 업데이트 된 상태 값이 아닌, count=0 인 상태를 참조하여 2번 다 1 을 반환하고 있다.
• 이러한 문제 때문에, 상태 업데이트 시 확실하게 이전 상태 값을 기반으로 새로운 상태를 설정할 필요가 있다.
• 여기서 콜백 함수를 사용하면 최신 이전 상태를 안전하게 참조할 수 있는데, 이것을 함수형 업데이트 방식 이라고 한다.
• 함수형 업데이트 방식을 사용하면 setCount 가 호출될 때 이전 상태를 인자로 받는 함수를 전달한다.
• React는 이 함수가 실행되기 전에 상태를 배치 큐 에서 가져오고, 이를 함수의 인자로 전달 하여 최신 상태를 기반으로 새로운 상태를 계산할 수 있게 해준다.
• 이는 React의 특징인 단방향 데이터 흐름 과도 연관이 있다.

✔ㅤReact 상태 관리 메커니즘

• 상태 업데이트가 발생할 때마다, React는 상태 변경을 즉시 적용하는 대신 업데이트 큐에 추가하고 다음 렌더링 시점에 한 번에 처리 한다. (위의 배치 업데이트 참고)
• 이 과정에서 업데이트 큐에 쌓인 상태 변경 작업들이 순차적으로 실행 된다.

1. setCount 가 호출되면, React는 업데이트 큐에 상태 변경 요청을 추가한다.
2. 각 상태 업데이트는 상태가 변경될 때마다, 이전 상태를 함수에 전달하고 이를 바탕으로 새로운 상태를 계산한다. 이때 React는 업데이트 큐의 상태를 하나씩 처리하면서 , setState 로 전달된 함수의 이전 상태 값을 자동으로 최신 값으로 업데이트 한다.