리액트 공식문서 학습기록 https://react.dev/learn Preserving and Resetting State UI 트리 React는 JSX에서 UI 트리를 만듬. 그런 다음 React DOM은 해당 UI 트리와 일치하도록 브라우저 DOM 요소를 업데이트함. 상태는 트리의 위치에 연결됨. 상태는 실제로 React 내부에 있음. 그리고 DOM의 위치에 따라 각 상태 조각을 올바른 구성 요소와 연결함. 동일한 위치의 동일한 컴포넌트는 상태를 유지함 {isFancy ? ( ) : ( )} 위와 같은 경우 상태가 유지됨. 즉, 같은 위치면 상태가 유지된다고 함. UI 트리의 위치가 중요함. 같은 위치에 다른 컴포넌트 재설정 {isPaused ? ( See you later! ) : ( )} 위 같은..

리액트 공식문서 학습기록 https://react.dev/learn Sharing State Between Components 아코디언등을 구현할때 하나만 열려야하는 경우 상태를 부모에서 관리해야함. 과제1 인풋창 2개 동기화 import { useState } from 'react'; const Input = ({ label, value, onChange }) => { return ( {label} {' '} ); } const SyncedInputs = () => { const [ value, setValue ] = useState(''); const handleChange = (e) => { setValue(e.target.value); } return ( ); } export default Syn..

리액트 공식문서 학습기록 https://react.dev/learn Choosing the State Structure 상태 구화 원칙 그룹 관련 상태 - 두개 이상의 상태 변수를 동시에 업데이트 할 경우 하나로 병합하셈 상태의 모순을 피할 것 - '불일치’할 수 있는 방식으로 구성하지 말 것 중복 상태를 피할것 - 컴포넌트 내의 props나 기존 상태에서 계산할 수 있는 정보를 상태로 넣지 말 것 상태 중복을 피할 것 - 동일한 데이터가 여러 상태 변수 또는 중첩된 객체 내에 중복되면 동기화 상태를 유지하기 어려움. 깊게 중첩된 상태는 피할 것 DB의 '정규화’와 같다고 생각하면 됨. 그룹 관련 상태 x, y가 항상 같이 바뀌는 경우 아래처럼 하나의 객체로 묶는게 좋음. const [position, ..

리액트 공식문서 학습기록 https://react.dev/learn Reacting to Input with State UI를 선언적으로 생각하기 1단계 구성요소의 다양한 시각적 상태 식별 상태별로 시각화 하라. = 상태가 바뀌면 UI에 즉각 적용되도록 export default function Form({ // Try 'submitting', 'error', 'success': status = 'empty' }) { if (status === 'success') { return That's right! } return ( City quiz In which city is there a billboard that turns air into drinkable water? Submit {status === '..

리액트 공식문서 학습기록 https://react.dev/learn Updating Arrays in State 객체와 마찬가지로 읽기전용으로 취급해야함. 새배열을 반환하는 concat, 스프레드 구문, filter, slice, map같은 걸 사용하거나 모든 배열 메서드를 사용하고 싶을땐 Immer를 사용할 수있음. 배열 추가 push 쓰지 말 것 아래처럼 쓸 것. import { useState } from 'react'; let nextId = 0; export default function List() { const [name, setName] = useState(''); const [artists, setArtists] = useState([]); return ( Inspiring sculpto..

리액트 공식문서 학습기록 https://react.dev/learn Updating Objects in State 상태를 읽기 전용으로 취급하자 const [position, setPosition] = useState({ x: 0, y: 0 }); position.x = 5; 위 코드처럼 작성 시 React가 상태가 변경된걸 모름. 따라서 setter에 객체를 넣어줘서 구현해야함. setPerson({ ...person, // Copy the old fields firstName: e.target.value // But override this one }); 위 처럼 스프레드 문법을 이용하면 좀 더 간단함. function handleChange(e) { setPerson({ ...person, [e.t..

리액트 공식문서 학습기록 https://react.dev/learn Queueing a Series of State Updates React는 상태 업데이트를 처리하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. 그래서 모든 호출 후에 리렌더링이 발생함. setNumber(n => n + 1); setNumber(n => n + 1); setNumber(n => n + 1); 위와 같은 형태면 React는 이벤트 핸들러의 다른 모든 코드가 실행된 후 처리되도록 이 함수들을 큐에 넣고 다음 렌더링시 최종 업데이트 된 상태를 제공함. { setNumber(number + 5); setNumber(n => n + 1); }}> 시작은 n => n + 1 형식을 지키지 않아도 됨. 명명규칙 상태변..

리액트 공식문서 학습기록 https://react.dev/learn State as a Snapshot state setting은 렌더링을 트리거함. 이벤트 핸들러에 따라 리렌더링이 일어나는게 아니고 상태를 setting 했을 때 리렌더링함. 렌더링이란 React가 컴포넌트를 호출하는 것을 의미. 컴포넌트가 반환하는 JSX가 그 시간의 UI의 스냅샷과 같음 함수실행 > 스냅샷 계산(이게 아마 VDOM인가?) > DOM tree 업데이트 상태의 값의 변경은 렌더링이 끝나고 변경됨. { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 // 렌더링이 끝나기 전까지 number의 값이 변경되지 않으므로 결과적으로 + 1이 실행..

리액트 공식문서 학습기록 https://react.dev/learn Render and Commit Trigger 렌더링되는 이유 초기 렌더링 컴포넌트(또는 조상중 하나)의 상태가 업데이트 된 경우 초기화 기존엔 state나 props에 변화가 없어도 컨테이너가 계속 전달됐음. 🤔 정확히 잘 몰루? 궁금 // Legacy root API ReactDOM.render(, document.getElementById("root")) // New root API (리액트18이상) const root = ReactDOM.createRoot(document.getElementById("root")) root.render() 렌더링 렌더링은 React가 컴포넌트를 호출하는 것 처음엔 루트 컴포넌트를 호출함. 이후엔 ..

리액트 공식문서 학습기록 https://react.dev/learn State: A Component’s Memory 리액트는 로컬 변수의 변경사항을 고려하지 않고 렌더링하고 변경이 있어도 리렌더링하지 않음. import { useState } from 'react'; const [index, setIndex] = useState(0); function handleClick() { setIndex(index + 1); } 상태관리가 필요하면 useState를 이용하여 따로 선언해주고 별도의 setter 함수가 필요함. 사족) 요기가 svelte와의 가장 큰 차이인듯. 스벨트에선 변경되지 않는 것은 상수로 선언하고 변수는 변경됨을 즉시 인식하고 리렌더링함. 위 코드를 svelte에서 구현하면 아래가 다임 ..