Web Dev/3. React 관련
-
React관련 싹 훑기(2) - Intermediate react 세미나 듣고..Web Dev/3. React 관련 2021. 5. 20. 03:03
https://github.com/hayoung0Lee/complete-intro-to-react hayoung0Lee/complete-intro-to-react Contribute to hayoung0Lee/complete-intro-to-react development by creating an account on GitHub. github.com intermediate react가 complete intro to react기반의 세미나였어서 연달아 들었다. 내용이 굉장히 만족스러웠다. Redux도 안쓴지 꽤 됫는데 심플하게 훑고, typescript도 typescript랑 vscode만든 회사사람이 와서 설명해주니까 확실히 도움이 되었던것 같기도. 이제 React도 다뤄본지 시간이꽤지나서인지 이래저..
-
hydrationWeb Dev/3. React 관련 2021. 5. 19. 23:15
https://github.com/hayoung0Lee/complete-intro-to-react/tree/ssr hayoung0Lee/complete-intro-to-react Contribute to hayoung0Lee/complete-intro-to-react development by creating an account on GitHub. github.com ssr을 이번에 다시 한번 복습을 했는데, 왜 Next.js가 인기가 많은지 다시한번 알게 되는 시간이었다. Server - renderToString 위의 예시는 express server를 통해서 server에서 이미 렌더링이 된 파일을 먼저 내려보내준다. 이때 App을 렌더링해야하는데, App 컴포넌트내에서 browserRouter(w..
-
lazy, SuspenseWeb Dev/3. React 관련 2021. 5. 19. 22:07
https://reactjs.org/docs/code-splitting.html Code-Splitting – React A JavaScript library for building user interfaces reactjs.org lazy를 통해서 브라우저에서 렌더된 다음 lazy하게 관련 파일을 로드해온다. 그리고 lazy component는 Suspense 컴포넌트안에서 불러져야한다. Suspense에 fallback 옵션을 통해서 load되는 동안 처리되는 내용을 보여줄 수 있다.
-
useRef, useImperativeHandleWeb Dev/3. React 관련 2021. 5. 19. 17:19
https://react.vlpt.us/basic/10-useRef.html 10. useRef 로 특정 DOM 선택하기 · GitBook 10. useRef 로 특정 DOM 선택하기 JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트를 사용하는 react.vlpt.us useRef 이거가 젤 잘 이해가되서 그냥 메모해둔다. useRef는 Dom에 바로 접근할 일이 생겼을때 사용한다. https://react.vlpt.us/basic/10-useRef.html 10. useRef 로 특정 DOM 선택하기 · GitBook 10. useRef 로..
-
useEffect vs useLayoutEffectWeb Dev/3. React 관련 2021. 5. 19. 16:56
https://daveceddia.com/useeffect-vs-uselayouteffect/ When to useLayoutEffect Instead of useEffect (example) How is useEffect different from useLayoutEffect, and when do you use useLayoutEffect? Most of the time, you want useEffect. Read on for why. daveceddia.com 이글이 좋았다. useEffect야 일반적인 99프로의 경우에 사용하면 되는데, 특히 component rerender가 발생하고 실제로 브라우저에 변경사항을 반영하기 그 사이에 뭔가를 처리해야하면 useLayoutEffect를 사용할 수 ..
-
useEffect 내에서 state를 변화하고, 내부에서 함수를 호출했을때, 왜 변화한 state가 보이지 않는가?Web Dev/3. React 관련 2021. 5. 19. 16:06
https://stackoverflow.com/questions/53024496/state-not-updating-when-using-react-state-hook-within-setinterval State not updating when using React state hook within setInterval I'm trying out the new React Hooks and have a Clock component with a counter which is supposed to increase every second. However, the value does not increase beyond one. function Clock() { ... stackoverflow.com Intermedia..
-
React관련 싹 훑기(1) - Complete Intro to React v6Web Dev/3. React 관련 2021. 5. 17. 19:53
https://frontendmasters.com/courses/complete-react-v6/ Learn React in this Complete Introduction to React Course – Use React Hooks to Build Real-World Applications with Brian Holt Much more than an intro, you’ll build with the latest features in React, including hooks, effects, context, and portals. Learn to build real-world apps from the ground up using the latest tools in the React ecosystem, ..
-
Flux, Virtual Dom 간단 메모Web Dev/3. React 관련 2021. 4. 26. 23:46
Flux facebook.github.io/flux/docs/in-depth-overview In-Depth Overview | Flux Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can facebook.github.io 작년에는 이글이 이해가 안되었는데, 어쩌면 올해는 이해되리라는 마음으로 다시 읽어..