[React] React 1일차

React란?

자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

import {createRoot} from "react-dom/client"
const rootElement = document.getElementById("root")
const root = createRoot(rootElement)
root.render(
  <h1>Hi</h1>
  <h1>bye</h1>
)

이 위의 코드는 리액트로 Hi를 출력하는 코드이다.  '<h1>Hi</h1>'를 제외하고 모든 문장들은 리액트의 기본 구조이니 외워두도록 하자.

import {createRoot} from "react-dom/client"
const rootElement = document.getElementById("root")
const root = createRoot(rootElement)
root.render(
  <h1>Hi</h1>
  <h1>bye</h1>
)

위의 문장은 Hi와 bye를 동시에 출력하는 코드이지만 아마 오류가 날 것이다. 그 이유는 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 때문이다. 그럼 위의 코드를 <div> 태그로 묶어준다면 정상적인 사용이 가능하다.

import {createRoot} from "react-dom/client"
const rootElement = document.getElementById("root")
const root = createRoot(rootElement)
root.render(
  <div>
  	<h1>Hi</h1>
  	<h1>bye</h1>
  </div>
)

---

React에서 html 만들기

const h1 = document.createElement("h1");
h1.textContent = "Hello world";
h1.className = "header";
console.log(h1);

---

JSX

JSX는 자바스크립트의 공식 문법이 아 확장 문법이다. 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점이자, 이를 사용하는 이유임.

 

JSX의 문법에는 다음 등이 있다.

function App(){
    return(
        <h1>테스트1</h1>
        <h2>테스트2</h2>
    )
}

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 한다.

function App(){
    return(
    	<div>
        	<h1>테스트1</h1>
        	<h2>테스트2</h2>
        </div>
    )
}

 

자바스크립트 표현 : 자바스크립의 값을 JSX 안에서 렌더링할 수 있다.

import React from 'react';

function App() {
	const name = '리액트';
    return (
    <>
    	<h1>{name}</h1>
        <h2>test</h2>
    </>
  );
}

export default App;

 

 

JSX 내부의 자바스크립트 표현식 내에서 if문을 사용할 수 없어서, 조건부 연산자(삼항 연산자)를 사용한다.

function App() {
    const name = '리액트';
  return (
   <div>
          {name === '리액트'? (
          	<h1>리액트</h1>
          ) : (
          	<h2>리액트가 아님</h2>
          )}
      
   </div>
  );
}

 

undefined를 렌더링하지 않아야 한다.

function App() {
  const name = undefined;
  return name;  
}

이는 아래와 같이 OR 연산자를 사용해 방지할 수 있다.

function App() {
  const name = undefined;
  return name || "값이 undefined";  
}

단, JSX 내부에서 undefined를 렌더링 하는 것은 에러가 나지 않는다.

function App() {
  const name = undefined;
  return (
  	<div>{name}</div>
  )
}

 

기존에 HTML에서 스타일을 지정할 때 background-color 와 같이 - 문자가 포함된 이름들을, JSX에서 사용할 때에는 -를 없애고 카멜 표기법으로 작성해야 한다.

예 : background-color -> backgroundColor

function App() {
  const style = {
      backgroundColor: 'white',
      fontSize: '10px',
      fontWeight: 'bold'
  }
  return (
  	<div style={style}>테스트</div>
  )
}