리액트 프로젝트를 생성해보고 컴포넌트에 대해 알아보자.
1. React 프로젝트 생성
npx create-react-app 명령어로 리액트 프로젝트를 생성할 수 있다.
☑️ 리액트 앱(프로젝트) 이름 규칙
- 대문자 사용이 불가능하다.
- 단어 여러개 사용시 하이픈(-) 기호로 구분한다.
☑️ npx
- npm의 자식 명령어로
npx를 사용하여 npm보다 가볍게 패키지를 구성할 수 있다. - npm 버전이 5.2 이상일 때, node 버전이 14 이상일 때 사용 가능하다.
test-app 부분이 내가 생성하고자 하는 폴더 이름이 된다.
1-1. create-react-app으로 생성한 프로젝트의 구조
프로젝트를 생성하고 나면 생기는 폴더 구조이다.
-
node_modules: npm 을 시작하면 생기는 폴더,
내부에 모듈과 관련된 정보가 들어있다. -
public: index.html & favicon.ico! →가상DOM
을 위한 html 파일이 들어있는 곳 -
src: 실제 React 코드(컴포넌트)를 작성하는 곳
프로젝트를 생성하면 index.js에 다음과 같은 코드가 작성된다.
index.js 코드
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App /> // React.StrictMode는 하위의 모든 자손 컴포넌트에 적용된다.
</React.StrictMode>
);index.html 코드
<div id="root"></div>위의 코드로 인해 index.html에 있는 root 아이디를 가진 곳에 render 내에 있는 컴포넌트들을 불러와서 페이지를 렌더링 하게 된다.
React.StricMode : 애플리케이션의 잠재적인 문제를 알아내기 위한 도구이다.
하위의 모든 자손 컴포넌트에 적용되며 strict 모드는 개발 과정 중에만 적용된다.
배포가 되고나면 strict 모드는 저절로 작동하지 않는다.
(삭제해도 상관은 없다. 그리고 경고와 검사를 해주는 건 좋지만 콘솔로그가 두번 찍히는 점이 좀 불편한 것 같다.)
1-2. React 프로젝트 실행
프로젝트가 성공적으로 만들어졌다면 이제 npm start 명령어로
프로젝트를 실행할 수 있다.
프로젝트를 실행하면 3000번 포트로 접속할 수 있다.
만약 3000번 포트를 실행중인데 종료하지 않고 다른 리액트 프로젝트를 실행하면
3001번 포트로 열린다. (알아서 다음 포트번호로 할당해주는 것 같음)
3000번 포트로 들어가면 뜨는 화면이다.
현재 화면은 프로젝트 생성시 기본적으로 세팅되어있는 화면이고,
이제 이 화면을 내가 만들고자 하는대로 만들면 된다.
2. 컴포넌트(Component)
리액트는 컴포넌트 기반의 구조라는 특징을 가지고 있다.
리액트는 화면에서 UI 요소를 구분할 때 component라는 단위를 사용하며 이 컴포넌트들이 조각조각 모여서 화면을 구성하게된다.
내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용이 가능하다는 장점이 있고
UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 분리 가능해 유지보수와 재사용성에 좋다.
1. 재사용 되고 있는 부분을 담당하고 있는 작은 단위의 컴포넌트
2. 페이지의 부분(section, header 등)을 담당하고 있는 컴포넌트
3. 페이지 전체를 담당하고 있는 컴포넌트
2-1. 컴포넌트 종류
1. 클래스형 컴포넌트 (Class Component)
클래스형 컴포넌트는 class를 사용해서 만든다.
render() 메서드를 반드시!! 사용해야 하며
컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용하므로
extends React.Component 라는 상속문을 써줘야 한다.
import React from 'react';
class ClassComponent extends React.Component{
// render() 메서드 사용
render(){
// html 태그 리턴
return(
<>
<h2>Class Component</h2>
<h3>나는 쿠로미</h3>
<h4>내 생일은 10월 31일</h4>
</>
)
}
}
export default ClassComponent;2. 함수형 컴포넌트 (Functional Component)
함수형 컴포넌트는 함수를 사용해서 만든다.
화살표 함수(함수표현식) 으로 작성해도되고, 함수선언문으로 작성해도 된다.
클래스형 컴포넌트보다 짧고 직관적이고 사용방법이 더 간단하다.
import React from 'react'
function FuncComponent() {
return (
<>
<h2>Function Component</h2>
<h3>나는 시나모롤</h3>
<h4>내 생일은 3월 6일</h4>
</>
)
}
export default FuncComponent;App.js에서 불러오기
이제 위에서 만든 컴포넌트들을 App.js (root 컴포넌트 파일) 에서 불러와서 렌더링 할 수 있다.
import 한 다음 (자동으로 되긴 하지만 가끔 안될 때는 직접 import 해줘야 함)
호출할 곳에서 <함수명 /> 또는 <함수명></함수명> 으로 쓰면 된다.
import './App.css';
import ClassComponent from './ClassComponent';
import FuncComponent from './FuncComponent';
function App() {
return (
<div className="App">
<ClassComponent />
<hr />
<FuncComponent />
</div>
);
}
export default App;그럼 이런 결과가 나오는걸 확인할 수 있다.
이렇게 리액트 프로젝트를 생성해보고, 컴포넌트에 대해 알아보았다.
컴포넌트를 만들고 붙이고 이런 과정이 낯설어서 헷갈리기도 했지만 레고 조립하는거같이 재미있었다. 😆
참고자료) 코딩온 강의 자료
