210429_React

리액트(React) :
frontend 개발을 위한 JavaScript 오픈소스 라이브러리

리액트의 3가지 특징

선언형(Declarative)

한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 지향

코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식

컴포넌트 기반(Componenet-Based)

하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
서로 독립적이고 재사용 가능하기 때문, 기능 자체에 집중하여 개발 가능

컴포넌트 코드를 먼저 보고 문제점 파악 가능 -> 유지보수 및 유닛테스트 편리

범용성(Learn Once,Write Anywhere)

JavaScript 프로젝트 어디에든 유연하게 적용가능
Facebook에서 관리되어 안정적, 가장 널리알려진 프론트엔드 개발 기술, 리액트 네이티브 사용시 - 모바일 개발도 가능

JSX: JavaScript XML의 줄임말 !문자열 && !HTML

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
이 문법을 이용해서 React 엘리먼트를 만들 수 있다.

Babel: JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발
컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어듬 + 한 눈에 컴포넌트를 확인 가능
->JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치가능

한눈에 볼 수 있는 기능과 디자인 (HTML + JavaScript) - 명시적
JSX를 사용함으로써 코드의 복잡성을 줄이고, 이를 이해하기 쉽게 만듬

JSX 활용

주요 JSX 문법
JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸준다
React에서 CSS class 속성을 지정하려면
"className"으로 표기
JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용
사용자 정의 컴포넌트 : React 엘리먼트가 JSX로 작성되면 "대문자"로 시작
조건부 렌더링은 if문이 아닌 삼항연산자
React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수 이용 -> map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣음/ 위치는 map 메소드 내부에 있는 첫 엘리먼트

map을 이용한 반복

반복적으로 작성해야 하는 부분만 골라서 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링

key 속성 값은 가능하면 데이터에서 제공하는 id를 할당해야 함
-> id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문
정 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결, but 배열 인덱스는 최후의 수단(as a last resort)
리액트공식문서-key부분

Component

컴포넌트 기반 개발의 장점

ex) UI 개편시 기존의 헤더를 사이드로 옮기고 싶다 -> 각각 HTML,CSS,JAVASCRIPT가 DOM조작 하게끔 수정

Create React App

리액트 SPA 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인

React Intro
Achievement Goals
React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.
React SPA
Achievement Goals
SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.
SPA의 장, 단점에 대해 이해하고 설명할 수 있다.
와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다.
React에서 npm으로 React Router DOM을 설치(npm install react-router-dom)하고 이용할 수 있다.
React Router DOM를 이용하여 SPA를 구현할 수 있다.
라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.
React State & Props
Achievement Goals
State, Props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
React 함수 컴포넌트(React Function Component)에서 State hook을 이용하여 State를 정의할 수 있다.
React 컴포넌트(React Component)에 Props를 전달할 수 있다.
이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 State이고 Props에 적합한지 판단할 수 있다.
실제 웹 애플리케이션 개발 시 적합한 State와 Props의 위치를 스스로 정할 수 있다.
React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.