useDeferredValue state 또는 props 변경을 미룹니다.다만 리렌더링을 방지하려면, memo와 함께 쓰는 것이 좋습니다.  역할은 useTransition 훅과 비슷합니다.다만 useTransition은 state에 대한 변경 동작에 적용하는 것이고useDeferredValue는 변경된 값에 적용하기 때문에, 순수 state를 쓰든 deferred value를 쓰든 자유입니다. 하지만 리렌더링을 방지하기 위해서는 memo와 함께 사용하는 것이 좋습니다.useDeferredValue만 쓰면 부모 컴포넌트와 리렌더링을 함께 하기 때문입니다.    Lag in Search 간단하게 과일 이름을 검색하는 예제를 만들어보겠습니다.(과일 이름 출처는 wikipedia - List of culina..

useTransition  useTransition은 UI를 블락킹(blocking)하지 않고 state를 업데이트하는 훅입니다.쉽게 말해, set으로 state를 업데이트하고이에 수반하여 리렌더링 할 때 UI가 멈추는 것을 방지합니다.  까지가 공식 문서의 설명이었는데,사실 설명대로 훅을 잘 쓰려면 리액트가 어떤 환경에서 동작하는 지를 잘 이해해야 하고어떤 상황에서 써야되는 지 잘 알아야 합니다.       startTransition 사실상 useTransition의 기능은 startTransition 함수와 비슷합니다.그리고 startTransition 함수는 탑 레벨(top-level) 함수로써 굳이 훅을 쓰지 않고도 사용할 수 있습니다.startTransition is very similar t..

Video 이제 채팅으로 비디오를 받을 수 있다고 해봅니다. 이를 위해 Video 컴포넌트를 만들고(loop 어트리뷰트는 비디오가 끝나면 다시 자동으로 시작하도록 하는 것입니다)import "./Video.scss";export default function Video({ src, type }: { src: string; type: string }) { return ( );} Box에 추가했습니다....import Video from "./Video";export default function Box({ name, onClickList }: { name: string; on..

Theme 7. State 보존하기 글에서 만들었던 친구 목록에 테마를 추가해봅니다.  이는 오른쪽 상단의 테마 버튼을 눌러서 전환할 수 있도록 합니다. 먼저 List에 theme state를 추가하고 div의 className에 적용합니다.export default function List(...) { const [theme, setTheme] = useState("light"); return ( // theme에 따라 className이 변경 {names.map((name) => ( onClickListItem(name)}> ..

7장부터는 파일 구조가 변경되었습니다.모든 예제 소스는 github repository 에서 확인할 수 있습니다. Friends UI에서 컴포넌트를 없앴다가 다시 나타나게 하는 상황을 상상해보았을 때,해당 컴포넌트가 state를 쓰고 있었다면, 해당 state는 보존될까요? 아니면 다시 새롭게 생성될까요? 질문에 답하기 위해 기존 UI에 컴포넌트 몇 개를 더 만들어보죠. 위처럼 친구 목록을 만들어봅니다.이름들은 상위 컴포넌트에서 받도록 props로 만들었습니다.import "./Header.scss";export default function Header() { return ( Chat Friends );}import Header from "./..

Objective 5. State로 리렌더링하기 글에서 배운 것을 활용해서 이번에는 메시지를 작성해서 보내도록 해보겠습니다. 사용자 예상 시나리오는 다음과 같이 만들었습니다.빈 입력창과 누를 수 없는 보내기 버튼이 있다.입력창에 1개라도 글자가 있으면 보내기 버튼을 누를 수 있다. 보내기 버튼을 누르면 3초 동안입력창과 보내기 버튼이 비활성화된다.보내기 버튼에 스피너가 등장한다.3초 이후입력창과 버튼이 최초 모습으로 바뀐다.입력된 글자로 메시지가 오른쪽에 새롭게 등장한다.      Step 1빈 입력창과 누를 수 없는 보내기 버튼이 있다.  간단하게 만들어봅시다.import "./Input.scss";export default function Input() { return ( ..