FE/React (7) 썸네일형 리스트형 Refactor[2] - 비동기 렌더링 원래 코드 구조는 다음과 같았다. const Main = () => { const [contents, setContents] = useState(''); fetch().then((res) => { setContents( {res.data.title} {res.data.subTitle} {res.data.contents} }); return ( {contents} ); } 아무튼 이런 구조였다. 페이지 첫 진입 시에는 빈 페이지이고, fetch가 끝난 이후에 contents 를 렌더하는 방식이었다. 막상 생각해보니 fetch 소요시간 + fetch 이후 DOM 생성 시간 + 리렌더 비용이 정말 비효율적이라고 느꼈고, 기본 값과 기본 틀을 만들어 주고 fetch 이후에 값만 바꿔주는 것이 훨씬 효율적이라 생.. Refactor[1] - Typescript 올해 1월에 MVP로 만들었던 코드들 .. 몇 개월이 지나고 나니 이거저거 달라붙어서 이상한 코드가 되어있었다. 그리 대단한 페이지도 아닌데, 1000줄 가까이 되는 코드고 읽다보면 속이 울렁거린다. 약 1주 정도의 시간을 갖게 되어 9월에 리팩토링의 시간을 갖게 되었다. 처음 진행한 것은 타입스크립트 도입이다. 왜? 사실 누군가로부터 타입스크립트 좋다, 써봐라 이런 얘기를 들었을 때에 썩 와닿지 않았다. 학생 때 C와 Java를 조금 공부하다가 Javascript를 통해 동적 타입으로 작성해보니 너무 편했고 굳이 필요하다고 느낀 적이 잘 없었다. 도입의 필요성을 느낀 순간은 다음과 같았다. 1. 백엔드 통신 fetch(~~~).then((res) => { const { price } = res.data.. useState 가 아무튼 안될 때 import { useState, useRef, useEffect } from "react"; function Main() { const [testState, setTestState] = useState(0); const testRef = useRef(null); function clickHandler(event) { event.preventDefault(); setTestState(testState + 1); } useEffect(() => { if (!testRef) return; testRef.current.addEventListener('contextmenu', (event) => { clickHandler(event) }); console.log('event added'); return () =.. 배열을 useState에서 사용할 때 const Main = () => { const [test, setTest] = useState([1, 2, 3]); function TestFunction({state, setState}): JSX.Element { return ( { const qwer = state; qwer[2] -= 1; setState(qwer); console.log('clicked', state); }} >{test} ); } return ( ); } div 영역을 클릭하면 test 배열의 2번값이 -1 되어, 클릭할 때마다 -1이 감소된 값이 리렌더될 것으로 생각되지만 .. 작동하지 않는다. spread operator 를 사용하여 const asdf = [...state]; 이렇게 바꿔주어야한다는데 .. 원리는 시간나면.. (React.js + Next.js) Skeleton 적용 프로덕트에서 UX 개선 항목으로 SkeletonUI 와 ProgressBar 요청사항이 들어왔다. 처음 진행해보는 작업이라 많은 검색을 해봤고, 절대 다수의 기술 블로그에서는 다음과 같이 설명하고 있었다. 1. 페이지 이동 시에 state 를 통해서 content 영역에 skeletonUI 를 렌더링한다. 2. fetch 이후 state 를 통해서 content 영역에 정상 데이터를 렌더링한다. 대충 코드로 나타내면 이렇게 되겠다. const [content, setContent] = useState(); request('url', (resData) => { setContent(~~~~); }); 유명한 스타트업의 기술블로그도 위와 같은 방식을 사용하고 있었다. 하지만 몇 가지 이유로 사뭇 다른 방식으로.. functions are not valid as a react child const SomeView = () => { return (..) } ReactDOM.render(SomeView , domContainer); (X) ReactDOM.render(, domContainer); (O) useEffect dynamic depth const func = () => { const array = []; if (조건1) { array.push(state1) array.push(state2) } if (조건2) { array.push(state3) array.push(state4) } return array; } useEffect(() => { array.forEach((k) => { k.method(); }) }, [func]); state가 바뀔때마다 depth 안의 func 도 매번 실행된다 이전 1 다음