FE/React19 Shallow Routing 리액트와 같은 싱글 페이지 어플리케이션은 전체 페이지를 업로드 후 특정 부분을 돌아다니며 보여주는 개념이다. 이때 새로고침 화면도 바뀌지만, 주소도 바뀌어야 사용자가 덜 헷갈릴 수 있다. 이를 돕는 게 shallow routing이다. 리액트의 프레임워크격인 Next.js에서 useRouter로 해당 기능을 지원한다. import { useRouter } from "next/router"; export default function RouterPage(){ const onClickToPage = () => { router.push(url, as, option) } return( 안녕하세요 )} 안녕하세요 버튼을 누르면 특정 페이지로 이동하게 한 코드다. 여기서 onClickToPage를 router.pu.. 2022. 10. 25. LazyLoad & PreLoad 웹을 최적화 하는데는 여러가지 방법이 있다. 이번엔 그 여러 방법중 LazyLoad와 PreLoad를 정리해둔다. 두 친구는 말 그대로 늦게 불러오기와 미리 불러오기다. 웹을 화면에 로딩할 때 느린게, 좋을까 빠른게 좋을까? 당연히 후자다. 질문의 수준이 떨어진다고 뭐라해도 무방할 정도다. LazyLoad와 PreLoad는 이 당연한 것을 돕는다. LazyLoad 특정 페이지에 들어갈 때 이미지가 많다고 다 업로드할 때까지 페이지가 안뜬다면 어떨까? 매우 답답해하며 바로 뒤로가기를 누른다. 필자가 자주그랬다. 뜨는걸 기다리는 게 해당 콘텐츠를 보기 원하는 마음보다 더 크게 다가왔기 때문이다. 이때 필요한 게 LazyLoad다. LazyLoad는 한번에 다 받아오지 않고 필요한 콘텐츠를 그때그때 받아 띄운.. 2022. 10. 24. HOC & HOF 고차컴포넌트(HOC, High Order Component)와 고차함수(HOF, High Order Function). 일단 둘 다 dlfma 뜻대로 작동한다. 높은 순위로 작동하는 컴포넌트와 함수다. 이런 게 왜 필요한가 했는데, 사용하다보니 필요성이 느껴진다. 더 신기한건 이런 개념을 react 문서에서도 기술하고 있다는 점이다. 클래스 컴포넌트든, 함수 컴포넌트든 마이페이지를 만든 후 이런 생각이 문득 든다. ‘마이페이지를 들어왔을 때 로그인 상태가 아니라면 경고창을 띄우고 돌려보내는 기능을 넣고 싶다’고. 그런데 가만히 살펴보니 다른 페이지에서도 로그인이 안되었을 때 들어가지 못하게 하는 점검하는 코드가 여러 곳에서 필요함을 느낀다. ‘이를 모아 한번에 묶으면 좋을텐데…’라고 생각이 드는건 당연하.. 2022. 10. 19. 전역 상태 관리 전역 상태 관리. 그 말대로 상태를 전역에서 한다는 뜻이다. 보통 우리가 state를 통해 상태 관리한다면 스코프 단위, 혹은 파일 단위다. 물론 props를 통해 자식 요소에게 해당 상태를 전달할 수 있으나, 코드가 늘어나고 props drilling이 지속되면 추후 어디에서 넘어 온 데이터인지 인지하기 어렵다. 따라서 전역으로 상태를 관리한다면 이를 방지하고 사용성도 높일 수 있다. 리액트 기본 기능인 context api가 있고, 라이브러리로는 한참 많이 쓰였던 redux, 최근 많이 쓰이는 recoil, mobx이 있으며 이 외에도 Jotai, swr, constate 등도 있다. context api 위에서 언급했듯 리액트에서 기본으로 제공하는 전역 상태 관리 기능이다. createContext.. 2022. 10. 9. Lifecycle(feat. DOM) 컴포넌트는 각자 라이프사이클을 가지고 있다. 컴포넌트는 생성되고, 업데이트되고, 사라진다. 자세히 얘기해보자. 컴포넌트가 DOM에 끼워질 때 생성된다, 그리고 업데이트되면 DOM에 표시된 컴포넌트가 변한다. DOM에서 컴포넌트가 사라진다면 그 컴포넌트는 역할을 다한 셈이다. 라이프사이클(lifecycle) 나타나고 수정하고 사라지는 모든 것을 말하며, 리액트에서는 이 라이프사이클을 조절할 수 있다. (리액트 공식 문서에서는 생명주기라고 번역되어 있으나 실제 현장에선 라이프사이클이라 표현한다.) 사실 필자는 전에 라이프사이클과 관련 있는 글을 썼다. 바로 useEffect. useEffect가 컴포넌트의 라이프사이클을 조절하는 hook이었다. 함수형 컴포넌트는 라이프사이클을 useEffect로 조절하며, .. 2022. 10. 3. 이전 1 2 3 4 다음
