클로저 환경에 접근하고 싶을 때, useRef().current 사용 권장클로저(Closure)는 자신이 선언된 당시의 렉시컬 환경을 기억하는 함수예요.렉시컬 환경이란, 함수가 정의될 때의 스코프변수, 함수에 접근할 수 있는 유효한 범위예요. 선언된 환경을 기억하고 있어서,함수가 실행된 이후에도 그 안의 변수에 접근할 수 있죠.이 덕분에 클로저는 변수를 외부로부터 숨기거나,예기치 않게 값이 바뀌는 걸 방지하는 데 자주 사용돼요.export default function App() { function initCounter() { let num = 0; // 클로저 function increment() { console.log((num += 1)); } increment..

도입리액트를 쓰다 보면 정말 자주 만나게 되는 훅이 하나 있어요.바로 useEffect예요.처음엔 "데이터 불러오려면 써야 하는 거구나~" 하고 쓰기 시작하는데, 어느 순간부터는 어디에든 일단 넣고 보는 훅처럼 되어버리기도 하죠.근데 useEffect가 정말 필요한 걸까요?리액트에서는 컴포넌트와 훅이 기본적으로 순수해야 해요. 같은 입력이면 같은 결과가 나와야 하고, 예상치 못한 변화가 생기면 안 돼요.useEffect는 그런 순수성을 깨뜨릴 수 있어요! 아무 데나 막 쓰면 리액트의 렌더링 흐름을 꼬이게 만들 수도 있어요.이번 글에서는 useEffect가 정확히 어떤 역할을 하는지, 어떠한 경우에 굳이 쓰지 않아도 되는지 함께 살펴보려고 해요. 왜 순수해야 하나요?먼저, 컴포넌트가 왜 순수해야 하는지 알..

이번 글에서는 랜딩 페이지의 배너 영역을 구현하면서 경험한 리렌더링 이슈에 대해 얘기해보려 해요. 제 랜딩 페이지 배너 영역은 하늘과 구름으로 구성되어 있어요.3D 라이브러리와 애니메이션을 적용해서 실제 하늘처럼 보이도록 구현했어요.근데 구름이 이동하던 중에 위치하고 형태가 '확' 바뀌는 현상이 발생했어요. 구름 위치뿐 아니라 개수까지 바뀌어서 구름 패턴에 문제가 있겠다는 생각이 들었죠. 배경 컴포넌트 코드 구성// background-clouds.tsxfunction BackgroundClouds() { const randomValue = Math.random(); const cloudPatternSeed = randomValue >= 0.3 ? randomValue : 0.3; return ( ..