React

프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리
오픈소스 : 소스가 공개되어 있음(저작권자가 공개) 누구나 자유롭게 사용, 복제, 배포, 수정 가능한 소프트웨어

특징

1. 선언형

선언형 프로그래밍이란 무엇(What) 에 집중하여 프로그래밍을 하는 것
<-> 명령형 프로그래밍은 어떻게(How)에 집중하여 프로그래밍을 하는 것. 절차에 집중

2. 컴포넌트 기반

독립적, 재사용성 ⬆️
유지보수성, 기능에 집중한 구현 ⬆️
하나의 기능에 하나의 컴포넌트. A가 고장나면 A만 고치면 된다.

3. 범용성

어디서든 유연하게 적용 가능 리액트 네이티브로 앱 또한 개발 가능

---

JSX

HTML + JavaScript => 새로운 문법

특징

• JavaScropt XML. JS를 확장한 문법
• Babel을 통해 JS로 변환해야 실행이 된다.
• 자바스크립트와 HTML을 함께 표현하여 컴포넌트로 묶어서 사용할 수 있다.

// 기능 1: 로딩중이면, 로딩중 메시지를 띄우고, 아니면 일반적인 footer메시지를 보여준다.
// 구조 1: footer임을 명시한다.

export default Footer () {
  // 기능 작동이 어떻게 되는지
  const isLoading = true;
  const footerContent = isLoading ? "로딩중" : "By Code"

• 리액트 컴포넌트 리턴값은 하나의 JSX 표현식이여야 한다.
• 자바스크립트 표현식 -> 값으로 변환 가능한 코드 덩어리 -> 변수에 담길 수 있는 것

if (true) { true; } // x
true // 0
'world'; // 0

-> JSX 표현식 -> 값으로 변환 가능한 코드 덩어리 -> 변수에 담길 수 있는 것

if (true) { true; } // x
true // 0
'world'; // 0

그 외 규칙

• class (X) → className (O)
• JS 표현식은 중괄호{}에 작성
• 사용자 정의 컴포넌트 === React 컴포넌트는 대문자로 시작해야 한다
• 조건문을 사용하고 싶으면 삼항연산자를 사용해야 한다.
  - 삼항연산자를 쓰면 하나의 값이 나오므로. 표현식이기 때문에
• 여러개의 HTML 엘리먼트를 표시할 때 map() 메서드 사용
  - map 메서드 리턴값은 배열, 배열 내에 JSX가 잘 담겨있음.
• 변수에 들어갈 수 있는건 표현식이고, 표현식은 중괄호를 쓰고 자바스크립트를 안에 넣어주면 잘 작동한다.

---

const jsx = <div class="greeting">hello world</div>

class X.
className O

const hello = () => {
  return <div>hello!</div>
}

const helloWorld = () => {
  return <hello />
}

hello X
Hello O

컴포넌트

• 하나의 기능 구현을 위한 여러 종류의 코드 묶음
• 하나씩 따로 만드는 게 좋다.
• 기능별로 나눠진 컴포넌트를 미리 만들어두고 이후에 재사용하기 용이하다
• 기획이나 디자인이 변경되어도 쉽게 고칠 수 있다.
• 모든 컴포넌트 위에는 항상 root 역할을 하는 최상위 컴포넌트가 존재

---