Frontend/React

React Jsx 🌱

jsx는 React.createElement를 반환하기 위한 Syntatic sugar 입니다. Syntatic Sugar은 좀 더 편리하게 사용하기 위해 도와주는 것으로 이해할 수 있습니다. 예를 들면 Javascript의 class, React의 jsx가 있습니다. javascript의 Class는 babel로 변환해 보면 prototype으로 구성되어 있음을 React의 jsx는 bable로 변환해 보면 React.createElement를 반환함을 확인할 수 있습니다. 둘다 원래는 직접 prototype, React.createElement로 작성해야 했던것을 Class, jsx를 사용함으로써 편리하게 사용할 수 있는 것이죠 jsx는 클래스형 컴포넌트에서 사용합니다. render내부에서 retur..

React 재조정 🌱

React의 재조정(Reconciliation)에 대해 정리해보려 합니다. 여기서 말하는 재조정에서는 diffing 알고리즘을 어떻게 정의했는지에 관한 것입니다. diffing 알고리즘에에 따라 가상 DOM과 실제 DOM의 차이를 판단합니다. 그리고 변경이 필요한 부분만 대체가 되는 것입니다. 두개의 가정을 먼저 인지하여야 합니다. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 어떤 자식 element가 변경되지 않아야 하는지를 표시해 줄 수 있다. diffing 알고리즘 엘리먼트의 타입이 다른경우 리액트에서는 두 개의 트리를 비교할때, 두 엘리먼트의 root 엘리먼트부터 비교를 하게 됩니다. 이 root 엘리먼트가 다르다면 root 엘리먼트를 포함한 트..

React hook 🌱

React Hook이란? React Hook은 자바스크립트 함수 입니다. Hook은 class를 작성하지 않고도 state와 React의 기능들을 사용할 수 있게 해줍니다 Hook이 등장한 이유는 다음과 같습니다. 컴포넌트 사이에서 상태로직을 재사용하기 어렵습니다. -> Custom hook의 등장배경 - Render Props와 HOC 같은 패턴은 코드의 파악이 어렵다 - 상태 관련 로직을 추상화 하기가 어렵다 (이 내용은 클래스형 컴포넌트 공부후에 이해가 더 될듯) Class는 사람과 기계를 혼동시킵니다. - this가 동적으로 결정되기 때문에 클래스 내부에서 파악하기가 어렵다 - class는 코드의 최소화를 힘들게 만들고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 복잡한 컴포넌트들은 이해..

React 연속된 요청 useEffect 내에서 처리하기 (useEffect, suspense)

이 포스트는 React 공식문서의 Suspense 관련 부분을 보던중 아래의 내용을 실행해보기 위한 포스트 입니다. Suspense를 사용하여 효율적으로 제어할 수 있는 race condition을 useEffect내에서도 처리하기 위한 방법입니다. 클로저, 스코프 체인와 cleanUp function을 이용하였습니다. 여기서 정의하는 경쟁상태란 코드가 실행되는 순서에 대한 부정확한 가정에서 비롯되는 버그 입니다. 위의 이미지는 useEffect 내에서 promise를 통해 데이터를 불러온후에 컴포넌트의 상태를 업데이트하는 동작 화면입니다. promise의 응답 시간은 무작위로 설정되어 있습니다. next 버튼을 클릭하면 id를 변경해주고 변경된 id로 각 컴포넌트에서 promise로 요청을 보내줍니다..

React suspense

React에 Suspense 컴포넌트가 추가되었습니다. 기존의 명령형으로 loading 상태를 지정해 주어야 했던 것을 Suspense 컴포넌트를 이용하면 선언형으로 코드를 작성할 수 있습니다. React의 experimental에서 사용이 가능했었지만 3월 24일 정식 출시된 18버전에서 사용이 가능합니다. Concurrent 모드에서 사용이 가능합니다. 기존에 ReactDom.render => ReactDom.createRoot().render 형식으로 사용하여야 Suspense 컴포넌트를 사용할 수 있습니다. // 기존 import ReactDOM from 'react-dom' ReactDOM.render( , document.getElementById("root") ) // 변경된 모습 impor..

React 상태관리의 과거, 현재 그리고 미래 (번역글)

