프로젝트를 하던 중 DOM을 참조해야 하는 일이 생겼는데 기존 자바스크립트에서 돔을 가져오는 getElementById와 리액트에서의 방식 ref 중 어떤것이 더 나은 방법인가 궁금해서 찾아보았다. In general, refs is better than document.getElementById, because it is more in line with the rest of your react code. 일반적으로, ref가 document.getElementById보다 더 좋다. 왜냐면, 너의 리액트로된 나머지 코드들과 더 잘 맞기 때문이다. In react, every component class can have multiple component instances. 리액트에서는 모든 컴포넌트가 여러..
useEffect 완벽 가이드 - 1편 읽고 오기 이제 우리는 함수형 컴포넌트 내부 함수에서 state, props를 참조할때 이전 값을 가져오는 현상이 발생하는 원인에 대해서 알게 되었습니다. 그럼 이제 최신 상태의 state와 props를 가져오기 위해서는 어떻게 해야하는지에 대해서 알아봅시다. useRef 사용하기 useRef를 공부해보신분은 알겠지만 함수형 컴포넌트 내부에서 useRef를 마치 지역변수처럼 사용할 수 있습니다. 이 useRef를 사용하면 과거의 렌더링 시점에 갇혀있는 함수가 미래의 값을 참조하게 만들 수 있습니다. 이렇게 하는게 "가능 하긴 하지만" state와 props에 맞춰 ui를 보여주는 리액트의 패러다임을 벗어나는 느낌이 있어서 깨끗한 느낌이 들진 않습니다. 어쨌든 use..
이전 버전에서는 리액트만으로 상태관리하기가 굉장히 힘들었다. 부모와 자식간의 상태 교환만 가능했기 때문에 프로젝트 규모가 커질 수록 상태관리가 어려워 유지보수 하기가 점점 어려워진다. 이걸 극복하기 위해서 Redux나 Mobx를 사용하는데 이런 상태관리 라이브러리들의 기반이 되는 리액트의 Context API를 살펴보자. 리액트 16.3 이후 버전부터 이 Context API가 사용하기 쉽게 개편됬다고 한다. 그래서, 지금은 단순히 전역상태 관리만 필요한 프로젝트라면 리덕스를 굳이 쓰지 않아도 괜찮은것같지만, 나중에 비동기 처리를 하게 될지도 모르기 때문에 그냥 처음부터 리덕스를 쓰는게 나은것같다.(개인적인 의견) 정적 Context 사용해보기 src/contexts/color.js 먼저 저장창고 역할을..
- Total
- Today
- Yesterday
- reducer
- react hooks
- promise
- async
- state
- design system
- atomic design
- server side rendering
- react
- reflow
- await
- mobx
- javascript
- Next.js
- reactdom
- props
- Babel
- es6
- hydrate
- computed
- storybook
- Action
- Polyfill
- useRef
- rendering scope
- webpack
- return type
- useEffect
- type alias
- typescript
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |