리엑트(React)는 무엇인가

React : 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다 (Facebook 현 Meta에서 개발. 관리하는 라이브러리이다)

특징

- 선언형(Declarative)
HTML, JS, CSS 로 나누지 않아도 한 파일에 명시적으로 작성할 수 있다
JSX(HTML + JavaScript)를 활용한 선언형 프로그래밍을 지향한다.

- 컴포넌트 기반 (Component-Based)
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
컴포넌트로 분리하면 서로 독립적이고 재 사용 가능하기 때문에 기능에 집중해서 개발 할 수 있음 
-> 유지보수에 편하고, 유닛 테스트하기도 좋다

- 범용성 (Learn Once, Write Anywhere)
어디든 유연하게 적용 될 수 있고, 기존 프로젝트에도 유연하게 사용 가능하다
리엑트 네이티브로는 모바일 개발도 가능하다

 

JSX

JSX 란 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
Babel 기능이 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일하여 렌더링한다

JS와 다른 주요 문법 

여러 엘리먼트를 작성하고자 하는 경우에는 최상위에서 tag로 감싸줘야 한다

<div>
  <div></div>
  <div></div>
</div>

React에서는 class를 className으로 적어줘야 한다

//javascript
<div class = "javaex"></div>

//React
<div className = "reactex"></div>

JSX에서 JavaScript를 쓰려고 한다면 중괄호를 이용해야 한다. 중괄호를 적지 않는다면 일반 텍스트로 인식한다

React 엘리먼트가 JSX로 작성되면  "대문자"로 시작해야한다 -> 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하게 된다

// 사용자 정의 컴포넌트는 대문자로 시작
functon App(){
	const name = 'react'
    
    return {
    	<div>
        	//javascript 표현식은 중괄호
        	this page made {name}
        </div>
        }
}

조건문은 if 문 대신 삼항연산자를 이용해야한다

//javascript
if ( 조건문 )
	return true
else
	return false

//react
조건문 ? true : false

React에서 여러개의 HTML엘리먼트를 표시할 때는 map() 함수를 사용해야한다
map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다

function Blog(){
// 여러개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용한다
	const content = posts.map ((list) =>
    <div key = {list.id}>
    //map 함수를 사용하면 key 속성을 넣어야함
    	<p> {list.name}</p>
    </div>
    }
)

react을 사용하려면

복잡한 설치과정을 거칠 필요는 없다. 

npx create-react-app 폴더이름

터미널에 이렇게 작성하면 폴더 이름으로 새로 생겨난 폴더에 react를 사용하기 위한 폴더/파일이 생성된다