[React] Intro / 프로젝트 시작

사전 지식

리엑트를 공부 하기 전 사전 지식

HTML / CSS 기초 개념
JS 기초 개념
함수형 프로그래밍 / 고차 함수 개념 및 이해
배열 내장 메소드 기초
ES6 문법 이해 >>> 공부 필요
컴포넌트 용어

React intro 공부 목표

React 3가지 특징 이해 및 설명
JSX가 왜 명시적인지 이해 및 작성능력
React 컴포넌트의 필요성 이해 및 설명
create-react-app으로 간단한 개발용 react앱을 실행

React

React란?
프론트엔트 개발을 위한 JS 오픈 라이브러리이다

3가지 특징으로는 선언형, 컴포넌트 기반, 범용성 을 가지고 있다.

선언형
React는 HTML/CSS/JS로 나눠 적기 보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍이다.

컴포넌트 기반
React는 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발 >>> 코드 하나하나가 따로 있다는 뜻
컴포넌트로 분리하면 서로 독립적이고 재사용이 용이하다는 이점이 있다.
따라서 기능에 집중하여 개발할 수 있다. 또한 유지보수가 쉬워지고 유닛 테스트가 편하다.

범용성
React는 JS의 어디서나 사용 가능하다. 또한 관리가 안정적이고, 가장 널리 알려진 프론트엔드 개발을 위한 라이브러리이다.

JSX?

JSX는 JS를 확장한 문법이라고 한다. 또한 JS의 모든 기능이 포함되어있어 개발하기에도 용이하다.

또한 JSX !== HTML 이다.
JSX의 문법을 읽기 위해 컴파일이 필요하고 이때 사용되는 것이 Babel 이다.
DOM 은 HTML/CSS/JS를 가지고 사용하는 문법이라면 JSX는 CSS/JSX를 사용하는 문법이다.

JSX 규칙

오픈 tag와 클로즈 tag로 감싸주어야 한다.
React에서 CSS class속성을 지정하려면 className=""으로 표기해야 한다.
JSX 내에서 JS를 사용하고자 한다면 {}를 사용해야 한다.
React element가 JSX로 작성 되려면 대문자로 시작해야 한다. <<< 이를 사용자 정의 컴포넌트라고 한다.
조건문은 if가 아닌 삼항연산자를 이용해야 한다.
여러 개의 HTML element를 표시할 때, map() 메소드 사용

간단한 삼항연산자 예시

{
    let list = [];

    (Array.isArray(list)) ? (true) : (false)
}

간단한 JSX내의 map 사용

const objs = [
    {first : 1, second : 2},
    {first : 3, second : 4}
]

function Mapping() {
    const content = objs.map((arg) =>
      <div key={arg.first}>
        <h1>{arg.second}</h1>
      </div>    
    );

    return (
        <div>{content}</div>
    )
}

컴포넌트

하나의 기능 구현을 위한 여러 종류의 코드 묶음이다.
따라서 각자의 독립적인 기능을 가진 묶음을 가지며, 이런 컴포넌트를 여러개를 가지고 Application을 만들 수 있다.

component는 root를 가진 트리 구조를 생각하면 쉽다.

Rendering

HTML, CSS, JS로 작성된 문서를 해석하여 브라우저에 시각적으로 출력하는 것이다.

React Create React App 공부 목표

Create React App 개념 이해 및 설명
npx create-react-app 프로젝트 시작
create-react-app로 react앱 실행
react 랜덤 명언 앱을 만들기
Create React App로 만들어진 리액트 프로젝트 구성 이해

React Create React

시맨틱 태그 의미를 가진 태그, 개발자와 브러우저엑 의미있는 태그를 제공
HTML5 코드 의 가독성을 높여준다.

저작자표시