inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

[ 인프런 워밍업 클럽 Study FE 0기 ] Week 2 발자국

Dream
3

발자국

워밍업 스터디 클럽이 2주 차에 접어들었습니다. 해당 발자국은 따라 하며 배우는 리액트 A-Z (섹션 0-5) 중심으로 작성되었습니다.

요약

React를 사용하려면 Node.js가 필요하다. Node.js를 설치하면 NPM도 같이 설치되니 꼭 Node.js를 설치하자. Node.js 공식 홈페이지에 접속하면 2개의 Node 버전이 있는데, 그중에서 안정적인 버전인 LTS를 설치하면 된다.

 

Section 01. React

[ React란? ]

리액트는 사용자 인터페이스(user interface, UI)를 만들기 위해서 사용되는 자바스크립트의 라이브러리다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다. 이렇게 사용자 인터페이스를 만들기 위해 도움을 주는 TOOL로는 리액트 말고도 Vue.js와 Angular.js가 있다.

[ Framework vs Library ]

프레임워크와 라이브러리를 대략 설명하자면 다음과 같다.

프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있으며, 라이브러리들은 특정 기능을 위해 모듈화 되어있다.

리액트는 라이브러리이다. 왜냐? 리액트는 전적으로 UI를 렌더링 하는 데 관여하기 때문이다. 리액트는 여러 모듈을 사용하며 앱을 관리한다.

[ React Component ]

리액트를 공부하다보면 무조건 마주치는 단어가 있다. 바로 컴포넌트이다. 리액트는 컴포넌트 기반이라고 하는데, 이 컴포넌트는 무엇을 말하는 것일까?

리액트는 여러 컴포넌트 조각으로 되어있다. 이것은 블록같다고 생각하면 된다. 여러 블록 조각을 맞추고 쌓아 올려 하나의 블록 작품을 완성하는 것. 리액트도 마찬가지로 컴포넌트를 이리저리 조합하고 쌓아올려 하나의 웹 페이지를 구성하게 된다.

리액트 컴포넌트에는 2가지가 있다.

React는 여러 컴포넌트 조각으로 구성된다.

개인적인 설명을 덧 붙이자면 리액트는 레고 블럭과 같다고 생각한다. 레고 블럭들을 하나 둘 씩 쌓아 올려 하나의 완성된 레고 작품을 만드는 것이다.

[ Component 종류 ]

React는 2개의 컴포넌트 종류가 있다.

class App extends Component {
  render() {
    return <h1>Hello, ReactJS!</h1>;
  }
}
function App() {
  return <h1>Hello, ReactJS!</h1>;
}

💡 현재 함수형 컴포넌트를 HOOK이랑 해서 많이 사용한다.

💡 참고로 컴포넌트를 작성할 때 반드시 대문자 시작을 해야 한다. 소문자 시작 시 body, h1, p 같은 DOM 태그로 인식해 버린다.

[ 브라우저가 그려지는 원리와 가상 돔 ]

React의 가장 큰 특징은 가상 돔(Virtual DOM)이다. 이것을 사용하는 이유는 인터렉션 때문이다. 이 인터렉션에 의해 DOM에 변화가 발생하면 다시 DOM을 재구성하기 시작한다.

JS 발자국에도 남겼었지만 웹 브라우저의 경우 다음과 같은 과정을 겪고 이 과정은 비용이 꽤 든다.

DOM을 재구성 한다는 것은 위 렌더링 과정을 다시 반복한다는 것이다. 즉, 인터렉션이 일어날때마다 위 과정을 다시 한다. 이것을 보완하기 위해서 나온 것이 가상 돔이다.

가상돔 과정을 살펴보자..!

[ Create React App 을 이용해서 리액트 설치하기 ]

create-react-app 을 통해서 원하는 위치에 리액트를 설치할 수 있다. 이 때, Webpack과 Babel이 함께 설치가 된다. 따라서 React 앱 생성 전에 Webpack과 Babel에 대해서 간단히 알고 가자.

  1. Webpack

  1. Babel

⇒ 이러한 Webpack과 Babel은 개발자가 React 개발 시 알아서 설정 해야 하지만 Create-React-App을 사용해서 React 앱을 생성하면 Babel이나 Webpack 설정이 이미 되어있기 때문에 준비 시간이 단축된다.

[ Create-React-App ]

  1. 프로젝트를 진행할 폴더 생성

  2. VSC에서 해당 프로젝트 폴더 열기

  3. Termial에 npx create-react-app 생성할파일명 입력

    • 강의에서는 npx create-react-app ./을 입력하였다.

    • ./는 현재 위치를 뜻한다.

[ npx create-react-app 에 대하여 ]

실행하는 방법

(강의에서는 npm run start방법만 소개시켜 주셧는데 npm start도 가능하다.)

