Je개발 일지

state 를 잘 구조화하면 컴포넌트가 수정과 디버깅에 용이해진다. 1. state 구조화 원칙 컴포넌트를 작성할 때는 얼마나 많은 state 변수를 사용할지, 데이터 모양은 어떻게 해야할지를 선택해야 한다. 관련 state 를 그룹화 한다. 항상 두 개 이상의 state 변수를 동시에 업데이트한다면 하나의 state 로 합치는 것이 좋다 state 모순을 피하라 여러 state 조각이 서 모순되거나 불일치할 방식으로 state 를 구성해서는 안 된다. 불필요한 state 를 피하라 렌더링 중에 컴포넌트의 props 나 기존 state 변수에서 일부 정보를 계산할 수 있다면 해당 정보를 해당 컴포넌트의 state 에 넣지 말아야 한다. state 중복을 피하라 동일 데이터가 여러 state 변수 간에 또..

1. 선언형 UI 와 명령형 UI 의 차이점 React 는 직접 UI 를 조작하지 않는다. 이는 컴포넌트를 직접 활성화하거나 비활성화하지도 않고, 보여주거나 숨기지도 않는다. 대신 표시할 내용을 선언하면 React 가 UI 를 업데이트할 방법을 알아낸다. 2. UI 를 선언적인 방식으로 생각하기 UI 를 React 로 다시 구현하는 과정을 보면 다음과 같다. 컴포넌트의 다양한 시각적 상태를 식별한다 상태 변화를 촉발하는 요소를 파악한다 useState 를 사용해 메모리의 상태를 표현한다 비필수적인 state 변수를 제거한다 이벤트 핸들러를 연결해 state 를 설정한 Step 1 : 컴포넌트의 다양한 시각적 상태 식별하기 먼저, 사용자에게 표시될 수 있는 UI 의 다양한 상태를 모두 시각화 해야 한다. ..

state 를 잘 구조화하는 방법, state 업데이트 로직을 유지 관리하는 방법, 멀리 떨어진 컴포넌트 간에 state 를 공유하는 방법에 대해서 알아볼 것 1. state 로 입력에 반응하기 React 를 사용하면 코드에서 UI 를 직접 수정하지 않는다. 대신 컴포넌트의 다양한 시각적 state 별로 표시하려는 UI 를 구현하고, 사용자 입력에 대한 응답으로 state 변경을 촉발한다. 2. state 구조 선택 state 를 잘 구조화하면 수정과 디버깅이 편한 컴포넌트와 버그가 끊임없이 발생하는 컴포넌트의 차이를 만들 수 있다. state 에 불필요하거나 중복된 정보를 포함하지 말 것 import { useState } from 'react'; export default function Form()..

