리액트 독학

Part 1

리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 입니다.

Routing 같은 기술이 리액트 자체에는 들어가있지 않습니다.

리액트는 3 가지 대표적인 특징을 가지고 있습니다.

1. JSX 문법

JSP 는 자바스크립트 안에서 HTML 문법을 사용해서 view 를 구성할 수 있게 도와주는 라이브러리 문법입니다.

2. Component 기반

리액트는 컴포넌트 기반의 라이브러리인데요, 컴포넌트 기반이라 함은 기존의 웹 페이지를 작성할 때 처럼 하나의 HTML 코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시켜 줍니다.

3. Virtual DOM

가상 돔은 기존 DOM 의 한계를 탈피하기 위해 나온 대안입니다.

DOM 이란 ?

Document Object Model 단어 그대로 문서 객체 모델입니다.

벨로퍼트와 함께하는 모던 리액트

Part 2.

facebook 이 강력한 리액트 개발 도구를 지원해주고 있는데, 바로 create-react-app 입니다.

리액트 플러그인: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=en-US

Part 3.

public 폴더: 가상 DOM 을 사용하는 리액트는 실제 DOM 이 필요합니다.

가상 DOM 이 들어갈 빈 껍데기 html 이 필요하다는 것인데 그 껍데기가 존재하는 폴더입니다.

src 폴더: 리액트 개발이 이루어지는 메인 폴더입니다. 앞으로 우리는 src 폴더를 주로 수정하고 src 폴더에 있는 파일들을 작성하는데 많은 시간을 보내게 될 것 입니다.

public 폴더

• favicon.ico: 페이지 아이콘 이미지 파일입니다.
• index.html: 가상 DOM 이 들어가기 위한 빈 껍데기 html 파일입니다.
• manifest.json: 웹 앱 매니페스트는 사용자가 앱을 볼 것으로 예상되는 영역 (예: 휴대기기 홈 화면) 에 웹 앱이나 사이트를 나타내는 방식을 개발자가 제어하고, 사용자가 시작할 수 있는 항목을 지시하고, 시작 시 모습을 정의할 수 있는 JSON 파일입니다.

src 폴더

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

생성된 리액트 코드를 index.js 에서 불러온 후 public/index.html 의 id 가 root 인 곳에다가 넣는 코드입니다.

Part 4. Props & State (1)

Props 와 State 는 리액트에서 데이터를 다룰 때 사용하는 개념입니다.

State 는 하나의 컴포넌트가 가질 수 있는 변경 가능한 데이터입니다.

Part 5.

1. State 는 현재 컴포넌트 내에서 변경이 가능하다.
2. Props 는 현재 컴포넌트 내에서 변경이 불가능하다.
3. Props 와 State 모두 하위 컴포넌트 상속이 가능하다.

Part 6.

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

사진을 보면 세 가지 부분이 있다.

**생성 될 때 - Mounting: 리액트 코드 첫 렌더링의 시작**

1. class 를 만들면 생성자가 먼저 실행됩니다.
2. render: 렌더링을 위해 작성해둔 JSX 를 return 하는 메서드가 작동합니다.
3. componentDidMount: 리액트 코드가 HTML 에 변환되어 나타났습니다.
   • componentDidMount 는 딱 한번만 수행됩니다.

업데이트 할 때

컴포넌트가 가지고 있는 props 나 state 가 업데이트 되었을 때에 수행되는 부분입니다.

componentDidUpdate: 컴포넌트가 업데이트 되었을 때에 수행되는 메서드로 인자를 받습니다.

prevProps 와 prevState 입니다.

현재 업데이트 된 props 와 업데이트 되기 전 props, 업데이트 되기 전 state 와 현재 업데이트 된 state 를 비교해서 원하는 작업을 수행할 수 있습니다.

제거할 때 - Unmounting: 컴포넌트가 사라질 때

componentWillUnMount: 컴포넌트가 사라질 때에만 수행됩니다.

1장. 리액트 입문

1.리액트는 어쩌다가 만들어졌을까?

