React 튜토리얼

이 실습에서는 React 에서 데이터 목록을 렌더링하는 방법과 목록 항목에 키를 사용하는 것의 중요성에 대해 배웁니다.

이 실습에서는 요소 작성, 표현식 포함, 속성 사용을 포함하여 React 의 JSX 구문 기본 사항을 배우게 됩니다.

이 실습에서는 제어 컴포넌트, 상태 관리 및 이벤트 처리를 포함하여 React 에서 폼을 처리하는 기본 사항을 배우게 됩니다.

이 실습에서는 JSX 요소에 이벤트 핸들러를 연결하고 해당 함수를 정의하여 클릭과 같은 React 의 이벤트 처리 기본 사항을 배웁니다.

이 실습에서는 삼항 연산자, 논리 &&, 변수 및 상태를 사용하여 컴포넌트를 동적으로 표시하는 React 의 조건부 렌더링 기본 기술을 배우게 됩니다.

이 실습에서는 간단한 카운터 애플리케이션을 구축하면서 `useState` Hook 을 사용하여 React 에서 컴포넌트 상태를 관리하는 기본 사항을 배우게 됩니다.

이 실습에서는 간단한 함수형 컴포넌트를 생성, 내보내기 및 가져오면서 React 컴포넌트의 기본 사항을 배우게 됩니다.

이 실습에서는 Vite 를 사용하여 새로운 React 프로젝트를 설정하고 첫 번째 React 애플리케이션을 실행하는 기본적인 단계를 배웁니다.

이 실습에서는 React prop 의 기본 사항을 배우고, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법, prop 에 접근하는 방법, 구조 분해를 사용하는 방법, 기본값을 설정하는 방법을 알아봅니다.

이 프로젝트에서는 React 를 사용하여 간단한 픽셀 아트 애니메이터를 구축하는 과정을 안내합니다. 이 가이드가 끝나면 픽셀 아트를 그리고 결과 애니메이션을 볼 수 있는 기본적인 픽셀 아트 편집기를 갖게 됩니다. 이 프로젝트는 초보자도 쉽게 따라 할 수 있으며, React 와 픽셀 아트의 세계에 빠져들 수 있는 재미있는 방법을 제공합니다!

이 프로젝트에서는 React 를 사용하여 간단한 Notes 앱을 만들 것입니다. 이 앱을 통해 사용자는 노트를 추가, 편집 및 삭제할 수 있습니다. 개발을 여러 단계로 나누어 각 단계가 특정 요구 사항을 충족하고 필수 기능을 추가하도록 할 것입니다.

이 프로젝트는 React 를 사용하여 축제 분위기의 크리스마스 위시 리스트 빌더 웹 애플리케이션을 구축하는 과정을 안내합니다. 이 앱은 아름다운 전체 화면 크리스마스 테마 배경과 매력적인 눈송이 애니메이션을 특징으로 하여 휴가 분위기를 고조시킵니다. 사용자는 반투명 위시 벽에 소원을 추가할 수 있으며, 각 소원은 엽서 형태로 표시됩니다. 프론트엔드에는 React 를 사용하고, 스타일링 및 애니메이션에는 CSS 를 사용합니다.

이 프로젝트에서는 React 를 사용하여 간단한 show/hide 기능을 만드는 방법을 배웁니다. 페이지에서 이미지의 표시 여부를 토글하는 버튼을 구현합니다.

이 프로젝트에서는 React 를 사용하여 개인 명함을 만드는 방법을 배웁니다. 이 프로젝트는 사용자가 개인 정보를 입력하고 맞춤형 명함을 생성할 수 있는 반응형 및 대화형 웹 애플리케이션을 구축하는 것을 포함합니다.

이 프로젝트에서는 React 애플리케이션에서 네비게이션 기능을 구현하는 방법을 배우게 됩니다. 링크를 사용하여 탐색할 수 있는 네비게이션 바와 페이지가 있는 간단한 애플리케이션을 만들 것입니다.

이 프로젝트에서는 React 를 사용하여 색상 필터 애플리케이션을 구축하는 방법을 배웁니다. 이 애플리케이션을 통해 사용자는 찾고 있는 색상의 이름을 입력하여 색상 목록을 필터링할 수 있습니다. 이 프로젝트는 React 에서 상태 관리, 이벤트 처리 및 조건부 렌더링을 사용하는 방법을 이해하는 데 도움이 될 것입니다.

이 프로젝트에서는 현재 창 크기를 가져와 웹 애플리케이션의 네비게이션 바를 조건부로 렌더링하는 useWindowSize 라는 사용자 정의 React Hook 을 만드는 방법을 배웁니다.

안녕하세요, LabEx 에 오신 것을 환영합니다! 이 첫 번째 랩에서는 React 에서 고전적인 'Hello, World!' 프로그램을 배우게 됩니다.