1. Store Reset 1-1) Pinia 사용 Vue3 프레임워크를 사용할 때 사용하는 중앙 상태 관리 라이브러리는 Pinia 다. Pinia 는 두 가지 방식으로 코드를 작성할 수 있다. 첫 번째는, Optional API 처럼(혹은 이전 중앙 상태 관리 라이브러리였던 Vuex 처럼) 사용하는 방법과 Composition API 처럼 사용하는 방법이다. 아래의 코드가 Optional API(혹은 Vuex) 처럼 사용하는 방법이다. import { defineStore } from 'pinia' export const useStore = defineStore('storeId', { // arrow function recommended for full type inference state: () =>..

1. 배경 L 프로젝트는 Vue3 프레임워크를 기반으로 만들었다. 해당 도메인은 굉장히 방대한 양의 데이터(10초마다 데이터를 수집 후 저장)를 활용해 정보를 제공한다. 이는 화면에서 그려야할 게 많다는 것을 의미하기도 한다. 예를 들어, 우리 도메인 중에는 10초 단위의 데이터를 하루치 보여준다거나, 1분 단위의 데이터를 한 달 ~ 두 달의 기간으로 보여주기도 한다. 이게 단순히 tick 을 계산하면 10 * 6 * 1440 개, 1440 * 30 개 정도의 데이터지만, 이는 단순히 Tick 일뿐, 그려야 하는 범례나 데이터의 depth 도 존재해서 우리가 Max Range 를 걸어주지 않으면, 데이터를 받아와서 그리다가 브라우저가 다운되는 경우가 있었다. 부문장님은 "컨텐츠가 좋으면 느리게 렌더링되더..

1. 변이(Mutation)란 무엇인가 state 는 javaScript 의 어떤 값이든 담을 수 있다 이는 객체도 담을 수 있다는 것. 기술 적으로 객체 자체의 내용을 변경하는 것은 가능하다 const [p, setP] = useState({x: 0, y: 0}) p.x = 5 위 로직은 자바스크립트에서 가능하다. React state의 객체는 기술적으로 위와 같이 변이할 수 있지만, 이는 원시 타입과 같이 불변하는 것처럼 취급해야 한다. 2. state 를 읽기 전용으로 취급할 것 즉, state 에 넣는 모든 값을 read-only 로 취급해야 한다 import { useState } from 'react'; export default function MovingDot() { const [posit..

1. state 업데이트 일괄 처리 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 ) } 이전 챕터에서 이 코드에서 onClick 의 결과로 h1 에 보여질 number 값은 +1 된 값임을 확인했다. 여기에서 한 가지 더 논의 될 사항이 존재한다 React 는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다 이 원칙에 의거해 리렌더링은 모든 setNu..

1. state 를 설정하면 렌더링이 촉발된다 state 를 설정하고 이 값을 업데이트 하면 React 의 리렌더링을 촉발한다. 즉, 인터페이스가 이벤트에 반응하려면 state 를 업데이트 해야 한 import { useState } from 'react'; export default function Form() { const [isSent, setIsSent] = useState(false); const [message, setMessage] = useState('Hi!'); if (isSent) { return Your message is on its way! } return ( { e.preventDefault(); setIsSent(true); sendMessage(message); }}> set..

UI 를 요청하고 제공할 때 세 가지의 단계를 거친다 Trigger : 렌더링 촉발 Render : 컴포넌트 렌더링 Commit : DOM 에 커밋 1. Trigger : 렌더링 촉발 컴포넌트에서 렌더링이 일어나는 데는 두 가지 이유가 있다. 첫 렌더링 컴포넌트의 state 혹은 상위 요소 중 하나가 가 업데이트 된 경우 2. Render: 컴포넌트 렌더링 렌더링을 촉발시키면 React 는 컴포넌트를 호출해 화면에 표시할 내용을 파악한다 렌더링이란 React 에서 컴포넌트를 호출하는 것이다 첫 렌더링에서 React 는 루트 컴포넌트를 호출한다 이후의 렌더링에서 React 는 state 의 업데이느에 의해 렌더링이 발동된 함수 컴포넌트를 호출한다 이 과정은 재귀적으로 이뤄진다 업데이트된 컴포넌트를 반환하면..

1. 일반 변수로 충분하지 않은 경우 컴포넌트를 새 데이터로 업데이트 하기 위해서는 두 가지 작업이 필요핟 렌더링 사이에 데이터를 유지한다 새로운 데이터로 컴포넌트를 리렌더링하도록 촉발해야 한다 useState 훅이 이 두가지를 제공한다 렌더링 사이에 데이터를 유지하며 state 로 저장한 데이터가 업데이트 되면 React 컴포넌트가 리렌더링되도록 만든다. 2. state 변수 추가하기 state 변수를 추가하기 위해서는 파일 상단에 useState 를 react 라이브러리에서 import 해야 한다 import { useState } from 'react'; 그리고 저장할 변수를 다음과 같이 사용한다 // [값을_저장할_변수, 값을_업데이트할_함수] = useState(변수_초기화_값) const [i..