
함수형 컴포넌트를 실무에 적용하여 개발을 진행 중인데, 로컬 변수를 사용에 있어 문제가 발생했습니다. 기존 클래스 형의 함수에서 사용했던 것처럼 let, const 등의 키워드로 변수를 선언 할당하여 사용했는데, 처음 한 번은 정상이나, 한번 이상 렌더링 되면 값이 초기화되어 계산 로직에서 잘못된 값이 나왔습니다. 원인을 파악해보고자 간단한 예시를 만들었습니다. maxMn, minMn의 두 로컬 변수를 만들고 초기값을 할당한 후, 계산식을 탈 때 두 값을 찍어주도록 해봤습니다. 1. 내 코드의 문제점 useEffect를 통해 변수에 값을 할당 후 계산식에서 처음 사용 시에는 정상이나 두 번째(렌더링이 일어난 후)부터는 0으로 초기화되는 현상을 볼 수 있습니다. 원인을 파악하기 위해 함수 컴포넌트 최상단에..
JavaScript/React
2022. 5. 2. 18:15
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- javascript
- 시맨틱 웹
- 매겨변수와 인자
- 함수형 컴포넌트
- redirects
- 렌더링 속도 개선
- React로 쓰로틀링 디바운싱 구현
- programmers
- vue
- 호이스팅
- array
- 1급 객체
- next.js 환경변수
- next.js에 .gitignore가 적용되지 않을 때
- Virtual Scroll
- Next.js
- typescript
- 자바스크립트 동작원리
- debouncing
- 가상스크롤
- 타입스크립트
- useRef
- zustand
- rewrites
- 1급 시민
- 목표 일기
- 자바스크립트 비동기 동작원리
- react
- redux
- 1급 함수
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함