리액트 공식문서 학습기록 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에서 구현하면 아래가 다임 ..

리액트 공식문서 학습기록 https://react.dev/learn Responding to Events nextjs에서는 ‘use client’ 선언 후 작성해야 동작함. 기본적으로 컴포넌트가 서버에서 렌더링되기 때문. 이벤트 핸들러 추가 별도 함수 가져오기 const handleClick = () => { alert('😘🥰'); } return ( ) 인라인 { alert('🤪😜'); }}> 이벤트 핸들러에 전달되는 함수는 호출이 아니고 전달되어야함. (호출되면 렌더링 시점에 실행됨) //요래 쓰면 안됨 //요래 써도 안됨. 이벤트 핸들러에서 Props 읽기 const AlertButton = ({ message, children }) => { return ( alert(message)}> {chil..