잘 운영되고 있는 프론트엔드 코드 전체를 한번에 바꾸는것은 불가능하다. 천천히 하나씩 바꿔야한다. 왜 그렇게 해야하나? 많은 코드를 한번에 리팩토링하는것은 큰 위험부담이 따르기 때문이다. 다만, 리팩토링 기간이 길어질수록 두가지 application을 유지보수해야하는 기간도 늘어나며 이 리팩토링 기간에는 리액트의 완전한 장점을 누리지 못한다는 점을 감수해야한다. 현 상황 가정 당신은 서버사이드렌더링 방식으로 제공되는 HTML을 통해 고객들에게 서비스하고있다고 가정한다. 자바스크립트로 DOM을 조작하는 현재의 방식은 어플리케이션의 전체 상태를 관리하지 않는다. 그저 DOM에 직접 접근해서 하나하나를 수정할 뿐이다. 그래서 서버에서 받아온 데이터와 UI를 일치시키는 과정이 매우 까다로운 상태다. 그리고 가끔..
프로젝트를 하던 중 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. 리액트에서는 모든 컴포넌트가 여러..
https://medium.com/@harryhedger/quick-how-to-use-the-emotion-css-prop-with-create-react-app-5f6aa0f0c5c5 Quick How-to: Use the emotion `css` prop with create-react-app I’ve heard a few people have had trouble getting emotion’scss prop to work with create-react-app, so here’s how to do it: medium.com 이모션을 사용할때 @emotion/core의 css prop을 활성화 시키려고 할때 /** @jsx */ import {jsx, css} from '@emotion/core'..
useEffect완벽가이드 2편 읽고오기 지난 포스팅에서는 useEffect에서 의존성배열에 올바른 변수를 명시해주지 않으면 어떤 문제가 발생하는지 살펴봤습니다. 이번 포스팅에서는 useEffect에 올바르게 의존성을 명시하는 방법에 대해서 살펴보겠습니다. useState의 함수형 업데이트 사용하기 useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); 이런식으로 코드를 작성할 경우 매 렌더링 마다 타이머가 초기화되고 다시 세팅되는 과정이 반복되어 비효율적이라고 말했었습니다. 이 코드를 아래와 같이 변경해봅시다. useEffect(() =..
useEffect 완벽 가이드 - 1편 읽고 오기 이제 우리는 함수형 컴포넌트 내부 함수에서 state, props를 참조할때 이전 값을 가져오는 현상이 발생하는 원인에 대해서 알게 되었습니다. 그럼 이제 최신 상태의 state와 props를 가져오기 위해서는 어떻게 해야하는지에 대해서 알아봅시다. useRef 사용하기 useRef를 공부해보신분은 알겠지만 함수형 컴포넌트 내부에서 useRef를 마치 지역변수처럼 사용할 수 있습니다. 이 useRef를 사용하면 과거의 렌더링 시점에 갇혀있는 함수가 미래의 값을 참조하게 만들 수 있습니다. 이렇게 하는게 "가능 하긴 하지만" state와 props에 맞춰 ui를 보여주는 리액트의 패러다임을 벗어나는 느낌이 있어서 깨끗한 느낌이 들진 않습니다. 어쨌든 use..
프로젝트를 진행하면서 useEffect를 사용할때 가끔씩 이상하게 동작할때가 많았습니다. useEffect에서 리덕스 스토어의 값을 참조할때 예전값을 가져오는등의 현상이 발생해서 훅스를 제대로 이해하지 못하고 사용하는것 같아 이번 기회에 정리해보려고 합니다. 훅스를 쉽게 이해하기 위해 컴포넌트 라이프사이클 개념을 가져다 쓰다보니, 자꾸 엇나가는 부분이 생긴것같습니다. 훅스를 제대로 이해하기 위해서는 라이프 사이클을 잊으라고 말합니다. 렌더링 마다 고유한 Props와 State가 있다. function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click m..
이 글을 제대로 이해하려면 브라우저의 로딩 과정에 대해서 알아야 합니다. Virtual DOM? 가상 돔? 위 포스팅을 읽고 오셨다면 이제 리플로우가 뭔지 정확히 아셨을겁니다. 똑같은 Single Page Application을 자바스크립트나 제이쿼리로 구현한것과 리액트로 구현한것은 성능상의 큰 차이가 생깁니다. 우리가 바닐라 자바스크립트로 SPA를 구성하면 다음 프로세스를 거쳐야 합니다. 1. 변경하고자 하는 컴포넌트에 접근(querySelector, document.getElementById, document.getElementByClass 등..) 2. 컴포넌트를 조작 (show, hide, coloring 등등..) 3. 브라우저가 변화된 컴포넌트를 반영하기 위해서 리플로우 발생. 문제는 컴포넌트..
스토리북은 스토리의 집합이다. 각각의 스토리는 컴포넌트의 하나의 시각적 상태를 나타낸다. 기술적으로 얘기하면 스토리는 스크린에 렌더링될 수 있는 어떤것을 리턴하는 함수이다. 기본 스토리 버튼 컴포넌트의 스토리에 대한 기본 예제이다. import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; export default { component: Button, title: 'Button', }; export const text = () => Hello Button; export const emoji = () => ( 😀 😎 👍 💯 ); named export(text, emoj..
- Total
- Today
- Yesterday
- useRef
- reducer
- atomic design
- Polyfill
- Babel
- useEffect
- state
- await
- storybook
- props
- typescript
- promise
- return type
- reflow
- Next.js
- computed
- server side rendering
- hydrate
- react hooks
- design system
- reactdom
- rendering scope
- async
- es6
- react
- type alias
- webpack
- Action
- mobx
- javascript
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |