[React] 컴포넌트(Component)와 생명주기(LifeCycle)

1. 컴포넌트(Component) 리액트에서 컴포넌트는 Props와 State를 가지는 Object이다. 컴포넌트는 props를 외부에서 입력으로 받고 컴포넌트에서 엘리먼트를 조합하여 렌더링을 위한 DOM을 출력으로 반환하는 객체 즉, 부모로부터 전달된 props를 받아 DOM을 출력으로 반환한다. 리액트 엘리먼트 - React 엘리먼트는 , 과 같은 하나의 DOM에 해당하는 요소를 의미 따라서 리액트에서 엘리멘트들이 모인 구조가 하나의 컴포넌트를 의미한다. 엘리먼트들을 모아 모듈화한 재사용 가능한 크기의 집합을 컴포넌트라고 할 수 있다. 2. 컴포넌트 종류 클래스형 컴포넌트 - 리액트 초기의 컴포넌트 방식(구식) - 클래스형은 React.Component를 상속받기 때문에 import React fro..

[React] JSX이란? (정의, 주의 사항, 관련 문법)

1. JSX(JavaScript XML) JavaScript에 XML 개념 및 문법을 추가한 JavaScript 개발 문법이다. 공식적인 개발 방법이 아니며, 리액트에서만 사용되는 개발 문법이다. JavaScript문 안에서 HTML, CSS문이 가능하기에 편리하다. 2. JSX 주의 사항 및 관련 문법 반드시 부모 요소 하나가 감싸는 형태여야 한다. 자바스크립트 표현식 if문(for문) 대신 삼항연산자(조건부 연산자)를 사용 JSX 내에서 주석 사용 방법 3. 반드시 부모 요소 하나가 감싸는 형태 - 부모가 2개 이상이면 오류가 발생한다. - 반드시 부모는 1개로 만든다. - 이것의 해결 방법으로는 , 가 있다. 4. 자바스크립트 표현식 - JSX 안에서도 자바스크립트 표현식을 {}을 감싸 주어야 사용..

[React] DOM과 Virtual DOM

1. 문서 객체 모델(DOM) https://tadaktadak-it.tistory.com/140 [JavaScript] 문서 객체 모델(DOM) 1. 문서 객체 모델(DOM) - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 tadaktadak-it.tistory.com - DOM : Document Object Model - DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환 - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하..

[React] React 개요 및 설치, 기본 동작

** 프레임워크 vs 라이브러리 ** 프레임워크는 내가 개발할 때 환경에 종속되어 개발하는 경우를 말함 라이브러리는 내가 개발하는 언어에 추가로 파일을 연결하여 개발하는 경우를 말함 즉, 프레임워크는 미리 만들어진 틀 안에서 그 제한된 환경 안에서 사용하는 것이고 라이브러리는 원래 있는 환경에서 미리 만들어진 것을 가져와서 쓰는 것이다. 1. React(리액트) - 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 javascript로 만든 라이브러리 - React는 웹 브라우저의 UI를 구현하는 라이브러리로 기본적으로 CSS, HTML, JavaScript 개발언어를 이용한 컴포넌트 기반 프론트엔드 라이브러리이다. - React는 state가 변경되면 그 컴포넌트 만 리렌더링이 ..