전체 글

리액트는 사용자 인터페이스(UI)를 렌더링하기 위한 자바스크립트 라이브러리예요. UI는 버튼, 텍스트 그리고 이미지와 같은 작은 유닛에서 빌드돼요. 리액트는 이들은 재사용이 가능하고 중첩될 수 있는 컴포넌트로 합쳐줘요. 웹 사이트에서 핸드폰의 어플들까지 화면에 보여지는 모든 것들은 컴포넌트 단위로 쪼갤 수 있어요. 이번 챕터에서 리액트 컴포넌트를 만들고, 커스터마이징하고 그리고 조건적으로 화면에 띄우는 방법을 배울 거예요. 콘텐츠 목록 리액트 컴포넌트를 작성하는 방법 멀티 컴포넌트 파일을 만드는 상황과 방법 JSX를 사용하여 자바스크립트를 추가하는 방법 컴포넌트에서 자바스크립트의 기능에 접근하는 JSX를 만들기 위해 중괄호를 사용하는 방법 props로 컴포넌트를 구성하는 방법 컴포넌트를 조건부로 렌더링하..

useTransition은 UI를 방해하지 않고 상태를 업데이트해주는 리액트 훅이에요. const [isPending, startTransition] = useTransition() Reference | 레퍼런스 useTransition() 상태의 업데이트를 트랜지션으로 표시하려면 최상위 컴포넌트에서 useTransition를 호출하세요. import { useTransition } from 'react'; function TabContainer() { const [isPending, startTransition] = useTransition(); // ... } Parameters | 파라미터(매개변수) useTransition은 매개변수가 필요하지 않아요. Returns | 반환값 useTransit..

useSyncExternalStore은 외부 저장소를 구독할 수 있도록 만들어주는 리액트 훅이에요. const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) Reference | 레퍼런스 useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) 외부 데이터 저장소의 값을 읽어오고 싶다면 최상위 컴포넌트에서 useSyncExternalStore을 호출하세요. import { useSyncExternalStore } from 'react'; import { todosStore } from './todoStore.js'; function TodosApp() { c..