React란 무엇인가요?

React는 페이스북에서 개발하고 관리하는 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위해 사용됩니다. React는 웹 및 모바일 애플리케이션의 개발을 쉽고 효율적으로 만들기 위해 고안되었습니다.

React의 주요 기능

• 컴포넌트 기반: React는 재사용 가능한 컴포넌트를 통해 복잡한 사용자 인터페이스를 만들 수 있게 해줍니다.
• 가상 DOM: React는 가상 DOM을 사용하여 애플리케이션의 효율성을 향상시킵니다. 이를 통해 애플리케이션의 성능을 높일 수 있습니다.
• 단방향 데이터 흐름: React는 단방향 데이터 흐름을 사용하여 애플리케이션의 복잡성을 줄입니다.

왜 React를 사용해야 하는가?

React는 강력한 개발 기능과 효율적인 성능으로 인해 전 세계적으로 가장 인기있는 JavaScript 라이브러리 중 하나가 되었습니다. 또한, React의 커뮤니티는 매우 활발하며, 다양한 라이브러리와 도구들이 활발하게 개발되고 있습니다.

— 여기까지 Notion AI 가 작성해준 내용 —

왜 쓰지?

function UserListPage({
	users,
}: {
	users: User[];
}) {
	if (users.length === 0) {
		return (<>
			<h1>유저가 존재하지 않습니다</h1>
		</>)
	}

	return (<>
		{users.map(user => {
			<UserItem user={user}>
		})}
	</>)
}

function MainPage({}) {
	return (<>
		<PageHeader />
		<PageBody>
			<Navigation>
				<UserListPageNav />
				<PricingPageNav />
				{featureEnabled && <FeaturePageNav />}
			</Navigation>
			<ProductDescription />
		</PageBody>
		<PageFooter />
	</>)
}

상태관리

State

getter 와 setter 만 존재하는 상태 관리 도구.

set 을 호출하는 시점에 관련 코드가 리랜더링 되어 html 이 다시 그려진다

const [value /* getter */, setValue /* setter */] = useState<T>();

const arr = [1,2,3];
arr[0] = 3;

const [arr, setArr] = useState([1, 2, 3]);
setArr(
	arr.mapIndexed((e, idx) => {
		if (idx === 0) {
			return 3
		} else {
			return e
		}
	})
)

타입 지정이 가능하되, initial 값을 넣지 않는다면 undefined 이다.

Context