리액트 공식문서 학습기록 https://react.dev/learn Scaling Up with Reducer and Context 리듀서와 컨텍스트 결합 컴포넌트가 많아질수록 리듀서의 상태 및 함수 전달이 힘듬. 따라서 props 대신 tasks와 dispatch 함수를 컨텍스트에 넣어 사용. 1단계 - 컨텍스트 만들기 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); 나중에 다른 파일에서 가져다 쓰게 별도의 파일에서 export함. import { createContext } from 'react'; export const TasksContext = createContext(null); export const TasksDispatch..

리액트 공식문서 학습기록 https://react.dev/learn Passing Data Deeply with Context 심층적으로 전달이 필요할때 사용 1단계 - 컨텍스트 만들기 import { createContext } from 'react'; export const LevelContext = createContext(1); 2단계 - 컨텍스트 사용 다른 hook과 마찬가지로 컴포넌트내의 최상위에서만 호출가능 import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; export default function Heading({ children }) { const level = useContext(Le..

리액트 공식문서 학습기록 https://react.dev/learn Extracting State Logic into a Reducer Reducer로 많은 상태를 한곳에 잘 정리하자. 1단계 : 이벤트 핸들러에서 상태 빼기 dispatch를 통해 작업 전달 구조는 상관없으나 type은 일반적으로 들어간다. function handleAddTask(text) { dispatch({ type: 'added', id: nextId++, text: text, }); } function handleChangeTask(task) { dispatch({ type: 'changed', task: task, }); } 2단계 - reducer 함수 작성 요런 너낌 function tasksReducer(tasks, a..

리액트 공식문서 학습기록 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 형식을 지키지 않아도 됨. 명명규칙 상태변..