* 해당 게시글은 학원에서 수강 중인 리액트 수업을 바탕으로 작성된 글입니다.
👩🏻💻 새 프로젝트 생성하기
원하는 폴더 안에서 npx, npm, yarn 중 1개를 이용하여 create-react-app을 설치한다
npx create-react-app 프로젝트명
npm create react-app 프로젝트명
yarn create react-app 프로젝트명
Happy hacking! 이 떴다면
cd 프로젝트명 (생성된 프로젝트 폴더 안으로 이동)
npm start 또는 yarn start (프로젝트 실행)
code . (VS code 실행)
👩🏻💻 구조 파악하기
생성된 create-react-app은 크게 3가지의 디렉토리로 구분되며
node_modules : 개발 의존 모듈 집합 디렉토리
public : 정적 리소스 디렉토리
src : React 애플리케이션 개발 디렉토리
디렉토리 내의 파일들을 몇 가지 살펴보자면
📂 public > index.html
public > index.html 파일은 애플리케이션 기본 템플릿으로
<div id="root"></div> 요소는 우리가 개발한 App 컴포넌트를 렌더링하는데 중요한 역할을 한다
📂 src > index.js
src > index.js 파일은 엔트리 파일로, ReactDOM 모듈의 렌더 함수를 사용하여
#root 에 우리가 만든 <App /> 을 렌더링 시켜주는 역할을 한다
📂 src > app.js
src > app.js 파일은 우리가 실제로 코드를 작성할 파일로
함수형 컴포넌트 또는 클래스 컴포넌트를 사용하여 App 컴포넌트를 구축하고
export default App 을 통해 App 컴포넌트 모듈을 내보내준다
📂 정리
① app.js 파일의 export default App 으로 컴포넌트를 내보내주면
② index.js 파일의 ReactDOM.render 함수 를 사용하여 #root 요소에 App 컴포넌트를 렌더링 시켜준다
③ index.html 파일에서 #root 요소에 렌더링된 App 컴포넌트를 브라우저에서 보여준다
👩🏻💻 컴포넌트 선언 방식
💡 컴포넌트란?
컴포넌트(Component)는 UI를 독립적이고 재사용할 수 있는 조각으로 분리시킨 단위를 의미한다
예를 들어, 졸업사진 앨범 속에 증명사진 + 이름 + 좌우명 이 나열되어 있는 것처럼
브라우저에 여러 개의 증명사진 + 이름 + 좌우명 을 구현하고 싶다면
증명사진 + 이름 + 좌우명 로 구성된 졸업생 컴포넌트를 만들어서
졸업생 이라는 틀은 그대로 두고 각각 졸업생들의 정보만 적용시켜주면
졸업생들의 증명사진 + 이름 + 좌우명 이 동일한 규격으로 나열될 것이다
💡 클래스형 컴포넌트
클래스형 컴포넌트(Class Component)의 경우
Component로 상속을 받아야 하며 render() 함수가 반드시 필요하다
💡 함수형 컴포넌트
함수형 컴포넌트(Functional Component)의 경우
클래스형 컴포넌트보다 간결하게 코드를 짤 수 있다
두 방식의 차이는 추후의 게시글을 통해 더 자세히 정리해볼 예정이다 😊
💡 VS code 컴포넌트 선언 꿀팁
VS code - Extensions 에서 reactjs code snippets 를 검색하여 install 한다
rcc → tap 또는 enter : 클래스형 컴포넌트 틀 자동으로 생성
rsc → tap 또는 enter : 함수형 컴포넌트 틀 자동으로 생성
새 컴포넌트에서 rcc 또는 rsc 만 작성해주면 원하는 컴포넌트를 쉽게 선언할 수 있다
물론 리액트가 처음이라면 여러 번 반복하여 컴포넌트를 선언해보는 것을 추천한다
참고 자료
React의 기본, 컴포넌트를 알아보자
[React] 함수형 컴포넌트와 클래스형 컴포넌트
클래스형과 함수형 차이
