hook의 규칙 - 컴포넌트 최상단에서 호출해야한다. - 다른 조건문, 함수선언문, 반복문 등 중첩된 함수 안에서 호출 할 수 없다. - 컴포넌트 내부 함수에서 callback으로도 호출 할 수 없다. - 함수 컴포넌트에서 호출할 수 있다. (Custom hook에서 예외처리 가능)
Link 컴포넌트와 useNavigate hook의 차이
1. Link
- 클릭 시 바로 이동하는 로직 구현 시에 사용한다.
ㄴ ex) 제품 리스트에서 제품 상세페이지로 이동 시
2. useNavigate
- 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
ㄴ ex) 로그인
회원가입 되어 있는 사용자 -> Main 페이지로 이동
회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동
정리
리액트에서는 주로 Link 또는 useNavigate 훅을 사용하는데 이 둘의 차이점은
Link는 조건 없이 이동할 때, useNavigate는 조건 있는(?) 이동을 할 때 사용된다.
패키지 관리 도구로 정식 명칭은 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 추후 사라지게 될 오래된 기능을 사용했을 때 경고를 출력하는 역할을 한다.