이 포스트는 아래 출처의 블로그 글을 번역한 내용입니다. React는 2013년 5월에 소개되었습니다. 이것은 패러다임은 UI가 상태에 따라 동작하는것으로 전환되었습니다. 컴포넌트의 상태가 주어지면 React는 어떻게 컴포넌트가 보여야 하는지 결정할 수 있습니다. React는 상태라는 아이디어 위에서 조직되었습니다. 그러나 상태는 React 어플리케이션을 만드는데 있어 가장 어려운 부분으로 여겨지고 있습니다. React의 상태 관리를 견고한 벨트로 상상해봅시다. 수년동안 이 벨트를 사용해왔고 느리게 새로운 도구들이 추가됩니다. 각각의 도구들은 각각의 목적을 수행합니다. 당신은 볼트를 조일때 망치를 사용하지 않습니다. 장인으로서 각각의 도구를 적절한 상황에 사용해야 합니다. 리액트의 상태관리 도구는 견고한..

Recoil 🌱

리액트에서 전역 상태관리를 위해 Redux는 널리쓰입니다. 비동기 action을 지원하기 위해 redux-thunk, redux-saga등이 추가되어 미들웨어로서의 동작으로 비동기 동작을 이용할 수 있게 해줍니다. Redux에서는 전역 컴포넌트 상태와 서버 상태의 분리를 위해 Redux-thunk query또한 추가 되었습니다. Redux는 리액트를 비롯하여 다른 라이브러리, 프레임워크에서 사용이 가능합니다. React-Redux는 Redux를 React만을 위해 사용하려고 등장한 라이브러리 입니다. 불필요한 리렌더링을 방지하고 동작을 최적화 하기위해 등장한 것으로 알고 있습니다. 이러한 서드파티 라이브러리 들이 사용되던 시기에 Recoil이 등장합니다. Recoil은 리액트 만을 위해 생겨난 first..

React 상태관리🌱외 minor concept

상태 React에서는 컴포넌트 기반의 코드를 작성하게 됩니다. 컴포넌트는 여러 곳에서 재사용을 할 수 있고 추상화를 잘 이용하면 가독성이 좋은 코드를 작성하게 해줍니다. 컴포넌트는 상태를 가집니다. 예를 들면 이 블로그의 라이트/다크 모드, 카카오톡 대화창의 안읽은 메시지수 와 같은것들은 상태입니다. 상태는 사용자에게 보여지는 것을 의미하고 상태의 변경은 렌더링을 새로해주어야 함을 의미합니다. 사용자가 블로그의 라이트 모드에서 다크모드를 눌렀으면 어두운 화면을 보여주어야 하고 카카오톡 대화창의 메시지를 전부 읽었다면 안읽은 메시지 수는 0, 하나씩 올때마다 카운트를 올려주어야 할 것입니다. 컴포넌트는 자신이 정의한 상태를 가질수 있고, 서버로부터 데이터를 받아 자신의 상태로 정의할 수도 있고, 부모 컴포..

React css-in-js

https://betterprogramming.pub/all-you-need-to-know-about-css-in-js-984a72d48ebc를 번역한 글입니다. All You Need To Know About CSS-in-JS CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). You’ve probably heard terms like CSS-in-JS, Styled Components, Radium, and Aphrodite, and you’re… betterprogramming.pub CSS-in-JS는 CSS model을 document 레벨이 아닌 component..

React form 블로그 따라 다루기

https://jeonghwan-kim.github.io/dev/2022/03/29/react-form-and-formik.html 리액트로 폼(Form) 다루기 폼 다루는 방법에 대해 얘기해 보자. 브라우져는 폼을 다루기 위한 내장 API를 가지고 있다. 이걸 이용하면 빠르게 폼을 만들수 있는데 이전에 한 번 정리했다. HTML5 폼 검증에 대해 정리해 보자 jeonghwan-kim.github.io 의 포스팅 내용에서 많은 인사이트를 얻을 수 있을것 같아 따라해본 과정입니다!! 머릿속에 강하게 남은 내용을 정리하고자 한다. 기존의 로직을 커스텀 훅으로 추출(연관된 로직이 전부 커스텀 훅에 위치하게 되는 과정, 세부구현은 밖에서 넣어준다) 추상화를 사용함으로써 속성은 숨기고 가독성은 증가(중요 개념만 ..