useEffect완벽가이드 2편 읽고오기 지난 포스팅에서는 useEffect에서 의존성배열에 올바른 변수를 명시해주지 않으면 어떤 문제가 발생하는지 살펴봤습니다. 이번 포스팅에서는 useEffect에 올바르게 의존성을 명시하는 방법에 대해서 살펴보겠습니다. useState의 함수형 업데이트 사용하기 useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); 이런식으로 코드를 작성할 경우 매 렌더링 마다 타이머가 초기화되고 다시 세팅되는 과정이 반복되어 비효율적이라고 말했었습니다. 이 코드를 아래와 같이 변경해봅시다. useEffect(() =..
그동안 어렴풋하게만 알고 있던 함수형 프로그래밍이란 무엇인지 정리하기 위해 남깁니다. 함수형 프로그래밍의 컨셉 1. 사이드 이펙트(side effect)를 없애라. 사이드 이펙트라는건 부작용이라는 뜻인데, 우리가 함수를 호출 하는 이유는 인풋에 따른 결과값을 얻어내기 위해서 입니다. 근데 함수가 함수 외부의 어떤것을 변경하게 되면 우리가 의도치 않은 동작을 하는 것입니다. 이런 현상을 함수형 프로그래밍에선 사이드 이펙트 라고 합니다. 프로젝트에 사이드 이펙트를 가진 함수가 많아지면 디버깅 하기 굉장히 어려워지게 됩니다. (각 함수 내부를 뒤져서 이게 어디에 영향을 주는지 일일이 파악해야함) 간단한 예시를 하나 살펴 보겠습니다. public Program getCurrentProgram(TVGuide gu..
- Total
- Today
- Yesterday
- mobx
- design system
- atomic design
- Babel
- react hooks
- reactdom
- async
- type alias
- rendering scope
- Polyfill
- server side rendering
- hydrate
- computed
- Action
- webpack
- typescript
- useEffect
- return type
- Next.js
- javascript
- es6
- await
- useRef
- promise
- state
- props
- reducer
- storybook
- react
- reflow
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 |