React - 2일차 정리

리액트는 라이브러리 겸 프레임워크 임

 

라이브러리

개발자가 쉽게 개발할수 있도록 미리 만들어진 코드 묶음임

필요한 기능만 가져다 쓰면 됨

개발자가 라이브러리를 호출하여 사용하는 방식 (  React, Lodash, Axios )

 

프레임워크

애플리케이션 개발에 필요한 뼈대와 틀을 제공

개발자는 프레임워크가 제공하는 규칙과 구조에 따라 코드를 작성

프레임워크가 개발자의 코드를 호출하며 동작을 제어 ( Next.js, Vue.js, Spring ) 

 

라이브러리랑 프레임워크의 차이점은??

 

• 라이브러리: 필요한 기능만 선택해서 사용할 수 있어 자유롭습니다.
• 프레임워크: 특정 구조와 규칙에 따라야 하므로 유연성이 적음

---

JSX 문법

blockColor 갖고 있는 div 축약 가능

 

JSX(JavaScript XML)에서 return 문법 안에 있는 태그는 HTML 태그가 아니라 React 요소를 나타내는 태그

JSX는 React에서 UI를 정의하기 위해 사용되는 문법으로, HTML과 비슷해 보이지만 JavaScript로 변환되는 과정에서 React의 요소로 변환

 

 

map 배열 메서드!

function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

• 위에 코드가 warning이 뜨는 이유
  • map 메서드를 사용할때 key 값이 있어야 하는데 key 속성을 넣지 않기에 warning 뜸
  • 배열끼리 엉키지않게 해당 map의 배열만이 갖는 유니크한 고유값을 넣어주는 것

function Blog() { 
    // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다. 
    const blogs = posts.map((post) => ( 
        <div key={post.id}> 
            <h3>{post.title}</h3> 
            <p>{post.content}</p> 
            </div> 
        )); 
    return <div className="post-wrapper">{blogs}</div>; 
}

 

---

React Component

하나의 기능구현을 위해 여러 종류의 코드 묶음을 만듬
UI 를 구성하는 필수 요소임!

트리 구조 -> 단방향성

 

컴포넌트를 작성할땐 작은 요소부터 만듬!!!!

const Component = () => {
    return (
        <>
            <div>{정의 1}</div>
            <div>{정의 2}</div>
        </>
    )
};

컴포넌트 기본 구조

---

 

nvm 설치 방법 및 create react-app 하는 법

 

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

여기서

 

설치!!!

경로 설정후 설치 완료 하면
터미널 열고

nvm

nvm use 18.0.0

create-react-app  하고 싶은 경로 설정 후
npx create-react-app@latest test-react

 

---

React SPA

SPA ( Single Page Application ) 란?

단일 HTML 페이지로 시작하며, 페이지 전환 없이 동적으로 콘텐츠를 업데이트하는 웹 애플리케이션 아키텍처임

 

CSR (Client-Side Rendering)은 서버에서 최소한의 HTML만 로드한 후, 나머지 콘텐츠를 JavaScript를 통해 브라우저에서 동적으로 생성하고 렌더링하는 방식임 

 

업데이트가 필요한 부분만 새로 불러옴

장점

• 서버로부터 새로운 페이지가 아닌 부분 데이터만 받아 업데이트 함으로써
  UI 가 향상됨
• 서버의 과부화 문제가 줄어듬
• 전체 페이지 렌더링 하지 않음

단점

• SPA 경우 JS 의 파일의 크기가 커서 첫 화면 로딩 시간이 길어짐 (번들링, 파싱..)
• 검색 엔진 최적화( SEO ) 가 좋지 않음 - meta 가 다른거에 비해 적음!!

---

React Router 란??

사용자가 요청한 URL에 따라 해당 URL 에 맞는 페이지를 보여주는것이 Routing 임
이렇게 ROUTING관련 라이브러리가 많이 있고 그중에서도 사람들이 가장 많이쓰는 라이브러리가 REACT ROUTER임

REACT ROUTER에서는 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가지기 떄문에 불필요한 렌더링을 막을수 있음

<BrowserRouter>
  <Routes>
    <Route path="/" element={ }></Route>
    <Route path="/maker" element={ }></Route>
  </Routes>
</BrowserRouter>

<Link to="/mainChoice">
   <Post />
</Link>