Je개발 일지

1. UI 트리 브라우저는 UI 를 모델링하기 위해 많은 트리 구조를 사용한다. React 도 트리 구조를 사용해 사용자가 만든 UI 를 관리하고 모델링한다. 2. state 는 트리의 한 위치에 묶인다 컴포넌트에 state 를 부여할 때, state 가 컴포넌트 내부에 존재한다고 생각할 수 있다 하지만, state 는 실제로 React 내부에서 유지된다. React UI 트리에서 해당 컴포넌트가 어디에 위치하는지에 따라 보유하고 있는 각 state 를 올바른 컴포넌트와 연결할 뿐이다 import { useState } from 'react'; export default function App() { const counter = ; return ( {counter} {counter} ); } functi..

1. 예제로 알아보는 state 끌어올리기 import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? ( {children} ) : ( setIsActive(true)}> Show )} ); } export default function Accordion() { return ( Almaty, Kazakhstan With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its c..

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. 변이(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..