들어가기 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..
React(Docs)/React(Practice)
두 컴포넌트의 상태값을 공유해야한다면? 두 컴포넌트의 부모로 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 에 넣는 첫번째 파라미터는..
filter spread 연산자 key import React, { useState } from 'react'; export default function AppMentor() { const [person, setPerson] = useState(initialPerson); const handleUpdate = () => { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`); setPerson((person) => ({ ...person, mentors: person.mentors.map((mentor) => { if (mentor.name === prev) { return { ...mentor, n..
map 불변성 spread연산자 import React from "react"; import { useState } from "react"; export default function AppMentors() { const [person, setPerson] = useState({ name: "당신", title: "개발자", mentors: [ { name: "밥", title: "시니어개발자", }, { name: "제임스", title: "주니어개발자", }, ], }); const handleNickname = () => { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`); setPerson(..
객체initialState transform onPointerMove AppXY.css .container { width: 100vw; height: 100vh; background-color: beige; } CSS에서 전체 배경을 설정하고 싶다면 위와 같이 코드를 작성하면 된다. 답안1(state를 개별적으로 작성) AppXY.jsx import React, { useState } from 'react'; import './AppXY.css'; export default function AppXY() { const [x, setX] = useState(0); const [y, setY] = useState(0); return ( { console.log(e.clientX, e.clientY); set..
