React(Docs)

useContext + Context API 일반적으로 클라이언트 상태관리 라이브러리 혹은 context API를 사용하지 않는한 props는 부모 컴포넌트에서 하위 컴포넌트에게 단계를 거쳐서 내려줘야 한다. 아래와 같이 2~3단계라면 뭐 그냥 넘어갈 수도 있겠지만, 이정도 규모이상의 프로젝트가 되면 props를 일일히 내려주는게 번거로워진다. 내려주는 것 뿐 아니라, 유지보수할 일이 생기면 저 prop를 사용하는 컴포넌트를 일일히 다 고쳐줘야한다는 수고스러움도 있다. Context API는 일일히 props를 전달하지 않아도 필요한 곳에서만 사용할 수 있도록, 해준다. 하지만 다음과 같은 문제때문에 남발하는 것은 좋지않다. Context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다. -> cont..

Next.js 13을 공부하는데, Next의 loading UI가 React의 Suspense와 함께 사용된다는 것을 보고, 잘 모르는 부분이었기에 겸사겸사 공부할겸 기록을 남긴다. function Comp() { const { data } = apiClient.read('api/user'); return ( {data.name} ) } function App() { return ( // 두번째 로딩 UI // 첫번째 로딩 UI // 성공 UI ) } 사용법도, 생김새도 매우매우 직관적이다. fallback: 로딩이 완료되지 않은 경우 children(SomeComponent)을 대체할 UI이다. 어떤 React 노드(jsx)든 괜찮지만, 주로 로딩 스피너나 스켈레톤과 같은 가벼운 플레이스홀더 뷰를 사용..

Overview state Hooks Context Hooks Ref Hooks Effect Hooks Performance Hooks Other Hooks Your own Hooks State Hooks 상태를 이용하는 훅은 컴포넌트가 사용자 입력과 같은 정보를 기억할 수 있게 해준다. state를 이용하는 가장 대표적인 Hook으로는 useState가 있다. Context Hooks 컨텍스트 훅을 이용하면 컴포넌트가 prop으로 다른 컴포넌트에게 직접 전달하지 않아도 이용가능하게한다. 컨텍스트 훅은 마치 우산같은 개념이다. 특정 컴포넌트에 우산을 설치하면 우산아래에 있는 컴포넌트는 비를 맞지 않아도 된다. (=prop을 props drilling을 피할 수 있다.) 이러한 개념은 Redux, Zust..

들어가기 React v18에서는 새로운 Suspense SSR Architecture가 추가될 예정이고 이제 React의 Suspense를 융합해 선택적인 Hydratation을 웹사이트에 적용할 수 있게 된다. Hydratation은 이미 서버 사이드 렌더링을 제공하는 많은 프레임워크나 라이브러리(Gatsby, Next.js 등)에서 필수적으로 제공하는 솔루션이다. 왜 이 기술을 사람들이 사용하려 하는지 다시 생각해 보고 그 동작 원리를 한번 정리하는 시간을 가져 보려 한다. Hydration In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web..

두 컴포넌트의 상태값을 공유해야한다면? 두 컴포넌트의 부모로 State를 올림 그리고 Props를 두 컴포넌트로 각각 전달 ->Prop Drilling이 발생해서 비효율적임 - AppCount 예시 여러 컴포넌트들이 필요하다면 어플리케이션 전반적으로 필요한 경우 Context API를 사용할 수 있다. 언어, 테마(다크모드), 로그인/로그아웃여부 등등... 주의해야될 사항은 Context API우산으로 감싸진 부모, 자식들중 어느 하나라도 상태가 변경된다면 re-rendering이 되기때문에 빈번히 변경되야할 사항에는 Context API를 적용하지 않거나, Umbllera 테크닉을 사용하는 것이 좋다. Context API 사용예제 DarkModeContext.jsx import { createCont..

Uncontrolled-Component React에서는 모든 UI의 업데이트는 상태의 변경으로부터 발생해야 한다. 그런데, 와 같은 입력form은 React내부적으로 상태변경이 이루어지지않았음에도 불구하고 UI상으로 업데이트가 되는 것을 알 수 있다. 이것을 Uncontrolled-Component라고 한다. 이러한 Uncontrolled-Component를 제어해 Controlled-Component로 만들어주는 것이 중요하다. Controlled-Component 예제 import React, { useState } from 'react'; export default function AppForm() { const [form, setFrom] = useState({ name: '', email: '..

Immer사용방법 터미널에서 Immer 다운로드 yarn add immer use-immer 코드내부 모듈 import 해주기 import { useImmer } from 'use-immer'; Immer로 작성한 코드 import React, { useState } from 'react'; import { useImmer } from 'use-immer'; export default function AppMentorsImmer() { const [person, updatePerson] = useImmer(initialPerson); const handleUpdate = () => { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이..

구조분해할당 useReducer의 개념 상태를 관리하게 될 때 useState 를 사용하는것 말고도 다른 방법이 있다. 바로 useReducer 라는 Hook을 사용하는것인데, 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다. 즉, 다른 컴포넌트에서도 재사용을 하기위해 로직을 따로 정의할 수 있어, 유지보수에 유리하고 간결한 코드를 내보일 수 있다는 장점이 있다. useReducer의 사용방법 const [state, dispatch] = useReducer(reducer, initialState); useReducer 에 넣는 첫번째 파라미터는..