목차 SCSS 소개 SCSS 사용환경 구축 SCSS 파일 생성/사용 SCSS 소개 1. SCSS: SASS를 CSS와 유사하게 변형한 CSS 전 처리기. SASS / SCSS / CS…

목차 인라인 방식 인라인 스타일 변형 방식 (= 스타일 JS객체 별도 생성) 외부스타일 방식 CSS 모듈 이용 방식 ※ CSS로 React를 스타일링하는 방법은 여러 가지 존재. ※ CSS 스타일 적용법 3가지 : (인라인/내부/외부)스타일 인라인 방식…

목차 form 추가 form 처리 조건부 렌더링 form 전송 여러 입력 필드 양식 유효성 확인 오류 메세지 추가 textarea (긴 텍스트 입력) select (드롭다운 선택창) ※ HTML처럼, Reac…

목차 events 사용 events 추가 구문 events handler (이벤트 핸들러) this 키워드로 묶기 인수 (= 독립변수) 전달 React event object (리액트 이벤트 객체) events 사용 …

목차 ※ Lifecycle of Components (컴포넌트 수명주기) React의 각 컴포넌트에는, 3가지 주요 단계에서 검사 및 조작 할 수있는 수명주기 존재. (즉,Mounting → Updating → Unmounting) Mounting (마…

목차 state 객체 정의 state 객체 생성 state 객체 사용 state 객체 변경 state 객체 정의 컴포넌트에 속하는 속성값을 저장하는 곳. (Props가 사용자용이라면, State는 제작자용임.) …

목차 Props 정의 Props 예제1 - 컴포넌트에 속성값 전달 Props 예제2 - 다른 컴포넌트로 데이터 전달 Constructor 안의 Props Props 주의사항 - Props 수정 금지 Props 정의 &nbs…

목차 Components (컴포넌트) 정의 Class Components (클래스 컴포넌트) 생성법 Function Components (함수 컴포넌트) 생성법 Component Constructor (컴포넌트 생성자) Props 컴포넌트 안에 다른 컴포넌트 가져오기 …

목차 JSX 정의 JSX 코딩 JSX 문법 - 표현식 입력은 { } 중괄호 사용 JSX 문법 - HTML 코드 블럭 입력은 () 소괄호 사용 JSX 문법 - 하나의 최상위 요소로 감싸야 함 JSX 문법 - 요소 닫기 JSX 정의 …

목차 React 목표 ReactDOM.render() 구문 HTML 코드 root 노드 React 목표 React 목표는 여러 방법으로 웹페이지에 HTML을 렌더링하는 것임. &nbs…