YUN BLOG

npx 명령어로 리액트 프로젝트 + 타입스크립트 + 리덕스 개발환경 세팅

https://www.npmjs.com/package/cra-template-redux-typescript

$npx create-react-app travel-react-app --template redux-typescript

or

$yarn create react-app travel-react-app --template redux-typescript

리액트를 이용하여 웹페이지를 구현하는데 빠르게 아이콘을 사용하고 싶을때 react-icons를 사용할 수 있다.

react-icons.github.io/react-icons/

해당 라이브러리 설치방법

npm install react-icons --save // npm
yarn add react-icons // yarn

설치 후 사이트 좌측을 보면 아이콘을 검색할 수 있는 검색창과 아이콘 종류들이 있다. 

Ctrl - F 를 눌러 우너하는 아이콘 페이지 내에서 검색해서 클릭 후 사용해도 되고 

다른 아이콘들도 찾아보고 싶다면 아예 왼쪽에 검색창에서 검색해서 찾아도 된다.

그 복사한 아이콘을 Import로 불러와야 하는데 아이콘 종류마다 불러오는 주소가 다르다.

import { BsSearch, BsYoutube } from 'react-icons/bs';

UseParams hook 설치

useParams를 사용하기 위해서는 라우터 설치가 필수다.

// 설치
npm install react-router-dom

Useparams() 사용방법

1) useParams를 import 

import React from 'react';
import { useParams } from 'react-router-dom';

const test = () => {
  return (
    <div className="test">
      <p></p>
    </div>
  )
}

export default test;

2) useParams 정보를 하나의 변수에 저장한다.

import React from 'react';
import { useParams } from 'react-router-dom';

const test = () => {
  let { params } = useParams(); // 변수에 저장

  return (
    <div className="test">
      <p></p>
    </div>
  )
}

export default test;

3) 파라미터 값을 사용할 수 있다.

import React from 'react';
import { useParams } from 'react-router-dom';

const test = () => {
  let { params } = useParams();

  return (
    <div className="test">
      <p>현재 페이지의 파라미터는 { params } 입니다.</p>
    </div>
  )
}

export default test;

참조 : https://velog.io/@nemo/useParams

react-router-dom

useNavigate hook

// 설치
npm install react-router-dom

useNavigate는 페이지를 이동할 때 사용된다.

Link를 사용해도 이동 시킬 수는 있긴 하지만 단순 이동만 시킨다면 Link를 사용하면 되고

특정 이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우는 useNavigate를 사용한다.

사용방법

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

1. react-router-dom으로부터 useNavigate를 import 한다.

const navigate = useNavigate();

2. useNavigate를 호출하면 양식이 제출된 후 프로그래밍 방식으로 탐색할 수 있는 함수를 반환한다고 공식문서에 나와 있다. 이것을 변수에 담아 사용한다.

• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환
  • 반환하는 함수를 Navigate 라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있다.

💡 useNavigate를 직접 호출하지 않고 변수로 선언해서 반환된 함수를 호출하는 이유

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

export default function Videos() {
    const [text, setText] = useState('');
    const navigate = useNavigate();
    const handleChange = (e) => {
        setText(e.target.value);
    };
    const handleSubmit = (e) => {
        e.preventDefault();
        setText('') //텍스트초기화 
        navigate(`/videos/${text}`);
    }
    return (
    <div>
        Videos
        <form onSubmit={handleSubmit}>
            <input 
            type="text" 
            placeholder='video id: ' 
            value={text}
            onChange={handleChange}
            />
        </form>
    </div>
    );
}

hook의 규칙
- 컴포넌트 최상단에서 호출해야한다.
- 다른 조건문, 함수선언문, 반복문 등 중첩된 함수 안에서 호출 할 수 없다.
- 컴포넌트 내부 함수에서 callback으로도 호출 할 수 없다.
- 함수 컴포넌트에서 호출할 수 있다. (Custom hook에서 예외처리 가능)

Link 컴포넌트와 useNavigate hook의 차이 

1. Link 

- 클릭 시 바로 이동하는 로직 구현 시에 사용한다.

   ㄴ ex) 제품 리스트에서 제품 상세페이지로 이동 시 

2. useNavigate

- 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용

   ㄴ ex) 로그인 

회원가입 되어 있는 사용자 -> Main 페이지로 이동

회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동

정리

리액트에서는 주로 Link 또는 useNavigate 훅을 사용하는데 이 둘의 차이점은 

Link는 조건 없이 이동할 때, useNavigate는 조건 있는(?) 이동을 할 때 사용된다.

리액트 개발에 필수인 크롬 개발자 도구를 소개하려 한다. 기본적으로 제공되는 크롬 개발자 도구에 리액트 정보를

확인할 수 없다. 필요한 플러그인을 설치하여 더욱 편리하게 이용해 보려고 한다.

크롬 웹 스토어에서 React를 검색하여 React Developer Tools을 설치한다.

