React Intro

---

리액트란?

: 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다.

리액트의 3가지 특징

1. 선언형

• HTML/CSS/JS 나눠서 작성하지 않고 → 한 파일에 명시적으로 작성할 수 있는 JSX를 활용한 선언형 프로그래밍을 지향한다.

2. 컴포넌트 기반

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

3. 범용성

• 리액트는 라이브러리 형식으로, 기존 프로젝트에도 유연하게 사용 가능하다.
• 리액트는 facebook 주도 하에 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

JSX

---

JSX(JavaScript XML)란?

: React에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법이다.

Babel

• Babel을 통해 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 한다.
• 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링한다.

React DOM

• JSX를 사용하면 HTML없이 JavaScript만으로 마크업 형태를 작성하여 DOM할 수 있다.
• HTML이 아니기 때문에 Babel을 통한 컴파일 과정은 필요하다
• 예시
  

function App() {
 
cosnt user = {
 firstName : 'Harper',
 lastName : "Perez'
 };

 function formatName(user) {
  return user.firstName + ' ' + user.lastName;
  }
 
 return {
  <>   
   <h1>
    Hello, {formatName(user)}!
   </h1>
  <>
  )
 }

//또는,

return <h1> Hello, {formatName{user)}!</h1>;

DOM으로 엘리먼트 생성하기 예제**

---

**//방법1. DOM (HTML - JS 연결하기)**

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);

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

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

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
**//방법2. JSX 없이 활용한 React**
return React.createElement("h1", null, `Hello, ${formatName(user)}!`);
또는,
**// JSX 를 활용한 React**
   return <h1>Hello, {formatName(user)}!</h1>;
}

JSX 문법규칙

---

1. JSX에서 여러 엘리먼트를 작성할땐 → 최상위에서 tag로 감싸주어야 한다.

**<div> 최상위에서 opening tag와**
  <div>
   <h1>Hello</h1>
  </div>
  <div>
   <h2>world</h2>
  </div> 
**</div> closing tag로 감싸주여야 한다.**

2. 클래스는 ‘className’으로 표기

<div **className** = 'greeting>Hello!</div>

3. JavaScript 표현식 사용시 중괄호 {} 사용

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

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

• 리액트 엘리먼트가 JSX로 작성하면**"대문자”**로 시작해야 한다(소문자로 시작하면 HTML엘리먼트로 인식)
• 대문자로 작성된 JSX컴포넌트를 = 사용자 정의 컴포넌트라고 부른다.

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

5. 조건부 렌더링은 if문이 아닌 삼항연산자로 !

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

6. 여러 개의 HTML 엘리먼트를 표시할 땐, map() 함수를 사용

• **map()** 함수 사용시 반드시 “key” JSX 속성을 넣어야 한다.

consy posts = [
 {id : 1, title : 'hello world!', content : ....},
 {id : 2, title : 'Good morning', content : ....},

function Blog() {
 const content = **posts.map((post)** =>
  <div **key={post.id}**>
    <h3>{post.tltle}</h3>
    <p>{post.tltle}</p>
  </div>
);

return {
 <div> 
  {content}
 <div>
 );
}

Map을 이용한 반복

• **map** : 1) 배열의 각 요소를 2)특정 논리(함수)에 의해 3)다른 요소로 지정(map)한다.
• React에서 map 메서드 사용시 반드시 key 속성을 첫 엘리먼트에 넣어주여야 한다.

const posts = [
    { id : 1, title : 'Hello World', content : 'Welcome to learning React!' },
    { id : 2, title : 'Installation', content : 'You can install React via npm.' },
    { id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
    // ...
    { id : 100, title : 'I just got hired!', content : 'OMG!' },
  ];

function **Blog()** { **//사용자 정의 컴포넌트는 반드시 대문자로 시작**
 const blogs = **post.map**((post)=>( **//react에서 map메서드 사용시**
    <div **key={post.id}**> **//반드시 key 속성을 첫번째 엘리먼트에 넣어주여야 한다.**
    <h3>{post.tltle}</h3>
    <p>{post.tltle}</p>
  </div>
));
 return <div **ClassName** = "post-wrapper">**{blogs}**</div>; **//jsx내부에서 중괄호 내에 자바스크립트 표현식 작성**
}

컴포넌트 기반 개발(Component-Based)

---

컴포넌트란?

: 하나의 기능 구현(독립적인 기능)을 위한 여러종류의 코드 묶음

: UI를 구성하는 필수 요소

컴포넌트는 트리구조(계층적)구조로 이루어져 있다.

컴포넌트 기반 개발의 특징

1. 기술적인 특징이 아닌 실제 사용하는 기능을 기준으로 코드를 모아 개발한다.
2. 마크업, 디자인, 로직을 긴밀하게 연결하여 개발할 수 있다.
3. 컴포넌트 간 의존성이 낮아 독립적으로 작동한다. 따라서 하나의 기능 변경 시 다른 컴포넌트를 수정할 필요가 없다.
4. 재사용이 가능하며 효율적인 개발이 가능하다.
   
   

Creat React App

---

//터미널
npx create-react-app 만들 폴더 이름

• Index JS

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

• App JS

  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    const proverb = ["빨강색", "주황색", "노랑색", "초록색", "파란색", "보라색"]
  
    const getRandomIndex = (length) => {
      return parseInt(Math.random() * length);
    }
  
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            오늘의 추천 색 <code>src/App.js</code>오늘의 운세를 가져다줄 색깔은?
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
          /*proverb배열의 길이만큼 무작위 숫자를 리턴한다.*/
            {proverb[getRandomIndex(proverb.length)]}
          </a>
        </header>
      </div>
    );
  }
  
  export default App;