때때로 두 컴포넌트의 상태를 항상 같이 바꾸어야할 때가 있어요. 그렇게 하려면 양쪽에서 상태를 제거하고 가장 가까운 공통 부모로 이동한 후에 props를 통하여 필요한 상태를 아래로 내려주어야해요. 이는 상태 끌어올리기로 알려져 있고 리액트로 코드를 쓸 때 가장 자주 사용할 것들 중 하나에요. 이 페이지에서는 - 상태를 끌어올려서 컴포넌트 간에 어떻게 공유하는지 - 제어 컴포넌트와 비제어 컴포넌트는 무엇인지 를 알아볼 거예요. Lifting state up by example | 예시를 통해 상태 끌어올리기 이 예시에서 부모 컴포넌트인 Accordion 컴포넌트는 두 개의 다른 Panel 을 렌더링해요. Accordion Panel Panel 각각의 Panel 컴포넌트는 콘텐츠를 볼 수 있는지를 결정하는..
리액트 공식문서 번역
상태를 잘 구조화하는 것은 수정하고 디버깅하기 좋은 컴포넌트와 항상 버그의 원천이 되는 컴포넌트 간의 차이를 만들어요. 상태를 구조화할 때 고려해야할 몇가지 팁을 알려드릴게요. 이 페이지에서는 - 언제 한 개의 상태 변수를 사용하고 언제 여러개의 상태 변수를 사용하는지 - 상태를 정리할 때 무엇을 피해야하는지 - 상태 구조에서 자주 발생하는 이슈를 어떻게 해결하는지 를 알아볼 거예요. Principles for structuring state | 상태 구조화의 원칙 여러개의 상태를 갖고 있는 컴포넌트를 작성할 때 몇개를 사용해야하는지, 그리고 데이터의 모양은 어떻게 되어야하는지를 선택해야해요. 최적이 아닌 상태 구조로도 올바른 프로그램을 작성할 수 있지만 더 나은 선택을 하도록 만들어주는 몇가지 원칙이 ..
상태는 자바스크립트 값이라면 객체를 포함한 어떤 값이든 저장할 수 있어요. 그러나 리액트 상태 안에서 직접적으로 객체를 수정하면 안돼요. 대신, 새로운 객체를 생성하거나 기존 객체의 복사본을 만들고 해당 복사본을 사용하여 상태를 설정해야해요. 이 페이지에서는 - 리액트 상태 안의 객체를 어떻게 올바르게 업데이트 하는지 - 변이 없이 중첩 객체를 어떻게 업데이트 하는지 - 불변성이 무엇이고 어떻게 불변성을 유지하는지 - 어떻게 Immer를 사용하여 반복되어 나오는 구문을 줄인 채 객체를 복사하는지 를 알아볼 거예요. What's a mutation? | 변이란 무엇인가요? 상태는 모든 자바스크립트 변수를 저장할 수 있어요. const [x, setX] = useState(0); 따라서 숫자, 문자열, 그리..
상태 변수를 설정하는 것은 또 다른 렌더링을 대기열에 넣는 거예요. 그러나 때때로 다음 렌더링을 대기열에 넣기 전에 다양한 연산을 하고 싶을 수도 있어요. 이를 하기 위해서는 리액트가 상태 업데이트를 어떻게 배칭하는지를 이해하면 도움이 될 거예요. 이 페이지에서는 - "배칭"이란 무엇이고 리액트는 여러 상태 업데이트를 수행할 때 이를 어떻게 사용하는지 - 어떻게 동일한 상태변수에 연속적으로 여러 업데이트를 적용하는지 를 알아볼 거예요. React batches state updates | 리액트는 상태 업데이트를 배칭해요 "+3" 버튼을 클릭하면 setNumber(number + 1)이 3번 호출되기 때문에 카운터가 3번 증가한다고 생각할 거예요. 그러나 이전 섹션을 다시 부를때, 각 렌더링의 상태 값을..
useId는 접근성 속성에 전달할 수 있는 고유한 ID를 생성하는 리액트 훅이에요. const id = useId(); Reference | 레퍼런스 useId() 고유 ID를 생성하려면 최상위 컴포넌트에서 useId를 호출하세요. import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); // ... } 더 많은 예시를 보려면 아래 예시들을 참고하세요. Parameters | 매개변수(파라미터) useId는 어떤 매개변수도 받지 않아요. Returns | 반환값 useId는 해당 컴포넌트에서 특정한 useId 호출과 연관된 고유 ID 문자열을 반환해요. Caveats | 주의사항 useId는 훅이기 때..
useEffect는 외부 시스템과 컴포넌트의 싱크를 맞춰주는 훅이에요. useEffect(setup, dependencies?) Reference | 레퍼런스 useEffect(setup, dependencies?) 이펙트(Effect)를 선언하기 위해서는 컴포넌트 최상단에서 useEffect를 선언하세요. import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = creat..
