[React] React와 JSX란?

What is React?

리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리입니다! 리액트를 배워야 하는 이유는 리액트의 3가지 중요한 특징 때문인데요 :) 리액트의 3가지 특징에 대해서 알아봅시다

1. 선언형
2. 컴포넌트 기반
3. 범용성

선언형

선언형이라는 것은 코드를 자세히 분석하지 않고도 코드의 의미를 분명히 알 수 있게 작성하는 방식을 의미합니다! 리액트는 한 페이지를 보여주기 위해 html / css / js 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 jsx를 활용한 선언형 프로그래밍을 지향합니다 😎

컴포넌트 기반

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다! 컴포넌트 단위로 코드를 짰을 때의 장점은 무엇일까요? 🤔 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있습니다 :)

범용성

리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있습니다! Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능합니다 :)

---

JSX란?

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다!

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다 🤭 따라서.. 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인할 수 있게 되었습니다 🥺 JSX를 사용하면 JavaScript 만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것입니다!

---

JSX 규칙

하나의 엘리먼트 안에 모든 엘리먼트가 포함

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 합니다!

<div>
  <h1>Hello</h1>
</div>
<div>
  <h2>World</h2>
</div>

이렇게가 아닌

<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h2>World</h2>
  </div>
</div>

이렇게 해줘야 합니다 :)

엘리먼트 클래스 사용시, className 으로 표기

React에서 HTML class 속성을 지정하려면 "className"으로 표기해야 합니다 :)

<div class="greeting">Hello!</div>

이렇게가 아닌


<div className="greeting">Hello!</div>

이렇게 해줘야 합니다:)

javaScript 표현식 사용 시, 중괄호({}) 이용

JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다! 중괄호를 사용하지 않으면 일반 텍스트로 인식합니다 😮

function App() {
  
  const name = 'Josh Perez'; 
  
  return(
    <div>
      Hello,{name}! 
    </div>
  );
}

사용자 정의 컴포넌트는 대문자로 시작

React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다! 😐

조건부 렌더링에는 삼항연산자 사용

조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다 😲

<div>
  {
    (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
  }
</div>

여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용

React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용합니다! 🤓 map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 합니다! "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다 😱

---

Retrospect 🧐

리액트랑 어서 친해지고 싶다 ^^..ㅜㅜ