[React] React란?(React 사용이유, Component, Props, State, Hook, Routing, children property, CSS 모듈)

오늘 수강한 강의 : # 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

---

오늘의 강의 정리 📗

React란?

• User Interface를 만들기 위한 JS 라이브러리(Facebook_현재Meta에서 만들었다.)

1. 웹 개발이 복잡해짐에 따라 html, css, js만으로는 한계가 생겼으며, 초기에는 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게해주는 jQuery 라이브러리가 주로 사용되었음
2. DOM을 직접 조작하는 방식에 한계를 느껴 대규모 프로젝트에 효율적으로 코드를 관리하고, 컴포넌트 기반 UI 개발을 지원하는 프론트엔드 프레임워크(라이브러리)가 등장
   • Angular, React, Vue를 프론트엔드 개발을 대표하는 도구 3가지라 부름
     • Angular, Vue : 개발에 필요한 전체적인 구조와 규칙을 제공(프레임워크)
     • React : 용자 인터페이스의 개발을 돕는 도구와 기능을 제공(라이브러리)

Vanila JS 가 아닌 React를 사용하는 이유

• UI를 자동으로 업데이트해주기 때문에 UI를 빠르게 업데이트할 수 있음
• 가상 돔(Virtual Dom)을 통해 재사용이 필요한 기능을 언제든지 필요한 곳에서 호출
• 반복적인 코드 작성 없이 사용할 수 있도록 해줌
• JS 기반의 문법을 사용하기 때문에 JS에 익숙하다면 보다 쉽게 사용
• 가볍고 유연한 라이브러리로, 필요한 부분에만 적용할 수 있음
• 활발하고 다양한 커뮤니티와 생태계를 가지고 있음
• 리액트의 UI를 만드는 기능을 확장하여 웹이 아닌 플랫폼에서 활용할 수 있도록 기술을 확장
  • React Native는 안드로이드(Android)와 아이폰(iOS)의 모바일 앱을 만드는 대표적인 기술
    

    

    
    

    

    
    

    

Component

• 커스텀 컴포넌트는 사용되는 시점에 반드시 대문자로 시작해야 한다.
  • 리액트는 기본적으로 소문자이면 디폴트로 존재하는 컴포넌트(ex. div 등)를 해당 이름으로 조회하기 때문.
• root element(<> … </>)는 반드시 하나만 존재해야 하고, default 컴포넌트여야 함
• 컴포넌트를 여러 개 쓰려면 반드시 root element로 감싸서 사용

/* Greeting이라는 이름의 컴포넌트 */

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default function App() {
  return (
    <>
      <Greeting name="Sara" />
      <Greeting name="Cahal" />
      <Greeting name="Edite" />
    </>
  );
}

props

• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용(단방향 데이터 흐름)
• 수정할 수 없다(자식입장에선 읽기 전용인 데이터)
• 함수의 매개변수와 비슷한 역할
• HTML 요소의 속성을 가지고 오는 문법과 동일

function Post(props) {
  return (
    <li className={classes.post}>
      <p className={classes.author}>{props.author}</p>
      <p className={classes.text}>{props.body}</p>
    </li>
  );
}

State

• props는 (함수 매개변수처럼) 컴포넌트_에_ 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리
• 컴포넌츠 내에서 변경되는 값을 관리해야 할 때 사용

setState

function addPostHandler(postData) {
  setPosts((existingPosts) => [postData, ...existingPosts]);
}

useState

state lifting

state를 활용한 조건부 컨텐츠 로딩

  function submitHandler(event) {
    event.preventDefault();
    const postData = {
      body: enteredBody,
      author: enteredAuthor
    };
    onAddPost(postData);
    onCancel();
  }

  return (
    <form className={classes.form} onSubmit={submitHandler}>
      <p>
        <label htmlFor="body">Text</label>
        <textarea id="body" required rows={3} onChange={bodyChangeHandler} />
      </p>

      <p>
        <label htmlFor="name">Your name</label>
        <input type="text" id="name" required onChange={authorChangeHandler} />
      </p>
      /*********************************/
      <p className={classes.actions}>
        <button type="button" onClick={onCancel}>
          Cancel
        </button>
        <button>Submit</button>
      </p>
      /*********************************/
    </form>
  );
}

