react5 React useEffect 무한 호출되는 문제 해결 방법 📌 문제 상황React에서 useEffect 사용 시👉 계속 반복 실행되는 문제가 발생📌 잘못된 코드useEffect(() => { setCount(count + 1);});👉 렌더링 → state 변경 → 다시 렌더링 → 반복📌 원인👉 의존성 배열(dependency array) 미설정✅ 해결 방법useEffect(() => { setCount(count + 1);}, []);👉 최초 1회만 실행❗ 특정 값 변경 시 실행useEffect(() => { console.log(count);}, [count]);👉 count 변경 시만 실행🔥 추가 팁useEffect는 렌더링 이후 실행의존성 배열 없으면 무한 실행 가능📌 마무리useEffect 문제는 대부분👉 의존성 배열 설정 문제.. 2026. 4. 16. [React] StrictMode 분명 API 호출 코드는 한 번만 작성했는데, 네트워크 탭에는 똑같은 요청이 두 번 찍히는 경우를 경험해 보셨나요?처음엔 제 코드에 무한 루프가 걸린 줄 알고 식은땀이 났지만, 범인은 예상치 못한 곳에 있었습니다.바로 StrictMode인데요, 이에 대해 이야기해 보려 합니다. "로그가 두 번 찍히는 건 버그가 아니라, 리액트가 당신의 코드를 더 튼튼하게 만들고 있다는 증거입니다."1. StrictMode란?한마디로 리액트의 엄격한 감독이라고 할 수 있다고 합니다. 애플리케이션의 잠재적인 버그를 미리 찾아내기 위해 개발 모드에서만 작동하는 안전장치예요.배포(Build)하면 사라짐: 실제 사용자에게는 한 번만 실행되니 안심하세요!시각적 요소 없음: 화면에는 아무것도 나타나지 않습니다. 2. 왜 굳이 두 번.. 2026. 3. 12. ⚓ 리액트 훅(React Hooks) 리액트 컴포넌트의 생명주기와 상태 관리를 직관적으로 만들어주는 훅(Hooks)에 대해 작성해 보겠습니다.1. useState : 상태 관리의 시작"상태 유지 값과 그 값을 갱신하는 함수를 반환합니다." 가장 기본적인 Hook으로, 컴포넌트 내에서 동적인 데이터를 다룰 때 사용합니다.용도: 버튼 클릭 횟수, 입력창의 텍스트, 체크박스 상태 등 변경되는 데이터 관리.특징: 상태가 업데이트되면 리액트가 해당 컴포넌트를 자동으로 다시 렌더링 합니다.2. useEffect : 사이드 이펙트 처리"명령형 또는 어떤 effect를 발생하는 함수를 인자로 받습니다." 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정합니다.용도: API 데이터 호출, 타이머 설정, 외부 라이브러리 연동.팁: 두 번째 인자인 의존.. 2026. 3. 6. [React] state 직접 수정하면 안 되는 이유 (setState 안 쓰면 생기는 문제) 📌 문제 상황React에서 state 값을 변경할 때다음처럼 직접 수정하는 경우가 있다.this.state.count = 1;👉 하지만 이렇게 하면 화면이 업데이트되지 않는 문제가 발생한다.📌 원인React는 state 변화를 감지해야 렌더링을 다시 수행한다.👉 하지만 직접 값을 변경하면👉 React는 변화를 인식하지 못한다.❗ 잘못된 사용this.state.count = this.state.count + 1;👉 값은 바뀌지만👉 화면은 그대로일 수 있다✅ 올바른 방법: setState 사용this.setState({ count: this.state.count + 1});👉 React가 변경을 감지하고👉 자동으로 화면을 다시 렌더링한다📌 state 핵심 개념 정리state는 컴포넌트 내.. 2024. 4. 22. 이전 1 2 다음
