S2 unit4 | React 기초

📌 React

: 프론트엔드 개발을 위한 Javascript 오픈소스 라이브러리

 

➰ 특징

1. 선언형 (Declarative)

    - 하나의 파일에 JSX를 활용해 HTML,JS 결합하여 코드를 작성할 수 있다.

 

2. 컴포넌트 기반

    - 컴포넌트 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 것 (독립적인 단위 모듈)

    - 서로 독립적이고 재사용성 높음 => 유지보수 쉬움

 

3. 범용성

    - 프레임워크는 생태계에 종속되지만, 라이브러리는 기존 프로젝트에도 유연하게 사용 가능함

    - 리액트 네이티브로 모바일 개발도 가능

 

📌 JSX (Javascript XML)

: React에서 사용하는 javascript를 확장한 문법

브라우저가 바로 실행할 수 있는 문법이 아니기에 'Babel'이 이를 컴파일(JSX => Javascript) 하여 브라우저가 렌더링

 

문법

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함 (최상위 태그가 있어야 함)

2. class 대신 className 사용 : javascript의 class와 구분

3. JSX에서 Javascript를 사용할 땐 중괄호{}로 묶음

4. React 엘리먼트가 JSX로 작성되면 대문자로 작명 => JSX 컴포넌트 = 사용자 정의 컴포넌트

    : 소문자는 일반적인 HTML 엘리먼트로 인식

5. if문 대신 삼항연산자를 사용

6. 여러 개의 HTML 엘리먼트를 표시할 땐 .map() 사용

    : 첫번째 JSX 항목에(대체로 ID) "key" 속성 사용 

      자바스크립트에서 .map()은 반환되는 값의 타입이 배열이지만, JSX에서 {array.map()}으로 넣어도 된다.

       (미묘한 융통성)

 

📌 컴포넌트

: 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 것 (독립적인 단위 모듈)

: UI를 구성하는 필수 요소

 

모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 트리구조를 이루고 있다.

 

📌 create react app

: 필요한 프론트앤드 개발 세팅을 대신 해주는 툴 체인

npx create-react-app@latest 폴더이름