리액트 배우고 이해하기 - 실전 튜토리얼

여기에서는 이후에 다룰 주제를 소개하고, 이 과정의 배경에 대해 언급합니다.

자바스크립트용 무수히 많은 UI 프레임워크가 있습니다 - 왜 React여야 하는지?
이 라이브러리의 인기와 함께 React를 선택해야 하는 몇 가지 더 깊은 이유가 있습니다.

이 레슨에서는 개발 환경을 설정하고 npm create vite를 사용하여 손쉽게 첫 번째 React 앱을 만듭니다.

지난 레슨에서 "새로운" React 앱을 만든 후, 여기서는 이 앱의 구조를 이해하고 React를 웹페이지에 통합하는 방법을 설명할 것입니다.

var vs. let/const에 관한 작은 재미있는 내용입니다.

디스트럭처링은 객체와 배열에서 요소를 효율적으로 추출할 수 있게 합니다. 자세히 살펴보면 JS 코드를 더 우아하고 간결하게 만들 수 있는 많은 응용 가능성이 나타납니다.

기능은 JS에서 중요하며 이제까지 function 키워드를 사용하여 선언 및 정의되었습니다. ES6은 코드를 보다 가독성 있게 만들고 this와 관련된 문제에 대한 해결책을 제공하는 우아하고 간결한 쓰기를 도입합니다.

NodeJs에서는 처음부터 모듈이 사용되었지만 처음에는 require.과 같은 CommonJs 모듈 형식에만 의존했습니다. ES6부터는 표준 모듈 정의와 새로운 키워드 import/export.가 추가되었습니다. 현재 이 형식은 대부분의 (새로운) JS 라이브러리에서 지원되며 NodeJs도 최신 버전에서 처리할 수 있습니다.

JSX를 사용하여 컴포넌트의 UI를 설명하고 JS 표현식을 통합합니다. 비디오에 대한 프로젝트 파일에는이 튜토리얼 섹션의 완성된 코드가 포함되어 있습니다.

자체 React 구성 요소는 JSX를 반환하는 함수를 사용하여 매우 쉽게 작성할 수 있습니다.

이 강의에서는 데이터와 JavaScript 표현식을 JSX에 통합하는 방법을 설명합니다.

상태가 변경될 수있는 상태가없으면 의미있는 앱을 구현 할 수 없습니다. React에서는 일반적으로 useState를 사용합니다. 이 레슨에서는이 훅을 소개하고 사용 방법을 설명합니다.

Props는 데이터를 자식 컴포넌트에 전달하는 데 사용됩니다. 이것이 어떻게 이루어지는지와 주의할 점에 대해 여기서 설명합니다.

Props가 동적으로 변경되면 해당 컴포넌트의 렌더 함수가 다시 호출됩니다.

여기에서는 할 일 앱의 구성 방법에 대해 설명합니다. 비디오는이 자습서 섹션의 완성된 코드가 포함 된 프로젝트 파일을 기반으로합니다.

만약 자식 컴포넌트가 부모 컴포넌트에게 무언가를 전달하려면 콜백 프롭을 통해 가능합니다.

To-do는 언젠가 완료되어야 합니다. 여기서는 코드에서 이 작업을 하는 방법에 대해 논의합니다.

UI의 모양은 의심의 여지가 없이 중요합니다. 그래서 Emotion 라이브러리를 사용하여이를 어떻게 구현하는지와 Prop className을 사용하는 방법을 설명하겠습니다. 또한, 개별적으로 각 요소를 스타일링하는 데 사용할 수있는 style- 속성에 대해 논의 됩니다.

To-do 배열을 필터링하면 To-do 항목을 두 그룹으로 나눌 수 있습니다.

물론 To-do 항목을 삭제할 수도 있어야 합니다. 여기서는 배열 필터링을 통해 이 작업이 수행되는 방법에 대해 설명합니다.

지금까지 우리는 구성 요소를 항상 DIV로 „감쌌었다“. 그러나 특정 경우에는 이를 생략할 수도 있다.

이제 흥미로워집니다: 할 일 목록은 브라우저 저장소에 상당히 쉽게 지속적으로 저장되고 물론 불러올 수 있으며 페이지를 다시로드해도 "생존"할 수 있습니다.