설치가 완료되면 React로 구성된 페이지에서 개발자도구를 열면 React 탭이 나타난다. 리액트 컴포넌트들과 Props 값을 쉽게 확인할 수 있다.

또한 설정 모양의 아이콘을 클릭하고 Highlight Updates 옵션을 활성화하면 리렌더링 될 때마다 빈도에 따라서

하늘색 -> 초록색 -> 노란색 -> 발간색 순으로 표시가 된다.

Components

리액트 개발자도구를 열면 구조를 자세히 살펴 볼 수 있고

마우스 오버를 하면 어떤 영역인지 표시된다.

또한 전달받은 Props 도 확인 가능하고 reux , hook state도 확인이 가능하고 바로 수정도 된다.

Profiler

녹화해 주는 기능이다.

페이지 내에서 이동을 했을때 얼마나 걸리는지 알 수 있고 어떤 컴포넌트가 재 렌더링 되는지 체크를 해 볼 수 있다.

CRA를 이용하여 프로젝트 생성하기

1. 먼저 프로젝트를 생성할 디렉터리에서 다음 명령어를 실행한다.

npm init react-app <프로젝트 이름>

❓ npm이란?

패키지 관리 도구로 정식 명칭은 Node Pacackage Manager이다.
npm은 일종의 거대한 소프트웨어 등록소로, 프로그래머들이 만든 여러 유용한 모듈들을 보유하고 있다. (전세계 게임의 배급과 관리를 담당하는 플랫폼인 steam과 비슷한 개념이라고 생각하면 된다.) 이렇게 npm에 업로드되어 있는 노드 모듈을 패키지라고 하는데, 우리는 필요에 따라 이 패키지들을 다운로드하여 사용할 수 있다.

2. 설치가 완료되면 cmd(터미널)에 아래와 같은 메시지가 표시되며 디렉터리에는 프로젝트명의 폴더가 생성된다.

3. 메시지에서 제안하는 바와 같이 생성된 프로젝트로 이동하여 npm start를 실행한다. 그러면 다음과 같은 초기 화면이 나타난다.

📁 CRA 디렉터리 구조

create-react-app을 통해 만들어진 폴더는 node_modules, public, src, .gitignore, package-lock.json, package.json, README.md, 그리고 숨겨져 있어서 당장은 보이지 않는 폴더인 .git으로 이루어져 있다.

node_modules

npm을 이용하여 설치한 모듈들이 저장되는 곳이다.
어떤 모듈들이 설치되었는지는 package.json의 dependencies에서 확인할 수 있다.

package.json

이 프로젝트에서 사용된 모듈과 모듈의 버전을 명시하는 파일이다.
node_modules 폴더는 크기가 상당하기 때문에 github과 같은 저장소에 프로젝트를 저장할 때 제외된다. 이렇게 해도 되는 건, package.json 파일에 내가 사용한 모듈들에 대한 정보가 있어 npm install 시 이 모듈들이 자동으로 설치되기 때문이다.

package-lock.json

좀 더 명확한 버전을 표시하기 위한 파일이다.
package.json에 명시된 모듈의 버전이 범위로 표기되어 있다면, 이 파일에 표기된 버전은 좀 더 명확하게 명시되어 있다.

public

HTML, img 등 정적 파일을 담는 디렉터리이다.

.git

commit 등 git 활동 기록이 저장되는 곳이다.
별도로 설치하지 않아도 commit이 가능한 것은 CRA 앱이 git 파일을 기본적으로 제공하기 때문이다. 숨김 파일이기에 숨김 파일 보기를 설정하기 전까지는 눈으로 확인할 수 없다.

src

우리가 작업하는 대부분의 코드는 이 디렉터리 내부에 위치하게 된다.
아래에서 좀 더 자세히 살펴보겠다.

src 디렉터리

App.js

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <p>안뇽, 일단 테스트 한번 해볼게 이거 재밌네</p>
      </header>
    </div>
  );
}

export default App;

이 프로젝트의 메인이 되는 최상위 컴포넌트이다.

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>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• ReactDOM.render
  컴포넌트를 페이지에 렌더링하는 함수이다.
  첫 번째 인자로 페이지에 렌더링할 내용(JSX 형태)을, 두 번째 인자로 그 내용을 렌더링할 document 요소를 받는다. 이 코드에서 선택된 root 요소는 public/index.html 파일에서 확인할 수 있다.
• React.StrictMode
  추후 사라지게 될 오래된 기능을 사용했을 때 경고를 출력하는 역할을 한다.

setupTests.js

추후 테스트 코드를 작성할 때 enzyme 및 어댑터 적용 시 이곳을 활용한다.

참조

• https://velog.io/@seabluemaker/React-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-with-create-react-app-%ED%8C%8C%EC%9D%BC%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0
• https://blog.naver.com/onegtwog/222206433368
• 리액트를 다루는 기술 (velopert)