react.js
-
[Next.js] Next.js 12 변경사항Front-End(Web)/React - 프레임워크(React, Next) 2022. 9. 1. 19:34
🤔 서론 작년 10월, Next.js 12버전이 빠르게 릴리즈되었고 컴파일러를 기존 Babel에서 Rust 기반의 SWC로 바꾸면서 빌드 속도가 대폭 상향됬다는 걸 알게되었다. 좀 더 알아보니, 이 뿐만 아니라 최근에 릴리즈된 React 18의 기능들을 지원하기 위한 업데이트도 포함된 것을 확인했다. 이번 기회에, 최근 Next가 12버전으로 업데이트 되면서 어떠한 변화들이 있었는지 한 번 정리해보려고 한다. 🤍 Next.js 12 업데이트 2021년 10월, 11버전이 업데이트된지 약 3달만에 Vercel(Next 개발사)은 다시 12버전을 발표하게 된다. 이번 배포는 개발자 경험(DX, Developer Experience)을 향상시키는 기능, React 18 업데이트 등에 초점이 맞춰져있다고 한다...
-
[React] Portal (포탈), Modal 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 2. 6. 16:08
회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해서 표현한다. 하지만 React의 경우엔 어떻게 구현되는지 몰랐으며, 전역모달이 구현되는 영역에 Context API를 적용하면 되나 이 영역들이 리렌더링된다는 단점이 있었다. 그렇기에 전역상태를 통해 모달을 on/off 하는 방법을 찾아봤으며, 이 때 React의 Portal 기능을 통해 좀 더 효율적인 구현이 가능했다. 💙 Portal 이란? React 공식문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이라고 소개하고 있다...
-
[Recoil] 전역 상태관리 라이브러리 - Recoil 정복기Front-End(Web)/React - 라이브러리들 2021. 12. 30. 01:04
🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일지도? 오랜만에 React를 복기하고 Typescript를 숙달할 겸 예전에 면접과제로 받았던 메모장 어플을 다시 만들어보았다. 전역 상태관리 라이브러리 역시 사용하고자 했고, 이전 Redux의 불필요한 구성과 복잡한 원리에 학을 뗀지라.. 페이스북에서 출시한 React 전용 전역 상태관리 라이브러리인 Recoil을 이번 기회에 학습 & 사용해보고자 결심했다! 우선, 두괄식으로 결론을 내리자면, 내가 앞으로 React 프로젝트를 작업한다면 왠만하면 Recoil이다! 그만큼, Redux처럼 다양한 구성(action, reducer 등)을 할 필요가 없으며, 특히 비동기 요청이 매우 심플하다. (Red..
-
[React Router/lib.] React Router v6Front-End(Web)/React - 프레임워크(React, Next) 2021. 12. 14. 22:55
오랜만에 React 학습을 진행하는데, React Router가 6버전이 출시되었다고 한다. 기존에 사용하던 문법들이 일부 수정된 것을 감안하여, 이를 한번 훑고자 짧게나마 포스팅을 적는다. 💙 개요 React Router 6버전은, 기존의 5버전에 비해 React 최신문법에 걸맞도록 업데이트 되었다고 공식문서는 소개한다. 특히, React Hooks가 적용되었기에, 이를 사용하려면 React v16.8 이상을 우선 설치해야하며, 5 -> 6버전으로 마이그레이션을 진행하면 된다. React Router 6버전은 번들 사이즈가 5버전에 비해 약 70%가 감소하였으며, 이는 App 빌드시 큰 이점이 될 것이다. 💙 주요 변경사항 1. ➡️ 로 변경 요소들을 포함하는 로 Wrapper 명칭변경 는 compon..
-
[React] 공식문서 학습(문서) : 설치Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 23. 16:18
🧐 서론 최근 다른 글에서 언급했듯이, 기술면접을 몇 차례 거치면서 React의 기본적인 개념이 많이 부족하다는 점을 뼈저리게 느꼈다. 특히, 이러한 부분들은 React 공식문서에 잘 설명되어 있었기 때문에 진작 Docs 숙독을 선행하지 않은 점이 아쉽게 느껴졌다. 그렇기에 이 공식문서 학습 시리즈는 개념정리보다는 나의 자습노트의 형태가 될 것 같다. 다만, 공식문서의 순서를 따르면서 글을 정리할 것이기에, 일종의 Docs 가이드 라인을 만든다는 생각으로 정리해보겠다. 💙 설치 - 시작하기 "React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리" 라는 명료한 소개로 Docs가 시작된다. 공식문서, 블로그, 플레이그라운드(CodePen 등) 에 대한 소스안내가 주로 이루어지고 있었다...
-
[React.js] SyntheticEvent(합성 이벤트)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:44
프로젝트를 진행하며 마우스 이벤트를 정리한다는게... 이벤트 공부로 판이 커져버렸다 😀😀 React 공식문서는 지원 이벤트를 "합성 이벤트" 개념과 함께 소개했고, 합성 이벤트를 공부하던 차에 이벤트 핸들링과 연계는 필연적이었기 때문이다. 이번 포스팅은, e(합성 이벤트)에 대해 자세히 공부하고, React가 지원하는 이벤트 종류를 한번 훑어보고자 한다! * 포스팅 : React 이벤트 핸들링(abangpa1ace.tistory.com/128) 📒 합성 이벤트(SyntheticEvent) 란? SyntheticEvent는 객체로 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper 객체이다. 대부분의 인터페이스는 브라우저 고유 이벤트와 같다. * 소프트웨어에서 래핑(Wrapping) 이란, 기..
-
[React.js] Event Handling(이벤트 처리)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:25
React에서 컴포넌트를 만들면서, 다양한 이벤트와 연계해야되는 경우가 많이 발생한다. (클릭, input change 등) 특히, 이번 3차 프로젝트를 하면서, Navbar 메뉴들의 마우스 오버가 바뀔때마다 표현되는 서브메뉴가 달라지도록 만들어야했고, 여기에 하강 애니메이션까지 추가되야했다. 이를 구현하기 위해, React의 mouse 이벤트 종류와 차이점을 제대로 공부하는 기회가 되었고, 이벤트에 관한 포스팅 필요성을 느꼈다. 📒 이벤트 처리하기 React 요소의 이벤트 핸들링은 DOM에 대한 이벤트 핸들링과 매우 유사하다. 하지만, 아래와 같은 차이점은 있다. 이벤트 명을 소문자가 아닌 cammelCase로 작성한다. onclick(x) => onClick(o) 이벤트 핸들러를 문자열이 아닌 함수로..
-
[React.js] Custom Hooks (Rules of Hooks)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 11. 05:09
이전에, 미니 프로젝트나 다른 함수형 코드들을 참고하다보면, useOOOO 형태의 몰랐던 Hooks 들이 가끔 보일 때가 있다. 이는, React에서 제공하는 Hooks API가 아닌, 개발자가 임의로 만든 Custom Hook 이라는 사실을 알게 되었다. 이 Custom Hook 의 개념과 의의(주는 반복의 최소화), 각종 사례를 공부하고, 3차 프로젝트가 스프린트보다 빨리 끝나게 되어 일부 반복기능을 커스텀 훅으로 수정해보려고 한다! 📒 Custom Hooks 소개 - Custom Hooks 를 왜 사용하는가? React의 Hooks 개념은 16.8버전(2019년 초) 에서 새로 추가되었다. 함수형 컴포넌트가 클래스형을 대체하도록 많은 기능을 지원하기 위해 등장했으며 아래와 같은 장점들을 뽐내며 소위..