useEffect를 사용하면 부수 효과를 통합할 수 있습니다. 이 함수를 사용하여 컴포넌트를 마운트할 수도 있습니다.

우리의 할일 앱에 대한 간단한 요약 및 최종 개선 사항입니다.

비디오 플레이어 앱은 create vite로 생성되며, 앱의 구조에 대한 설명이 제공됩니다. 비디오와 함께 제공된 프로젝트 파일에는 비디오 플레이어의 완성된 코드가 포함되어 있습니다.

속성 ref를 사용하여 DOM 요소를 참조하고 useRef로 액세스할 수 있습니다. 이 예제에서는 비디오 요소를 사용합니다.

우리는 이미 재생, 일시정지 및 정지 버튼이 있는 실제 비디오 플레이어를 만듭니다.

Play(재생)와 Pause(일시정지)를 동시에 필요로 하지 않기 때문에, 이 둘을 하나의 버튼으로 결합합니다.

비디오 요소의 자체 컨트롤이 비디오를 제어하지만, 이로 인해 재생/일시정지 버튼의 상태가 적절하게 업데이트되지 않습니다. 비디오 요소에서 이벤트 핸들러를 사용하여 이를 해결합니다.

소리 크기는 우리가 별도의 조절 장치를 통해 조절할 수도 있습니다.

비디오의 임의 위치로 이동하는 것 (Seek)은 currentTime 속성을 설정함으로써 놀랍도록 쉽게 수행할 수 있습니다.

비디오의 길이는 비디오 메타데이터를로드 한 후에만 확인할 수 있으므로 올바른 이벤트를 기다려야합니다.

플레이리스트는 select HTML 요소로 구현된 목록으로 생성됩니다.

useEffect를 여기에서 사용하여 src 속성의 변경에 반응하고 비디오 플레이어의 상태를 재설정합니다.

재생 목록이 고정 된 항목에서 배열로 변환됩니다.

이제 비디오 목록 편집이 시작됩니다: 비디오 항목 추가를 추가합니다.

추가한 것은 다시 삭제할 수 있어야 합니다. 이를 To-do-App과 비슷하게 필터링하여 수행합니다.

재생 목록은 "북마크 목록"으로만 사용되는 것이 아니라, 비디오를 자동으로 연속해서 재생하는 것도 목적입니다. 이 기능은 이 레슨에서 구현됩니다.

기다릴 수 없는 사람을 위한: 다음 비디오와 이전 비디오를 위한 버튼.

첫 번째와 마지막 비디오는 특별히 처리되어야 합니다: Next 및 Previous 버튼이 각각 비활성화되어야 합니다.

지금 저장하고 플레이리스트를 로드합니다. 이는 브라우저의 로컬 스토리지와 동일하게 작동합니다.

비디오 플레이어 앱에서 사용되는 예제 비디오들은 여기에서 원본으로 볼 수 있습니다 (모두 CC-Attribution 라이센스, 해당 웹 사이트 참조):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

useJsonFetch-훅을 예로 들어, 사용자 정의 훅 함수를 어떻게 작성할 수 있는지 설명합니다.

useState의 Setter로 상태를 변경하는 것은 꼼수일 수 있습니다. 하지만 useImmer를 사용하면 더 이상 문제가 되지 않습니다.

UI가 사용자 입력에 더 빠르게 반응하고 렌더링 함수가 불필요하게 호출되지 않을 때 UI를 더 빨리 구축합니다. memo를 사용하여 속성이 변경되지 않을 때 컴포넌트가 렌더링되지 않도록 방지할 수 있습니다.

useCallback을 사용하면 Callback-Props를 사용할 때 자식 컴포넌트의 불필요한 렌더링을 방지할 수 있습니다.

렌더 함수 내에서 복잡한 계산은 필요할 때에만 수행되어야 합니다. useMemo를 사용하여 이러한 계산 결과를 종속성을 고려하여 캐싱할 수 있습니다.

나는 여기서 수업 결과를 요약하고 수강자들이 수업 이후에 무엇을 봐야 하는지 안내합니다.