Section2 / Unit4 : React (intro)
코드스테이츠수업 27일차!
리액트는 무엇인가?
프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리
CSS, JSX 문법만을 가지고 웹 개발이 가능하기에 기능과 구조를 한 눈에 확인할 수 있다
리액트의 3가지 특징
- 선언형
- 컴포넌트 기반
- 범용성
선언형(Declarative)
코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식
리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는
하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향
컴포넌트 기반(Component-Based)
구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋
리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
컴포넌트 단위로 코드를 작성하면 컴포넌트 간의 의존성이 없어 독립적으로 작동함
컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있고 유지보수가 편리
범용성(Learn Once, Write Anywhere)
리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다
Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능
JSX
JavaScript XML의 줄임말
->문자열(X), HTML(X)
React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
JavaScript 코드가 아니기에 Babel을 이용해 JavaScript 코드로 변환
JavaScript 만으로 마크업 형태의 코드를 작성
JSX 없이도 React 요소를 만들 수 있지만 코드가 복잡하고, 가독성이 떨어지는 단점이 있다
JSX 규칙
하나의 엘리먼트 안에 모든 엘리먼트가 포함
-> 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 함
엘리먼트 클래스 사용 시, className으로 표기
-> class로 작성하면 react에서 이를 html 클래스 속성이 아닌 자바스크립트 클래스로 받아들인다
JavaScript 표현식 사용 시, 중괄호({}) 이용
-> 중괄호를 사용하지 않으면 일반 텍스트로 인식
사용자 정의 컴포넌트는 대문자로 시작
-> 소문자로 시작하면 HTML 엘리먼트로 인식
조건부 렌더링에는 삼항연산자 사용
-> if문 X
여러 개의 HTML 엘리먼트를 표시할 때, map()함수를 이용
-> map 함수를 사용할 때 반드시 "key" JSX 속성을 넣어야 함
-->key 속성을 넣지 않으면 각 항목에 key를 넣어야 한다는 경고가 표시됨
컴포넌트 기반
컴포넌트란?
-> 하나의 기능 구현을 위한 여러 종류의 코드 묶음
-> UI를 구성하는 필수 요소
컴포넌트를 여러개 만들고 조합하면 어플리케이션을 만들 수 있다
리액트 애플리케이션은 컴포넌트들의 관계를 트리 구조로 형상화하여 표현할 수 있다
-> 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있다
-> 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다
-> 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다
컴포넌트 기반 개발의 장점!
예시)위에 있는 헤더를 왼쪽으로 옮겨 사이드바를 만드려고 한다
-> 기존의 HTML / CSS / JavaScript 사용 시
--> HTML을 수정하여 구조 바꾸기, 변경된 구조와 스타일에 맞추어 자바스크립트가 DOM을 조작하게끔 수정
-> 리액트 사용 시
--> 컴포넌트는 각자의 기능을 가지고 있으므로 원하는 수정사항에 맞춰 컴포넌트의 위치만 수정
Create React App
리액트 SPA(single page application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
터미널 입력 한 번으로 리액트 개발을 할 수 있음