[코드스테이츠/27DAY] S2U4 - [React] Intro

🌊 TIL : 2023년 3월 21일  

 

오늘 배운 것

리액트의 3가지 특징

1. 선언형
   : 코드를 자세히 분석하지 않아도 코드의 의도를 분명히 알 수 있는 방식. HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 지향
   
   
2. 컴포넌트 기반
   : 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다. 컴포넌트 간의 의존성이 없어져서 독립성으로 작동하고, 재사용성이 가능하기 때문에 기능 작동에 집중하여 개발할 수 있고 유지보수가 편하고 유닛 테스트를 하기에도 편하다.
    
3. 범용성
   : 프레임워크의 경우 다른 프레임워크와 함께 사용할 수 없지만 리액트는 라이브러리기 때문에 어디에도 유연하게 적용할 수 있다. 기존 프로젝트 어디에서든 사용할 수 있음. 리액트는 Facebook에서 관리되어 안정적이고 리액트 네이티브를 사용하면 모바일 개발도 가능하다.

 

JSX(Java Script XML)

: React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법. 
JSX는 브라우저에서 바로 실행할 수 있는 JavaScript 코드가 아니기 때문에 브라우저가 이해할 수 있는 코드로 변환해주어야 한다. 이때 사용하는 것이 Babel이다.

Babel은 JSX를 브라우저가 이해하고 화면에 렌더링 할 수 있도록 JS파일로 컴파일을 해준다. 

 

React에서는 Dom과 다르게 CSS, JSX문법만을 가지고 웹 어플리케이션을 개발할 수 있다. JSX를 사용하면 JS만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있다.

즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인할 수 있게 된다. 

 

주의점!
HTML처럼 생겼지만 HTML이 아니기 때문에 Babel을 이용한 컴파일 과정이 필요하다. 

React	JS
명시적으로 코드 작성 가능.  HTML과 JS를 동시에 이용하여 기능과 구조를 한 눈에 파악 가능 동작에 대한 코드를 한 뭉치 적은 코드셋을 컴포넌트라고 한다.	DOM에서 JS와 HTML을 연결하기 위한 작업이 필요하다.

 

JSX 규칙

부적합 ❌

1번

적합 ⭕️

1번

 

3,4번

6번

6번

1. 최상위에서 opening tag와 closing tag로 감싸야한다.
2. CSS class 지정시 "className"으로 표기해야 한다.
   React에서 class로 작성시 자바스크립트의 클래스로 받아들이기 때문이다.
3. JSX에서 JS를 쓰고자 한다면 꼭 중괄호를 이용해야한다. 중괄호를 사용하지 않으면 일반 텍스트로 인식한다. 
4. 사용자 정의 컴포넌트는 대문자로 시작
   소문자로 시작하면 일반적은 HTML로 인식한다.
5. 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.
6. 여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 사용한다.
   map 함수를 사용할 때는 반드시 "key" JSX속성을 넣어야한다.

 

 

컴포넌트

컴포넌트가 무엇인가요?

• 하나의 기능 구현을 위한 여러 종류의 코드 묶음
• UI를 구성하는 필수 요소
• 리액트의 심장

모든 리액트 어플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 어플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 최상위 컴포넌트는 다른 자식 컴포넌트를 가질 수 있으며 이 계층적 구조를 트리구조로 형상화 할 수 있다.

 

 

Create React App

: Create React App은 리액트 SPA를 쉽고 빠르게 개발할 수 있게 만들어진 툴 체인이다.

 

npx create-react-app 프로젝트명

 

npm run start와 react-scripts start가 같은 것~

 

 

 

https://babeljs.io

Babel · Babel

 

더 공부할 것

리액트 기초!! 아직은 간만 보는 느낌이라 조금 더 이론 공부해야겠다.