React 3일차

리액트 발전사

발생년도	요약
2010	XHP(PHP용 HTML 컴포넌트 프레임 워크), E4X(ECMAScript for XML) 영향
2011	FaxJS (실험적 프로젝트로 역사적 맥락을 위해 GitHub에 저장소 유지)
2012	React 명칭으로 프로젝트 변경
2013	React 공개 (JSConf US 2013)
2014	React Developer Tools, React Hot Loader 공개
2015	ES6 class 지원, React Native 공개
2016	v0.14 → v0.15.0 업데이트 (document.createElement API, SVG 속성 지원 등)
2017	v16.0 업데이트 (ErrorBoundary, Portal, 새로운 핵심 아키텍처 Fiber 공개 등)
2018	React Profiler 공개 (v16.5)
2019	React Hooks 공개 (v16.8)
2020	v17.0 디딤돌 업데이트 (새로운 기능 없음, 이벤트 위임 변경, 새로운 JSX 반환 등)
2021	React v18 계획 안내 (현재 Beta 버전 공개)
2022	React v18 공개 (IE 지원 중단, 동시 렌더러, 자동 배치, 트랜지션, Suspense 스트리밍 SSR 등)
2023	새로운 React 공식 문서(http://react.dev) 공개 (이전 공식 문서(http://legacy.reactjs.org/) 또한 접근 가능)

---

리액트

• 사용자 인터페이스 구축을 위한 JavaScript 라이브러리
• 대표적인 컨셉
  • 선언형 프로그래밍
  • 단방향 데이터 바인딩
  • XML과 유사한 문법 (JSX)
• React 가상 요소를 효율적으로 재사용 하기 위한 컴포넌트 제공
• React 컴포넌트는 마크업을 생성
  • 생성된 마크업은 조립 → 가상 DOM을 구성 → 가상 DOM은 실제 DOM으로 재조정(Reconciliation)

---

리액트 특징

• 선언형 프로그래밍
• 컴포넌트 시스템
  • UI = 컴포넌트 + 컴포넌트 + 컴포넌트....
  • 컴포넌트 = 함수 + 마크업(JSX)
  • UI 업데이트 (데이터 흐름 변경 감지)

// 컴포넌트 예시)
export default function CounterBtn() {
  return (
    <div className="counter_container">
      <label htmlFor="count_btn">클릭 횟수</label>
      <input type="text" id="count_btn" />
      <button type="button">Plus</button>
    </div>
  )
}

• 크로스 플랫폼
  : 동일한 코드베이스를 사용하여 여러 플랫폼(예: 웹, iOS, Android)에서 애플리케이션을 개발할 수 있는 능력

---

컴포넌트 타입

클래스 컴포넌트 타입

import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  render() {
    return (
      <div id="app" lang="en">
        <h1>React Application_class</h1>
      </div>
    )
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

함수 컴포넌트 타입

import React from "react";
import ReactDOM from "react-dom/client";

function App() {
  return (
    <div id="app" lang="en">
      <h1>React Application_function</h1>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

---

재사용 가능한 컴포넌트

여러 곳에 사용될 부품, 여러 번 사용될 부품
즉, 재사용 가능한 컴포넌트를 만들어 보자

Profile 컴포넌트

import React from 'react';
import './practice.css';
import { useState } from 'react';

const Profile = (props) => {

  let [user, setUser] = useState(['민지', '하니', '다니엘', '해린', '혜인'])

  return (
    <figure className='profile_container'>
      <img src={`./images/${user[props.num]}.jpeg`} alt={`뉴진스 ${user[props.num]}`} />
      <figcaption className='profile_name'>이름: {user[props.num]}</figcaption>
    </figure>
  )
}

export default Profile;

Profile 컴포넌트를 여러 번 불러와서 사용

import React from 'react';
import ReactDOM from 'react-dom/client';
import Profile from './Profile.jsx';


const root = ReactDOM.createRoot(document.getElementById('root'));
const arr = Array.from({ length: 5 });

root.render(
  <div role='group' style={{ display: 'flex', gap: 15 }}>
    {
      arr.map((item, index) => {
        return (
          <Profile key={index} num={index} />
        )
      })
    }
  </div>
)