리액트 코스

React 강좌 소개:

• 서문.

• React란 무엇인가와 라이브러리의 역사에 대하여.

• 코드베이스 시스템을 다루는 것에 대한 강조.

기본 React 컴포넌트:

• React에서 JSX가 무엇인지 배우기.

• 기본 첫 컴포넌트를 작성하는 방법.

• 정적 데이터를 가진 컴포넌트를 구축하고 기본을 이해하기.

동적 데이터로 리스트 구축하기:

• 동적으로 요소 구축하기.

• 동적 구축을 위한 Array.prototype.map의 기능 사용하기.

• 파일에서 컴포넌트를 가져오기 및 내보내기.

동적 데이터로 테이블 구축하기:

• HTML에서 테이블과 그 구성 요소의 구조.

• 중첩된 루프를 사용하여 테이블 구축하기.

• 중첩된 방식으로 map 함수 사용하기.

• 가져온 파일에서 동적 데이터 사용하기.

Style Object로 스타일링하기:

• HTML과 JSX의 차이점을 이해하기.

• 페이지의 요소들을 스타일링하는 방법을 배우기.

• 배운 스타일을 활용하여 도전적인 방식으로 동적 요소 구축 연습하기.

React에서 CSS 파일 통합하기:

• 컴포넌트 구축의 필수적인 부분으로 스타일 세계를 통합하는 방법.

• className이 무엇인지 이해하고 HTML과 JSX의 차이점을 아는 것.

• 이 과정에서 지금까지 배운 모든 자료의 종합적인 연습을 통합하는 것.

• CSS 규칙을 강조하고 우리가 구축한 시스템에 어떻게 통합하는지에 대해 설명하는 것.

컴포넌트에서 Props 통합하기:

• React에서 props는 무엇이며 언제 사용하는가.

• props와 함께 컴포넌트를 구축하고 작성하는 일반적인 방법들.

• 동적 빌딩에서 우리가 작성한 컴포넌트 사용하기.

프롭스를 사용하여 테이블 구축하기:

• 프롭스를 사용하여 테이블 만들기.

• 테이블 구축에서 스마트 컴포넌트 생성하기.

• 프롭스와 CSS를 사용한 스타일링으로 다중 컴포넌트를 사용한 동적 구축 결합하기.

이벤트 및 useState 사용하기:

• onClick 유형의 이벤트를 요소에 연결하는 방법.

• 스마트 컴포넌트가 무엇인지, 왜 필요한지에 대해.

• useState 유형의 리액트 훅이 무엇이며 어떻게 사용하는지에 대해.

• 컴포넌트의 JSX 내부에서 불리언 조건을 만드는 방법.

• 스마트 React 컴포넌트를 구축하기 위한 이벤트 생성과 상태 저장 연결하기.

onChange 이벤트 사용하기:

• 페이지에 입력란을 추가하고 useState를 사용하여 입력 값 저장하는 방법.

• 사용자 입력 데이터를 가진 동적 리스트 구축하기.

• 배열과 값과 참조의 차이에 대한 심층 설명.

• 컴포넌트의 상태에 저장된 배열을 다루는 방법 이해하기.

이벤트를 활용한 동적 테이블 구축:

• 지금까지 배운 내용을 통합하여 동적으로 테이블을 구축하는 방법 이해하기.

• 여러 입력을 저장하기 위해 useState 사용하기.

• 객체 배열을 사용한 복잡한 상태 사용 예제.

useEffect 훅 사용하기:

• useEffect 타입의 react 훅이 무엇이며 언제 그리고 어떻게 사용하는가.

• fetch를 사용하여 서버와 통신하기.

• 불필요한 오류를 피하기 위해 코드를 안전하게 보호하는 방법들을 보여주기.

• useState와 useEffect 훅을 모두 결합한 스마트 컴포넌트 구축하기.

서버 사이드 검색에서 useEffect 사용 예:

• useEffect의 추가적인 사용법 탐색하기.

• 컴포넌트의 생명주기가 코드 구현에 미치는 영향 이해하기.

• useEffect를 사용한 복잡한 예제 제시하기.

추가 입력 사용하기:

• 체크박스 입력이 무엇이며 어떻게 사용하는가.

• 라디오 입력이 무엇이며 어떻게 사용하는가.

• datetime 및 datetime-local 입력이 무엇이며 언제 사용하는가.

API에서 결과 필터링으로 테이블 구축하기:

• 테이블에 대한 데이터를 가져오기 위해 API 요청을 만드는 중입니다.

• 테이블을 동적으로 구축합니다.

• 스마트 결과 필터링을 통한 검색 수행 방법을 배웁니다.

• 코드 아키텍처에 대해 논의합니다.

고급 필터 사용:

• 항공편에 대한 정보를 표시하는 테이블 구축.

• 스마트 행 컴포넌트를 사용하여 테이블 사용 확장.

• 체크박스, datetime, 텍스트 입력을 사용하여 테이블에 대한 필터를 구축하는 데 사용되는 입력.

고급 스타일링을 위한 Bulma 라이브러리:

• 레디메이드 스타일을 적용하는 방법을 배우기.

• React 프로젝트에 색상과 스타일을 추가하기 위해 bulma 패키지 사용하기.

• 기존 컴포넌트에 스타일을 적용하고 사용할 라이브러리의 문서를 살펴보기.

자바스크립트에서의 정렬:

• 기존 테이블 컴포넌트를 개선하고 정렬 기능을 추가하기.

• 숫자, 문자열, 객체가 있는 배열에서 정렬이 어떻게 작동하는지에 대한 심층 이해.

• 우리의 필드가 직접적인 비교가 아닐 때 특별한 정렬을 다루는 방법을 보기.

컴포넌트 간의 통신 채널:

• 자식 컴포넌트가 부모 컴포넌트와 어떻게 통신하는지 학습합니다.

• 여러 컴포넌트에 bulma 스타일링 적용하기.

• 애플리케이션에 탭을 내장할 수 있는 다용도 컴포넌트 구축하기.

• 함수 타입의 props를 사용하는 예시들을 보기.

결론