2. 작업환경 준비

Webpack, Babel 은 무슨 용도인가요 ?

여러가지의 파일을 한 개로 결합하기 위해서 우리는 Webpack 이라는 도구를 사용하고, JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 우리는 Babel 이라는 도구를 사용합니다.

begin-react 라는 폴더를 만들어 프로젝트를 생성합니다.

npx create-react-app begin-react

yarn start

3. 나의 첫번째 리액트 컴포넌트

• Hello.js

import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello

• App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

이제 index.js 를 열어보세요.

여기서 ReactDOM.render 의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미합니다.

public/index.html 에 id 가 root 인 div 태그에 랜더링합니다.

4. JSX

JSX 가 JavaScript 로 제대로 변환이 되려면 지켜주어야 하는 몇가지 규칙이 있습니다.

다음 문법들을 준수해주시면 앞으로 리액트 컴포넌트 개발함에 있어서 큰 어려움이 없을 것입니다.

꼭 닫혀야 하는 태그

HTML 에서는 input 또는 br 태그를 사용할 때 닫지 않고 사용하기도 합니다.

하지만 리액트에서는 그렇게 하면 안됩니다.

태그와 태그 사이에 내용이 들어가지 않을 때에는 Self Closing 태그라는 것을 사용해야 합니다.

꼭 감싸져야 하는 태그

두 개 이상의 태그는 무조건 하나의 태그에 감싸져있어야 합니다.

애매하게 감싸야 할 상황이 온다면 리액트의 Fragment 라는 것을 사용하면 됩니다.

태그를 작성할 때 이름 없이 작성을 하게 되면 Fragment 가 만들어지는데, Fragment 는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않습니다.

JSX 안에 자바스크립트 값 사용하기

JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 { } 로 감싸서 보여줍니다.

style 과 className

JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다릅니다.

우선, 인라인 스타일은 객체형태로 작성을 해야하며, background-color 처럼 - 로 구분되어있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다.

• App.js

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

CSS 설정 할 때에는 class= 가 아닌 className= 으로 설정을 해주어야 합니다.

한번, App.css 파일을 열어서 전체 내용을 지운 뒤 다음과 같이 수정해주세요.

• app.js

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

• App.css

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

JSX 내부의 주석은 아래와 같이 작성합니다.

{/* 주석은 화면에 보이지 않습니다 */}

열리는 태그 내부에서는 // 이런 형태로도 주석 작성이 가능합니다.

      <Hello 
        // 열리는 태그 내부에서는 이렇게 주석을 작성 할 수 있습니다.
      />

5. props 를 통해 컴포넌트에게 값 전달하기

이번에는 컴포넌트의 props 라는 개념에 대해서 알아보겠습니다.

props properties 의 줄임말입니다.

우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때,

props 를 사용합니다.

• App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

• Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

여러개의 props, 비구조화 할당

6. 조건부 렌더링
7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기
8. input 상태 관리하기
9. 여러개의 input 상태 관리하기
10. useRef 로 특정 DOM 선택하기
11. 배열 렌더링하기
12. useRef 로 useRef 로 컴포넌트 안의 변수 만들기
13. 배열에 항목 추가하기
14. 배열에 항목 제거하기
15. 배열에 항목 수정하기
16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기
17. useMemo 를 사용하여 연산한 값 재사용하기
18. useCallback 를 사용하여 함수 재사용하기
19. React.memo 를 사용한 컴포넌트 리렌더링 방지
20. useReducer 를 사용하여 상태 업데이트 로직 분리하기
21. 커스텀 Hooks 만들기
22. Context API 를 사용한 전역 값 관리
23. Immer 를 사용한 더 쉬운 불변성 관리
24. 클래스형 컴포넌트
25. LifeCycle Method
26. componentDidCatch 로 에러 잡아내기 / Sentry 연동
27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet
리액트 입문 마무리

5장. 리액트 라우터

참고

https://berkbach.com/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-js-1531b18f7bb2

https://react.vlpt.us/basic/01-concept.html