🤔 개인적으로 요즘 vite에 관한 이야기가 보이는데 이도 조사해 보아야겠다…

 

Section 2. 간단한 To-Do 앱 만들며 리액트 익히기

[ create react app ]

create-react-app으로 리액트를 설치하면 여러 파일이 등장하는데, 이 중에서 절대로 이름을 수정해서는 안되는 파일이 존재한다.

  1. public/index.html: 페이지 템플릿

  2. src/index.js: 자바스크립트 시작 점

조심하자!

💡그리고 우리가 새로 js, jsx, css 등 직접 생성할 파일들은 src 폴더에서 하면 된다. Webpack이 src/ 부분에만 작동하기 때문이라고 한다.

[ package.json ]

해당 프로젝트에 대한 정보들이 들어있다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리들의 버전이 명시되어 잇다.

[ 싱글 페이지 애플리케이션(single-page application, SPA) ]

싱글 페이지 애플리케이션(single-page application, SPA)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.

React.js는 SPA이다. 즉, 어떠한 데이터에 관한 교체 이벤트가 발생했을 때, 서버로부터 페이지를 새롭게(html 파) 받아와 구성하는 것이 아니라 content를 바꿔치기 한다. 이는 HTML 5의 History API를사용해서 가능하게 만든다.

[ History API ]

전통적인 웹 사이트는 a page에서 b page로 이동할 때 a.html을 보여주다가 b.html을 보여주면 되었지만 SPA의 경우 오직 1개의 HTML(index.html)이 존재한다. 따라서 페이징 전환을 하기 위해서 HTML 5 History API를 이용한다.

생성했던 React 프로젝트에서 public/index.js를 살펴보면 <div id="rood"></div>가 있다.

그리고 src/index.js 코드에는 document.getElementById('root')라는 코드가 있다.

자바스크립트 파일의 시작 점인 src/index.js에서 id값이 rood인 요소를 찾아 그곳에 해당 요소들을 렌더링하는 것이다. 즉, div라는 최상위 루트 노드 아래에 직접 정의한 요소를 더해 화면을 꾸며나가는 것이다!!

[ JSX ]

JSX는 Javascript Syntax Extension의 약자로 자바스크립트의 확장 문법이다.

Ract는 React.crateElemnt API를 사용해서 엘리먼트를 생성한 후에 이 엘리먼트를 In-Memory에 저장한다. 그리고 RaectDOM.render 함수를 통해 웹 브라우저에 그린다.

JSX를 사용하면 Babel이 사용한 문법을 crateElemnt로 자동 변환해준다. 따라서 그냥 개발자는 자유롭게 JSX 사용하면 된다.

단, JSX는 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 한다.

// 안된다.
// 자식 요소가 여러 개 라면 부모 요소로 감싸줘라.
function hello() {
  return (
    <div>Hello, Raect!</div>
    <div>Hello, Wrold!</div>
  );
}

// 이렇게 말이다.
function hello() {
  return <div>
      <div>Hello, Raect!</div>
      <div>Hello, Wrold!</div>
    </div>;
}

💡 만약 JSX에서 JS 코드를 사용하고 싶다면 { } 내부에 작성해주면 된다.

[ React와 Key ]

map()을 사용한다면 언제나 명심해야 하는 것. KEY. 이것을 넣지 않는다면 에러가 발생한다.

React에서 요소의 리스트를 나열할 때는 Key를 넣어줘야 한다. Key는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 된다.

추가적으로, 이 Key에 지정하는 값은 순회하고자 하는 목록의 아이템에 대한 ID 값이면 된다. 즉, 고유한 값이여야 한다. 정 없으면 index 넣어도 되지만 index 값은 권장하지 않는다.

리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용한다. 그렇다면 리스트를 나열할 때 바뀐 부분만 어떻게 찾을까? 바로 이 key를 이용해서 어떠한 부분이 바뀌었는 인식하는 것이다.

[ state ]

정말 정말 중요한 개념!!!

리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서 React State를 사용한다. State란 무엇일까?

 

Section 3. To-Do 앱 최적화 하기

[ React HOOK ]

엄청나게 중요하다. 이 HOOK은 클래스형 컴포넌트처럼 함수형 컴포넌트에서도 state와 생명주기 메서드를 사용할 수 있도록 해주는 메서드이다.

클래스 형 컴포넌트에서는 Mounting, Updating, Unmounting 3단계 따라서 생명주기 메서드를 제공한다.

  1. Mounting: componentDidMount()

  2. Updating: componentDidUpdate

  3. Unmounting: componentWillUnmount()

함수형 컴포넌트에서는 이를 위해 HOOK을 사용한다.

[ HOC(Higher Order Component) ]

화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법이다.

[ HOOK ]

