React 완벽 가이드 - 섹션3 : 리액트 기초 및 실습 컴포넌트

오구·2022년 6월 4일
0

React

목록 보기
5/7
post-thumbnail

What we learn.... 🖊
React Core Syntax, JSX
Component와 Data의 활용방법

1) Component

  • UI는 컴포넌트로 구성
  • HTML, css, javascript의 결합
  • 선언적 방식으로 사용



2) 리액트 프로젝트 생성하기

1️⃣ Node.js

  • create-react-app이 실행되기 위한 준비물
  • https://nodejs.org/en/ 를 통해 최신버전 설치
  • 미리보기용 서버 설정

2️⃣ create react app

npx create-react-app '프로젝트명'

3️⃣ 로컬서버 띄우기

cd '프로젝트명'
npm start
## localhost:3000 에서 자동으로 로컬서버 생성

4️⃣ vscode에서 폴더 열기

  • package.json : 프로젝트에서 어떤 패키지를 사용하는지 보여줌
  • src 폴더 : 작업할 실제 소스가 들어가는 폴더

+)) 로컬서버 종료하기

ctrl + C 시 종료

# 배포된 프로젝트로 실습


1️⃣ 프로젝트 오픈 및 터미널 오픈

npm install
## package.json에 적혀있는 dependency들을 다운로드하는 명령어

2️⃣ 의도치 않은 난관 봉착

## dependency tree의 보안 취약점과 해결 방안을 제공
npm audit

## 최상위 종속성의 major 업데이트를 진행
npm audit fix --force

3️⃣ 서버 재기동

## 개발 서버를 실행하는 명령어
npm start
  • 서버를 켜놓은 경우, 코드가 변경되는 경우 자동으로 반영됨



3) 리액트 프로젝트 분석하기

// index.js : 로컬 서버를 실행시킨 후 처음으로 실행될 코드

/* react-dom이라는 서드파티 라이브러리에서 ReactDOM이라는 객체를 import  */
import ReactDOM from 'react-dom';

/* index.html 내부에 작성된 root div 내부에 App.js를 가져와서 렌더링함 (JSX 구문) */
ReactDOM.render(<App />, document.getElementById('root')); // .js 생략 O

  • App.js 내 export 구문을 통해 타 js파일에서 App에 접근할 수 있도록 함
  • index.js의 시작파일에서 렌더링 되는 루트 컴포넌트라고 생각하면 됨



4) JSX 소개



5) 리액트 작동방식

1️⃣ 기존 방식 -명령형(Imperative) 접근 방식-

/* 기존 javascript에서 사용하던 방식 */
const para = document.createElement('p');
para.textContext = 'This is also visible';
document.getElementById('root').append(para);

2️⃣ React 방식

/* App.js */
function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      {/* 최종상태만 정의하면, 리액트에서 자동으로 지시사항(기존 자바스크립트 문법과 같은 형태)을 생성 후 작동 */}
      <p>This is also visible ~.~</p>
    </div>
  );
}

export default App;



6) 사용자 컴포넌트 생성하기

  • 한 컴포넌트당 하나의 파일을 갖도록 연습 (이상해보이지만 정상이라고 함..)
  • 프로젝트 볼륨이 커질수록 컴포넌트가 많아짐
  • React로 작성된 컴포넌트는 함수형태임!! (자바스크립트 함수..)

1️⃣ 사용자 컴포넌트 생성 (ExpenseItem.js)

  • ExpenseItem 이라는 사용자 컴포넌트를 생성 후, import 하여 사용
  • 단, JSX 형태로 사용할 경우 무조건 대문자로 시작해야함

2️⃣ ExpenseItem 컴포넌트에 css 추가

  • css파일 생성 후 div에 className 추가
  • className인 이유 : class는 자바스크립트 예약어이기 때문

3️⃣ ExpenseItem 컴포넌트에 동적 요소 추가

  • 동적요소 처리 시 중괄호( { } ) 내부에 사용
  • 사용자 컴포넌트가 props를 받아와 처리할 수 있음 (function에 parameter형태로 작성)
  • ExpenseItem에서 날짜를 구성하는 컴포넌트를 분리 (ExpenseDate.js)
  • import를 통해 ExpenseItem.js에서 사용할 수 있음

  • App.js 내에서 ExpenseItem.js 를 import하여 사용자 컴포넌트 사용
  • ExpenseItem.js 내에서 ExpenseDate.js를 import하여 사용자 컴포넌트 사용
    => 사용자 컴포넌트를 트리형 구조로 사용할 수 있으며, 관리가 용이해짐

4️⃣ App.js내 소스 간략화

Composition (합성)

  • 작은 빌딩 블럭으로부터 사용자 인터페이스를 구축하는 접근 방법
  • props.children을 통해 wrapper component를 생성할 수 있음

합성과 wrapper component의 사용 이유

  • css, html, JSX와 같은 코드의 중복을 피할 수 있음
  • 컴포넌트의 합성을 통해 깔끔한 코드 유지 가능



7) 사용자 컴포넌트와 UI

컴포넌트란 코드를 여러 개의 파일과 블럭으로 나누어 만든 재사용이 가능한 아이템
📍 리액트를 작업 시 알아야할 중요 개념인 Component와 props



8) JSX 소스를 개발자도구에서 볼 수 없는 이유

  • JSX 코드를 개발자 도구에서 볼 수 없는 이유는 브라우저는 JSX코드를 지원하지 않기 때문이며, 변환된 코드만을 볼 수 있음



Section3 마무리 ⌨️

  • Component와 props를 기반으로 재사용성의 중요성을 깨달았다.
  • JSX는 편한거라고는 하는데 나는 왜이렇게 자바에서 DB커넥션 풀 만들고 쿼리문 자바단에서 쓰는.. 그런 문법과 비슷하다고 느끼는건지... 잘 모르겠다. 아직 적응이 필요한듯 하다.
  • 강의별로 이어지는 내용이 많다보니 이제 정리 방식을 조금 바꿀 필요가 있어보인다.

0개의 댓글