К содержанию

React 주요 튜토리얼

JavaScript 프레임워크 React에 대한 튜토리얼. 초보자를 위한 것입니다. 많은 이론과 작업.

Уроки

React 프레임워크 소개

React 프레임워크 설치

react-devtools 플러그인 연결

React에서의 컴포넌트 기반 접근법 소개

React 프레임워크의 사이트 레이아웃

컴포넌트의 동작 결과

JSX 언어

React에서 JSX 언어 소개

JSX 중첩 태그를 함수로 반환하기

JSX에서 태그를 아래로 내릴 때 함수 반환 규칙

JSX에서 여러 태그를 반환하는 특징

닫히지 않은 JSX 태그 반환

JSX에서 함수에 의한 빈 태그 반환

JSX에서 변수와 상수 값 삽입하기

변수 값 삽입 시 주의사항

JSX에서 배열 삽입하기

JSX에서 객체 삽입하기

JSX에서 태그 속성에 변수와 상수 삽입하기

JSX에서 변수와 상수에 태그 저장하기

JSX 상수에 여러 태그를 저장할 때의 특징

JSX에서 여러 줄에 걸친 태그

JSX에서 return을 통한 태그 반환

JSX 태그 닫기

React에서의 올바른 마크업

JavaScript 코드 실행

조건문

JSX에서 조건 적용하기

React에서 조건부 렌더링

JSX에서 태그 반환 조건

JSX에서의 삼항 연산자

JSX에서 && 연산자 사용하기

JSX에서 단축 조건을 위한 역전

함수

React에서 함수 사용하기

React에서 태그 내부의 함수 호출

JSX에서 이벤트 바인딩하기

JSX 함수의 매개변수

React에서 Event 객체

매개변수 전달 시 Event 객체

태그 형성

JSX 배열 내 태그

React 루프에서 태그 배열 생성하기

데이터 배열로부터 태그 생성하기 in React

React에서 태그 배열의 고유 키

React에서 객체 배열 출력하기

React에서 id를 통한 고유 키

React에서 객체 배열을 HTML 테이블로 출력하기

고유 id

React에서 고유 id에 대한 논의

React에서 새로운 id의 문제점

React에서의 임의 문자열 ID

React에서 id 생성

React에서 id 생성을 위한 함수

React에서 id 함수 사용하기

React에서 id 함수의 잘못된 사용법

상태

React의 상태(State) 소개

React에서 상태 사용하기

React의 상태 반응성

React 상태의 논리값

React에서 상태를 사용한 카운터

폼(Forms)

React에서 입력 필드 다루기

React에서 입력 데이터 출력 시 변경하기

React에서 함수를 사용하여 데이터 변경하기

React에서 여러 개의 입력 필드 작업하기

버튼 클릭 시 React에서 폼 데이터 처리

React에서 textarea 다루기

React에서 체크박스 작업하기

React에서 체크박스와 조건부 렌더링

React에서 select 다루기

React에서 배열로부터 선택 옵션 생성하기

React에서 select의 value 속성

React에서 배열로부터 select의 value 속성 다루기

React에서 radio 다루기

React의 기본값

React에서 입력 필드를 배열에 바인딩하기

React에서 객체에 인풋 바인딩하기

데이터

React에서 데이터 반응성

React에서 배열에 반응형으로 추가하기

React에서 배열의 반응형 연산

React에서 객체 배열에 반응적으로 추가하기

React에서 객체 배열에 대한 반응형 연산

React에서의 반응형 데이터 표시

컴포넌트

React 컴포넌트 소개

React에서 컴포넌트 사용하기

React에서 여러 컴포넌트 인스턴스

React 컴포넌트의 Props

React에서 자식 컴포넌트 생성하기

React에서 자식 컴포넌트를 생성하기 위한 배열

React 루프에서의 자식 컴포넌트

React에서 하위 구성 요소에 상태 전달하기

React에서 컴포넌트로 id 전달하기

React에서 자식 컴포넌트에서 부모의 상태 변경하기

React에서 자식 컴포넌트에서 부모 상태 편집하기

React에서 자손 컴포넌트에서 상태 편집하기

React에서 자식 컴포넌트의 상태를 통한 작업 모드

컨셉

컴포넌트 작업 시 React의 주요 개념

React의 컴포넌트 데이터

React의 컴포넌트 유형

React에서의 단방향 데이터 흐름

React에서 상태 끌어올리기

React에서 단일 진실 공급원

스타일링

React 컴포넌트 스타일링 방법

React에서 스타일링 시 전역 CSS 사용

React에서 객체를 사용하여 style 속성에 데이터 삽입하기

별도 파일에서 React의 style 속성에 데이터 삽입하기

React에서 style 속성으로 CSS 스타일 작업하기

React에서 변수 데이터를 style 속성에 삽입하기

Styled Components를 이용한 React 스타일링

Styled Components에서 Props 사용하기

Styled Components를 사용한 React에서 조건부 렌더링 시 props 활용

React 컴포넌트의 고급 스타일링

React에서 CSS 모듈을 사용한 스타일링 학습 시작하기

CSS 모듈을 활용한 React 스타일링 심화 학습

React에서 CSS modules의 composes 클래스 명령어

React에서 CSS 모듈의 파일 간 composes 명령

프로젝트

React 체크리스트 프로젝트

React 노트 프로젝트