React Intro(리액트의 특징 JSX)

리액트는 무엇인가?

리액트는 프론트엔드 개발을 위한 Javascript 오픈소스 라이브러리입니다.

---

리액트 3가지 특징

• 선언형
  • 리액트는 한 페이지를 보여주기위해 기존 HTML / CSS / JS 로 나눠서 적기보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다. (*JSX는 아래 설명)

// JSX로 작성된 코드
// 하나의 파일에 명시적으로 작성할수 있는 JSX를 활용
const Weather = () => (
	<WeatherContainer>
            <SearchInput />
            <CityInput />
            <CurrentTemperature />
	</WeatherContainer>
)

• 컴토넌트기반
  • 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반으로 개발합니다.
  • 컴포넌트로분리하면 서로 독립적으로 재사용이 가능하고 기능자체에 집중하여 개발할 수 있습니다.

//컴포넌트로 분류
const Cart = ({items}) => (
	<section className = "cartContainer">
		<h1>장바구니</h1>
        <SelectAllCheckBox />
        <div className = "itemContainer">
        	{item.map((item) => <Item item = item{item}/>)}
        </div>
	</section>
)

• 범용성 
  
  • 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있습니다.
  • Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능합니다.
  • 프레임워크는 생테게에 종속되는 반면 리액트는 기존 프로젝트에도 유연하게 사용 가능.

---

JSX

JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있습니다.

JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아닙니다. 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 합니다. 이때 이용하는 것이 바로 “Babel”입니다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다.

JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것 입니다.

구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다.

(JSX 없이도 React 요소를 만들 수 있습니다. 다만 코드가 복잡하고, 가독성이 떨어지는 단점이 있죠.)

---

JSX 문법의 규칙

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

// 아래는 방식은 JSX로 안됨.
<div>
	<h1>Hello</h1>
</div>
<div>
	<h1>World</h1>
</div>


// 아래처럼 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어 있어야 함.
<div>
    <div>
        <h1>hello</h1>
    </div>
    <div>
        <h1>World</h1>
    </div>
</div>

• React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 합니다.
  (만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의)

// 클래스 사용시 기존방식은 JSX에서 자바스크립트 클래스로 받아들임
<div class="greeting">Hello!</div>

// 클래스 사용시 className 으로 적어줘야 함
<div className="greeting">Hello!</div>

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

function App() {
	const name = 'Josh Perez';
    return(
    	<div>
        	Hello, {name}! // 자바스크립트 사용시 중괄호 사용
        </div>
    );
}

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

function Hello() {
	return <div>Hello!</div>;
}

function HelloWorld() {
	return <Hello />;
}

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

<div>
	{// 조건식   ?   true 값    :   false 값
    	(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
    }
</div>

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

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
  // 한 포스트의 정보를 담은 객체 post를 매개변수로 받고
  // obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  // postToJSX 함수를 이용하여 에러를 해결하고 여러 개의 엘리먼트롤 표시
  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToJSX)}
    </div>
  );
}

---

리액트로 엘리먼트 생성하기

기존 DOM과 React로 엘리먼트 생성 방식 차이.

DOM으로 엘리먼트 생성

//DOM으로 엘리먼트 생성

import "./styles.css";

const user = {
  firstName: "HTML",
  lastName: "DOM"
};

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const heading = document.createElement("h1");
heading.textContent = `Hello, ${formatName(user)}`;
document.body.appendChild(heading);

React 로 엘리먼트 생성

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX 를 활용한 React
  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

 

위 예시를 보면 DOM에서 HTML과 JavaScript로 나누어졌던 두 가지 일을 React에서는 App안에서 한 번에 처리하고 있습니다. JSX는 개발자가 코드만 바라보는게 아니라, 구조를 바라보게 돕습니다.