24년 12월 9일

리액트란 ?

React는 Facebook에서 개발하고 유지 관리하는 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용된다. 주로 단일 페이지 애플리케이션(SPA)에서 빠르고 효율적인 UI 업데이트를 위해 사용됩니다. React는 컴포넌트 기반 아키텍처를 사용하여 복잡한 UI를 작은, 재사용 가능한 컴포넌트로 분할할 수 있게 해줌.

특징

• 기본적으로 비동기 처리 방식
• 컴포넌트 기반 구조
  • UI를 독립적인 컴포넌트 단위로 나눠서 재사용 가능하게 설계함.
  • 각 컴포넌트는 자체적인 상태와 로직을 가질 수 있어서 유지보수가 쉬움.
• 가상 DOM (Virtual DOM)
  • 변경 사항을 가상 DOM에서 먼저 계산한 뒤 실제 DOM에 최소한의 업데이트를 함.
  • 이를 통해 성능 최적화가 이루어짐.
• 단방향 데이터 흐름
  • 데이터는 부모에서 자식으로만 흐르며, 예측 가능하고 디버깅이 쉬움.
  • 상태 관리는 Props나 State로 이루어짐.
• 선언형 프로그래밍
  • UI를 어떻게 그릴지(절차적)보다는 최종 상태를 선언적으로 작성.
  • 상태가 바뀌면 UI가 자동으로 업데이트됨.
• 리액트 훅 (Hooks)
  • 함수형 컴포넌트에서 상태 관리나 라이프사이클 메서드를 사용할 수 있게 해주는 기능.
  • 대표적으로 useState, useEffect, useContext 등이 있음.
• 강력한 커뮤니티와 생태계
  • 다양한 라이브러리, 도구, 확장 기능이 풍부해서 복잡한 애플리케이션을 만들기 좋음.
  • 예: React Router, Redux, Zustand, React Query 등.
• JSX
  • JavaScript 안에서 HTML을 작성할 수 있는 문법.
  • 코드 가독성이 좋아지고, 컴포넌트와 UI를 더 직관적으로 작성 가능.

node.js 가 있어야 사용가능함

---

리액트 프로젝트 시작

프로젝트를 작성하는 명령

npx -create-react-app 01(프로젝트명)

npx create-react-app my-app
cd my-app
npm start

프로젝트 디렉토리 이동 후에 기본적으로 실행하면 localhost:3000 번으로 프로젝트 실행가능

 

실행하면 이런 화면이 나오게 된다.

---

리액트 폴더의 구조

node_modules: 프로젝트의 모든 의존성 모듈들이 저장되는 폴더입니다. package.json 파일에 정의된 의존성들이 설치됩니다.
public: 정적 파일들이 위치하는 폴더입니다. 주로 HTML 파일과 파비콘 등이 포함됩니다.
    index.html: React 애플리케이션이 로드되는 기본 HTML 파일입니다.
src: 실제 소스 코드가 포함된 폴더입니다. 모든 React 컴포넌트와 스타일 파일들이 이곳에 위치합니다.
    index.js: ReactDOM을 사용하여 React 컴포넌트를 index.html의 root 엘리먼트에 렌더링하는 파일입니다.
    App.js: 기본 React 컴포넌트를 정의한 파일입니다.
    App.css: App 컴포넌트의 스타일이 정의된 파일입니다.
.gitignore: Git에서 무시할 파일 및 폴더를 정의한 파일입니다. 주로 node_modules와 같은 폴더가 포함됩니다.
package.json: 프로젝트의 의존성, 스크립트, 메타데이터 등이 정의된 파일입니다.
package-lock.json: 의존성 트리의 정확한 버전을 기록한 파일입니다. 프로젝트의 일관성을 유지하는 데 사용됩니다.
README.md: 프로젝트에 대한 설명과 사용 방법 등을 기술하는 파일입니다. GitHub와 같은 플랫폼에서 프로젝트의 소개 문서로 사용됩니다.

리액트를 처음실행했을 때 기본적으로 시작되는 부분은 index.html 이지만 코드를 살펴보면

index.js 를 기본 컴포넌트로 사용해서 렌더링하는걸 볼 수 있다.

그러니까 index.js 가 리액트 앱의 시작점이다. 그리고

App.js 는 리액트 프로그램의 메인 컴포넌트 역할 = 루트 컴포넌트.

리액트를 실행했을 때 실행되는 모든 부분이 App.js 에서 실행되는 것이다.

---