useEffect

• 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook
  • 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 된 것
  • 라이프사이클 훅을 대체할 수 있게 됨

Routing

• 페이지 간 navigating을 구현할 수 있도록 다양한 기능들이 제공
• RouterProvider, createBrowserRouter, 상대경로를 이용한 path 표현(…) 등
  

레이아웃 라우트(Layout Route)

• 여러 페이지에 레이아웃으로 적용될 컴포넌트를 특정 route로 지정
• 적용 받을 페이지들은 레이아웃 라우트의 children

동적 라우트(dynamic route)

• path가 동적으로 결정되는 라우팀

Link

• a 태그를 사용할 시 매번 페이지가 재 렌더링 되면서 전역 state가 모두 날아감
• 이를 해결하기 위한 방식으로 Link 컴포넌트 사용

loader()

• useEffect보다 더 편리하게 데이터를 가져올 수 있는 기능

action()

• 데이터를 전송하는 작업을 더 편리하게 할 수 있는 기능
• Form으로 HTML의 기본제공 태그인 form을 대체

CSS 모듈로 CSS 스타일 적용

import classes from "./Post.module.css";

function Post({ author, body }) {
  return (
    <li className={classes.post}>
      <p className={classes.author}>{author}</p>
      <p className={classes.text}>{body}</p>
    </li>
  );
}

export default Post;

.post {
  margin: 1rem 0;
  padding: 1rem;
  background-color: #9c7eee;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  animation: animate-in 1s ease-out forwards;
}

.author {
  font-size: 0.8rem;
  font-weight: bold;
  color: #543280;
  margin: 0;
  text-transform: uppercase;
}

.text {
  white-space: pre-wrap;
  font-size: 1.25rem;
  margin: 0.25rem 0 0 0;
  color: #593884;
  font-style: italic;
}

@keyframes animate-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

특별한 “children” 프로퍼티

• children: A 컴포넌트 사이에 B 컴포넌트가 있을 때, A 컴포넌트에서 B 컴포넌트 내용을 보여주려고 사용하는 props

---

오늘의 멘토링 🥸

• Q1 : 개발자 분들중에서 Notion이나 Obsidian github 블로그 등의 툴과 플랫폼을 활용해서 본인만의 지식을 관리하고 second brain화 하는 분들을 많이 봐왔습니다…! 저는 처음에는 블로그를 써오다가, 어떤 생각이 떠올랐을때 마음먹지 않고 빠르게 기록해놓을수 있는 Notion으로 툴을 바꾸었다가. 최근에는 노션이 반응이 너무느려져서 Obsidian으로 옮겨온 유목민인데요…! 기록 유목민으로써, 강사님은 어떤 툴을 사용하시는지 궁금합니다…!
  • A : 에버노트, google worksheet, Notion을 사용하다가 최근에는 obsidian으로 옮겨온지 6개월정도 되어간다. 앞으로도 또 옮겨가게 되더라도 obsidian 처럼 개인 커스텀을 할 수 있고, 오프라인에서 돌아가는 노트 툴을 사용할것같다.
• Q2 : 혹시 멘토님이 추천하시는 옵시디언 플러그인이 있을까요?
  • A : Advanced Tables, Banners, Book Search, Caelendar, Chronology, Custom Attachment Location, Day Planner, Diagrams.net, Enhancing Mindmap, Excalidraw, Game Search, Iconize, Kanban, Media DB Plugin, Mermaid Tools, Mind Map, Outliner, PlantUML, ReaditLater, Reminder, Tag Wrangler, Tasks, Tasks Calendar, Wrapper, Templater