이벤트 핸들러는 같은 상호작용을 다시 할 때만 재실행돼요. 이벤트 핸들러와는 다르게 이펙트는 props이나 상태 변수와 같이 읽으려는 값이 이전에 렌더링을 할 때와 달라졌을 때 바뀌어요. 때때로 이 두 행동을 혼합하고 싶을 때가 있을 거예요. 특정 값에만 반응하여 재실행 되는 이펙트를 만들고 싶을 수도 있어요. 이 페이지에서는 어떻게 그런 이펙트를 만드는지 알려줄 거예요. 이 페이지에서는 - 이벤트 핸들러와 이펙트 사이에서 어떻게 선택할 것인지 - 이펙트가 왜 반응적이고 이벤트 핸들러가 왜 그렇지 않은지 - 이펙트의 코드가 반응적이지 않을 때는 무엇을 해야하는지 - 이펙트 이벤트가 무엇이고 이펙트에서 이들을 어떻게 분리해야하는지 - 최근 props와 상태를 이펙트 이벤트를 사용하여 이펙트에서 어떻게 읽는..
리액트 공식문서
이펙트는 리액트 패러다임에서 해치 탈출구의 역할을 해요. 그리고 나서 리액트의 "바깥으로 나가서" 컴포넌트를 리액트가 아닌 위젯이나 네트워크 또는 브라우저 DOM과 같은 외부 시스텀과 동기화 시켜줘요. 만약 (props나 상태가 바뀔 때 컴포넌트의 상태를 업데이트 하고 싶은 상황과 같이) 외부 시스템을 포함하고 있지 않다면 이펙트가 필요하지 않는 상황이에요. 불필요한 이펙트를 제거하면 코드를 이해하기 더 쉬워지고, 더 빠르게 실행되며, 에러가 발생할 확률을 낮춰줘요. 이 페이지에서는 - 불필요한 이펙트를 컴포넌트에서 왜 그리고 어떻게 제거해야하는지 - 이펙트가 없이 고비용의 연산을 어떻게 캐싱하는지 - 이펙트가 없이 컴포넌트의 상태를 어떻게 초기화하고 조정하는지 - 이벤트 핸들러 간에 로직을 어떻게 공유..
상태는 컴포넌트들에서 독립되어 있어요. 리액트는 어떤 상태가 어떤 컴포넌트에 들어가있는지를 UI 트리 내에서의 위치에 기반하여 추적해요. 여러분은 리렌더링 사이에서 언제 상태를 보존하고 언제 상태를 초기화 해야하는지를 통제할 수 있어요. 이 페이지에서는 - 리액트가 언제 상태를 보존하는지 혹은 언제 상태를 초기화하는지 - 리액트가 컴포넌트의 상태를 어떻게 강제로 초기화하는지 - 키와 타입이 상태가 보존되는데 어떤 영향을 미치는지 를 알아볼 거예요. State is tied to a position in the render tree | 상태는 렌더트리에서의 위치와 연결되어 있다 리액트는 UI에서 컴포넌트 구조로 렌더 트리를 만들어요. 컴포넌트의 상태를 만들 때, 상태는 컴포넌트 안에 "거주한다"라고 생각해..
때때로 두 컴포넌트의 상태를 항상 같이 바꾸어야할 때가 있어요. 그렇게 하려면 양쪽에서 상태를 제거하고 가장 가까운 공통 부모로 이동한 후에 props를 통하여 필요한 상태를 아래로 내려주어야해요. 이는 상태 끌어올리기로 알려져 있고 리액트로 코드를 쓸 때 가장 자주 사용할 것들 중 하나에요. 이 페이지에서는 - 상태를 끌어올려서 컴포넌트 간에 어떻게 공유하는지 - 제어 컴포넌트와 비제어 컴포넌트는 무엇인지 를 알아볼 거예요. Lifting state up by example | 예시를 통해 상태 끌어올리기 이 예시에서 부모 컴포넌트인 Accordion 컴포넌트는 두 개의 다른 Panel 을 렌더링해요. Accordion Panel Panel 각각의 Panel 컴포넌트는 콘텐츠를 볼 수 있는지를 결정하는..
자바스크립트에서 배열은 변경이 가능하지만 상태 안에 배열을 저장할 때는 불변적인 요소처럼 여겨야해요. 객체와 같이 상태에 저장된 객체를 업데이트할 때는 새로운 배열을 만들거나 기존 배열의 복사본을 만들고 새로운 배열을 사용하여 상태를 설정해야해요. 이 페이지에서는 - 리액트 상태 안에서 배열에 항목을 어떻게 추가, 제거, 변경하는지 - 배열의 내부에서 객체를 어떻게 업데이트 하는지 - 어떻게 Immer를 사용하여 반복되어 나오는 구문을 줄인 채 객체를 복사하는지 를 알아볼 거예요. Updating arrays without mutation | 변이 없이 배열 업데이트하기 자바 스크립트에서 배열은 객체의 다른 형태에요. 객체와 같이 리액트 상태 안에서의 배열은 읽기 전용으로 여겨야해요. 이는 즉, arr[..
상태 변수를 설정하는 것은 또 다른 렌더링을 대기열에 넣는 거예요. 그러나 때때로 다음 렌더링을 대기열에 넣기 전에 다양한 연산을 하고 싶을 수도 있어요. 이를 하기 위해서는 리액트가 상태 업데이트를 어떻게 배칭하는지를 이해하면 도움이 될 거예요. 이 페이지에서는 - "배칭"이란 무엇이고 리액트는 여러 상태 업데이트를 수행할 때 이를 어떻게 사용하는지 - 어떻게 동일한 상태변수에 연속적으로 여러 업데이트를 적용하는지 를 알아볼 거예요. React batches state updates | 리액트는 상태 업데이트를 배칭해요 "+3" 버튼을 클릭하면 setNumber(number + 1)이 3번 호출되기 때문에 카운터가 3번 증가한다고 생각할 거예요. 그러나 이전 섹션을 다시 부를때, 각 렌더링의 상태 값을..
상태 변수는 읽고 쓸 수 있는 일반적인 자바스크립트 변수처럼 생겼어요. 그러나 상태는 스탭샷에 더 가깝게 행동해요. 상태를 지정하면 이미 갖고 있는 상태 변수를 바꾸는 것이 아니라 리렌더링을 발생시켜요. 이 페이지에서는 - 상태를 정하는 것이 리렌더링을 어떻게 발생시키는지 - 상태는 언제 어떻게 업데이트되는지 - 왜 상태는 설정한 즉시 업데이트 되지 않는지 - 이벤트 핸들러는 상태의 "스냅샷"에 어떻게 접근하는지 를 알아볼 거예요. Setting state triggers renders | 상태를 설정하면 렌더링을 유발해요 클릭과 같은 사용자 이벤트에 맞추어 즉시 사용자 인터페이스가 바뀐다고 생각할 수 있어요. 리액트는 이러한 멘탈 모델과는 조금 다르게 동작해요. 이전 페이지에서 상태를 설정하면 리렌더링..
리액트는 사용자 인터페이스(UI)를 렌더링하기 위한 자바스크립트 라이브러리예요. UI는 버튼, 텍스트 그리고 이미지와 같은 작은 유닛에서 빌드돼요. 리액트는 이들은 재사용이 가능하고 중첩될 수 있는 컴포넌트로 합쳐줘요. 웹 사이트에서 핸드폰의 어플들까지 화면에 보여지는 모든 것들은 컴포넌트 단위로 쪼갤 수 있어요. 이번 챕터에서 리액트 컴포넌트를 만들고, 커스터마이징하고 그리고 조건적으로 화면에 띄우는 방법을 배울 거예요. 콘텐츠 목록 리액트 컴포넌트를 작성하는 방법 멀티 컴포넌트 파일을 만드는 상황과 방법 JSX를 사용하여 자바스크립트를 추가하는 방법 컴포넌트에서 자바스크립트의 기능에 접근하는 JSX를 만들기 위해 중괄호를 사용하는 방법 props로 컴포넌트를 구성하는 방법 컴포넌트를 조건부로 렌더링하..
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..