리액트 사용할 때 반드시 상위태그 안에 여러 태그들이 들어있어야함.

그러니까 최상위 태그가 반드시 하나가 있어야 한다.

import logo from './logo.svg';
import './App.css';

function App() {
  let title = "제목부분임";

  return (
    <>
    <div className='top-header'> 
      <h1>{title}</h1>  
      </div>
      <div className="nav">
        B
      </div>
      </> //이런 형식의 태그도 가능한듯?
  );
}

export default App;

변수를 선언할 수 있는데 , 안에서 사용할 때는 중괄호{} 를 사용

style 태그 작성할 때 json 타입으로 작성하는데 , 중괄호를 2번 사용

여러 함수 실행

const Basic1 = ()=>{

    return (
        <>
        
        <h1> BASIC 1CONPONENT</h1>

        </>
    )
} //생성자 , 파일명과 일치 시켜야함

const Basic2 = ()=>{

    return (
        <>
        
        <h1> BASIC 2CONPONENT</h1>

        </>
    )
} //생성자 , 파일명과 일치 시켜야함

const Basic3 = ()=>{

    return (
        <>
        
        <h1> BASIC3 CONPONENT</h1>

        </>
    )
} //생성자 , 파일명과 일치 시켜야함

export default {Basic1,Basic2} //외부 모듈로 내보내기

위와 같이 여러개의 함수를 정의했을 때

App.js 에서 사용하려면

 <Basic.Basic1 /> 

이런식으로 특정 함수 이름을 명시해준다

import {Basic3,Basic4,Basic5,Basic6} from './JSX/Basic' 

import 를 할 때 default 가 아니라면 함수명을 지정해주어야함.

함수 줄이기

export const Basic3 = <h1>BASIC COMPOPOPO33</h1> //함수의 return , 파라미터 값을 생략할 수 있다.

라인이 하나만 있다면 이것저것 줄일 수 있음

---

컴포넌트의 앞글자는 무조건 대문자로 해야함 !

리액트에서 소문자로 시작하는 요소 이름은 HTML 태그로 간주한다.

대문자로 시작해야 사용자 정의 컴포넌트로 인식하게 된다.

---

구조분해할당

쉽게 말해 배열이나 객체를 쪼개서 필드 값을 변수에 담을 수 있다.

      //구조분해요법
import {Basic3,Basic4} from './JSX/Basic' 

     //선언
     <div>
        <Basic.Basic1 /> 
        <Basic.Basic2 /> 
        {Basic3} 
        {Basic4}
      </div>

---

배열 데이터

export const Basic6 = <Tmp2 data={['a','b','c','d']} /> //배열 데이터

---

이벤트

const EventComponent1 = ()=>{

    return (
        <button onClick={(e)=>{console.log("EventComponent1",e)}}>벝은1</button>
    )
}
const handlerClick2 = (e)=>{console.log("EVENTCOMPONENT2",e)}
const EventComponent2 = ()=>{

    return (
        <button onClick={handlerClick2}>벝은2</button>
    )
}

const EventComponent3 =()=>{

    const handleKeyDown = (e)=>{
        console.log("handleKeyDown !!",e)
    }

    return (
        <input onKeyDown={handleKeyDown} /> //key 를 누를때마다 이벤트 생성
    )
}

export default{
    EventComponent1,
    EventComponent2,
    EventComponent3
}

---

//

const MyComponent2 = ( {title,contents} )=>{ //파라미터명을 생략가능 ?
    return (
        <div>
            <h1>{title}</h1>
            <p>{contents}</p>
        </div>
    )
}

export default MyComponent2

파라미터명을 생략가능 ?

---

//
import { useState } from "react"

const MyComponent2 = ( {title,contents} )=>{ //파라미터명을 생략가능 ?
    //상태정보 저장
    const [count,setCount] = useState(0) //0은 초기값 count 안에 들어갈 초기값으로 0지정
    const [status,setStatus] = useState(false) //useState 여기 안에 넣는 값 자료형에 따라 파라미터의 자료형이 지정된다 ?

    const handleCountUp = ()=>{
        setCount(count+1)
    }
    const handleCountDown = ()=>{
        setCount(count-1)
    }
    return (
        <div>
            <h1>{title}</h1>
            <p>{contents}</p>

            <button onClick={handleCountUp}>COUNT UP : Count : {count}</button><br /><br />
            <button onClick={handleCountDown}>COUNT DOWN : Count : {count}</button>
        </div>
    )
}

export default MyComponent2