기본적으로 알고 있어야 할 HOOK은 다음과 같다.

[ Props ]

[ TailWindCSS ]

[ 리액트 불변성 ]

불변성을 지키며 개발을 하자!

[ React.memo ]

React.memo는 Higher-Order Components(HOC)이다. 불필요한 컴포넌트 렌더링을 방지할 수 있게해준다. (일종의 최적화 용 HOC)

 

Section 4-5. Netflix 앱 만들기

주로 실습 내용 이었다. 정리할 이론만 추려내 보겠다.

[ Styled Component ]

[ React Router Dom ]

React Router DOM을 이용하면 웹/앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.

React Router DOM을 사용하기 위해서는 몇 가지 설정을 해야한다.

  1. index.js에서 BrowerRouter로 루트 컴폰너트를 감싸준다.

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter >
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

  1. 여러 컴포넌트 생성 및 라우트를 정의한다.

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <div className="app">
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
        </Route>
      </Routes>
    </div>
  );
}

+) <Link />를 통해 경로 이동하기

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>홈페이지</h1>
      <Link to="about">About 페이지를 보여주기</Link>
      <Link to="contact">Contact 페이지를 보여주기</Link>
    </div>
  );
}

[ 중첩 라우팅 ]

[ Outlet ]

[ useNavigate ]

[ useParams ]

function test() {
  return (
    <Routes>
      <Route path="invoices/:invoiceId" element={<Invoice />} />
    </Routes>
  );
}

function Invoice() {
  let params = useParams();
  return <h1>Invoice {params.invoiceId}</h1>;
}

[ useLocation ]

[ useRoutes ]

[ Custom HOOK ]

강의에서는 useDebounce과 useOnClickOutside HOOK을 만들었다.

이런 식으로 HOOK을 만들고 활용하는구나 싶었다…

미션

과제 총 합본 https://www.inflearn.com/blogs/7021

 

JS 미션 03. 퀴즈 앱

[ 구현 해야하는 기능 ]

1. 퀴즈 문제, 문제에 해당 하는 선택지 (선택지의 갯수가 매번 다름)

2. 답 선택 시, 정답 여부에 따라 배경의 색상이 변경되어야 함

 

JS 미션 04. 책 나열 앱

[ 구현 해야하는 기능 ]

1. 책 이름 입력 란

2. 책 저자 입력 란

3. 제출 버튼을 누르면 입력한 정보를 저장 함

3-1. 제출 시 제출 했다는 안내 문구 떠야 함

4. 제출된 데이터는 책 리스트에 출력 됨

  1. 아이템은 다음과 같은 기능을 가져야 함


    5-1. 표기 할 데이터: 책 이름, 저자
    5-

    2. 각 아이템에는 삭제 기능이 있어야 함

     

 

REACT 01. 예산 계산기

[ 구현 해야하는 기능 ]

1. 지출 항목 입력 란

2. 지출 비용 입력 란

3. 제출 버튼을 누르면 입력한 정보를 저장 함

3-1. 제출 시 제출 했다는 안내 문구 떠야 함

  1. 아이템은 다음과 같은 기능을 가져야 함


    5-1. 표기 할 데이터: 지출 항목, 지출 비용
    5-

    2. 각 아이템에는 수정 및 삭제 기능이 있어야 함

  2. 수정 버튼 클릭 시 수정 모드로 변경

  3. 전체 삭제 기능이 있어야 함

회고

워밍업 스터디의 2주 차에 진입하며 자바스크립트 공부를 마치고 새롭게 React 공부를 진행하며 React의 다양한 기술을 접하게 되었습니다. 특히 state, props, hook, 그리고 라우팅 부분은 처음에는 이해하기가 어려웠습니다. 그러나 부족한 이해를 보완하기 위해서 강의 내용을 정리하고, 추가적인 학습 자료를 찾아가며 개념을 확실히 파악하려고 노력했습니다.

React 학습을 마치고 시작한 미션도 초반에는 막막함을 느꼈지만 코드를 작성해 나가며 수업 때 배운 내용을 적용해 가며 문제를 해결해 나갔습니다.

워밍업 스터디도 이제 끝을 향해 가네요. 마무리되는 날까지 열심히 학습에 참여하고 미션 해결을 위해 도전해 보겠습니다. 

프론트엔드 워밍업클럽 FE

답변 1

0

John Ahn

보경님 위에부터 전체 다 읽어봤는데 저도 복습이 잘되더라고요!! 너무 정리를 잘하셨습니다!

혹시나 이해가 안 되는 부분은 그 해당 부분을 배속으로 다시 들어도 좋을 것 같습니다.

항상 공부할 때 이런 식으로 정리하면서 하시면 너무 좋을 것 같습니다! 파이팅입니다!