오늘은 말로만 듣던 React에 대해 직접 배워보고
페어님과 함께 React 실습을 진행했다
아직까진 재밌다..!!
Before Learn...
-
고차 함수 : 함수를 리턴하는 함수이거나, 함수의 전달인자로 함수를 받는다.
-
그동안 내가 페이지 단위로 프론트엔드 개발을 배웠다면
-> React를 통해 컴포넌트라는 단위로 나누어 생각하고 개발하기 -
라이브러리: 다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합
✅ TIL
- React 기초, 3가지 특징, 주요 문법
- JSX
- Create React App
React란?
웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용할 수 있는 JavaScript 프론트엔드 오픈소스 라이브러리
React 3가지 특징
- 선언형 (Declarative)
선언형 프로그래밍 지향 (원하는 결과값을 선언한다)
코드를 자세히 작성하지 않아도 그 기능을 분명히 알 수 있다. (명시적, 직관적)
하나의 JavaScript 파일에 구조와 기능을 명시적으로 작성할 수 있는 JSX를 활용한다.
- 컴포넌트 기반 (Component-Based)
컴포넌트 : 하나의 기능 구현을 위한 구조와 동작에 대한 코드를 묶어놓은 코드셋
서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다.
독립성, 재사용성 -> 유지보수, 유닛테스트, 각 기능 작동에 집중하여 개발
- 범용성 (Learn Once, Write Anywhere)
어떤 JavaScript 작업 환경에도 유연하게 적용이 가능하다.
리액트 네이티브로 모바일 개발도 가능하다.
JSX (JavaScript XML)
JavaScript가 확장된 문법
자바스크립트 + HTML
- React UI를 구성할 때 사용하는 문법이다.
React에서 JSX 사용이 필수는 아니지만 주로 쓰인다.
JSX를 사용하면 JavaScript만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있다.
DOM = JS + HTML + CSS
React DOM = JSX + CSS-
하나의 파일에서 자바스크립트와 HTML을 함께 표현하여 컴포넌트로 묶어서 사용할 수 있다.
리액트 컴포넌트 리턴값은 하나의 JSX 표현식이여야 한다. -
Babel을 통해 JavaScript로 compile되어야 브라우저가 읽고 화면에 렌더링 할 수 있다.
JSX 주요 문법 특징
- 하나의 최상위 엘리먼트 안에 모든 엘리먼트를 포함한다.
<opening tag>
<... />
<... />
</closing tag>- 엘리먼트 클래스 사용시 className으로 표기
class로 작성시 자바스크립트 class가 된다.
<div className="..."></div>-
JavaScript 표현식 사용시 {중괄호} 사용
-
사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)
-
조건부 렌더링에는 if문이 아닌 삼항연산자 사용
if문의 return으로는 변수에 할당 불가 -
여러개의 HTML 엘리먼트 표시할 때
.map()함수 사용
JSX 속성key를 넣어야 한다.
key는 데이터가 가지는 고유한id값(식별자)을 활용한다.
(index 값을 사용하는 것은 최후의 수단)
key는 반드시 변하지 않고, 예상 가능하며, 유일해야 합니다. 변하는 key(Math.random()으로 생성된 값 등)를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있습니다.
https://ko.reactjs.org/docs/reconciliation.html#tradeoffs
React Component
UI를 구성하는 필수 요소
각자 독립적인 기능을 가지며 UI의 한 부분을 담당한다
---> 서로 간의 의존성이 낮아서 만일 한 컴포넌트의 위치를 바꿀 시 해당 컴포넌트의 위치만 수정하면 된다.
하나의 기능을 위한 구조, 동작, 디자인에 대하여 나눠서 개발하는 것을 지양한다.
기술적 분류가 아닌 기능적 분류를 권장한다.
컴포넌트를 여러개 만들고 조합하여 애플리케이션을 만들 수 있다.
컴포넌트들의 관계는 트리구조로 형상화할 수 있다.
Create React App
리액트 SPA(Single-Page Application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
npx create_react_app
npm run start //app 실행Learn more...
프로그래밍 패러다임
-
함수형 프로그래밍 : 수학의 원리와 밀접한 관계가 있다.
인풋 -> 함수 -> 아웃풋
외부의 영향을 전혀 받지 않는 순수함수로 작성해야 한다.
전달인자의 데이터를 변경하지 않고 새로운 데이터를 출력해야 한다.
조건문, 반복문을 사용하지 않는다.
고차함수의 특징을 가지고 있어야 한다. -
명령형 프로그래밍 : 원하는 결과값을 얻기 위한 과정을 작성한다.
함수가 정확히 무엇을 하는지 한 줄 한 줄 살펴보아야 알 수 있다. -
객체 지향 프로그래밍 : 하나의 모델이 되는 청사진 (class)를 만들고 class를 바탕으로 한 인스턴스 객체를 생성하는 프로그래밍 패턴
