코딩 아자

<< 학습 목표 >>

1. 리엑트에서 이미지 파일을 사용할 수 있다.

2. 리엑트에서 CSS 파일을 불러올 수 있다.

3. 컴포넌트를 역할별로 분리할 수 있다.

4. JS의 map 함수를 사용할 수 있다.

5. JS의 화살표(arrow) 함수를 사용할 수 있다.

지금까지 배운 컴포넌트를 활용해서 간단하게 주소록을 출력하는 컴포넌트를 만들어보자

먼저 주소를 출력할 컴포넌트를 만들자

프로젝트 -> src -> chapter02 -> Address.jsx 파일을 추가하고 아래 코드를 추가하자

import React from 'react'

function Address() {
    return(
        <div>
            <h1>특정한 주소의 정보를 출력할 컴포넌트입니다.</h1>
        </div>
    );
}

export default Address;

이 컴포넌트는 특정한 주소의 정보를 출력할 임시 컴포넌트임

이 컴포넌트를 화면에 출력하자

지금까지 잘 복습했다면 컴포넌트를 화면에 출력하려면 App.js 를 거치지 않아도 된다는 걸 기억할 것

바로 프로젝트 -> src -> index.js에 이 컴포넌트를 추가하고 웹 페이지에 출력해보자

앞으로 특정 컴포넌트를 웹 페이지에 출력하기 위한 방법인 index.js 를 보여주지 않을 것

지면을 많이 차지하고 지금까지 여러 차례 같이 해봤으므로...

앞으로 "특정 컴포넌트를 웹 페이지에 출력하자" 라고 하면 이와 같이 index.js에 적절히 추가해 보여주자

Address 컴포넌트를 제대로 구성해보자

Address 컴포넌트에서 이미지를 사용하기 위해 이미지 파일을 추가하자

프로젝트 -> src -> images 폴더를 추가한 후 아래 이미지를 다운 받아 images 폴더에 넣자

<< images 폴더를 추가하고 해당 폴더에 이미지를 넣는 방법 >>

더보기

---

images 폴더를 추가하는 방법은 chapter02 폴더를 추가한 방법과 동일함

프로젝트 -> src 우클릭(1) -> 새 폴더(2) -> 폴더 이름을 images로 입력 후 엔터(3)

 

다운로드 받은 파일을 images 폴더로 넣을 때는 파일 탐색기에서 다운로드 폴더로 이동 후 옮길 파일을 드래그 해 images 폴더에 놓으면 됨

---

이번에는 Address 컴포넌트에서 사용할 CSS 파일을 추가하자

프로젝트 -> src -> css 폴더를 추가하고 css 폴더에 address.css 파일을 추가 한 후 아래 코드를 넣자

@charset "UTF-8";

.address_info {
    display: flex;
    border: 1px dashed;
    margin: 10px;
    padding: 10px;
}

.image_wrapper {
    margin-right: 20px;
}

.image_wrapper > img {
    width: 100px;
}

이번에는  Address 컴포넌트를 다음과 같이 수정하자

import React from 'react';
import person from '../images/unknown_person2.png';
import "../css/address.css";

function Address(props) {
    return(
        <div className="address_info">
            <div className="image_wrapper">
                <img src={person} alt="알 수 없는 사용자" />
            </div>
            <div className="text_wrapper">
                <p>이름 : {props.name}</p>
                <p>연락처 : {props.tel}</p>
                <p>주소 : {props.address}</p>
            </div>
        </div>
    );
}

export default Address;

<< Address 컴포넌트 설명 >>

더보기

---

번호 순서가 차례대로가 아닌 1, 3, 4, 2 인 점을 주의하자

1. 리엑트에서는 이미지 파일을 컴포넌트처럼 불러와 사용함

2. 리엑트에서는 불러온 이미지를 사용할 때 JSX 를 사용함

3. 리엑트에서는 css 파일을 사용할 때 import로 불러옴

4. 리엑트에서 태그의 class 속성을 지정할 때는 HTML과 다르게 className 으로 써야함

  class 속성을 지정할 때 속성명이 class가 아닌 className인 이유는 JS에서 class 키워드를 이미 사용하고 있기 때문에 class 속성명을 HTML에서 사용하던 그대로 class 라고 하면 JS의 class 키워드와 충돌이 생김

 

Address 컴포넌트는 props 로 전달 받은 이름, 연락처, 주소를 출력하고 있음

---

이번에는 AddressList 컴포넌트 ( 주소록 ) 를 만들자

프로젝트 -> src -> chapter02 -> AddressList.jsx 를 추가하고 아래 코드를 추가하자

import React from 'react';
import Address from './Address';

function AddressList() {
    let addressList = [
        {"name": "홍길동", "tel": "010-1111-1111", "address": "서울특별시"},
        {"name": "김철수", "tel": "010-2222-2222", "address": "인천광역시"},
        {"name": "고영희", "tel": "010-3333-3333", "address": "경기도"}
    ];

    return(
        <div>
            <Address name={addressList[0].name} tel={addressList[0].tel} address={addressList[0].address} />
            <Address name={addressList[1].name} tel={addressList[1].tel} address={addressList[1].address} />
            <Address name={addressList[2].name} tel={addressList[2].tel} address={addressList[2].address} />
        </div>
    );
}

export default AddressList;

<< 코드 설명 >>

(1). Address 컴포넌트를 사용하기 위해 불러옴

(2). 주소록을 구성할 주소 정보들 / JSON(주소 정보)을 배열에 담았음

(3). Address 컴포넌트의 props에 주소 정보를 보내 주소록을 구성

이제 AddressList 컴포넌트를 웹 페이지에 출력하자

혹시 "특정 컴포넌트를 웹 페이지에 출력하자" 라는 말을 잊었다면 다시 이 글의 제일 처음을 읽어보자

이번에는 마지막으로 JS의 map 함수를 활용해서 Address 컴포넌트를 더 쉽게 사용해보자

먼저 가지고 있는 JS 서적 또는 인터넷 또는 chatGPT 등에서 JS의 map 함수와 화살표 함수에 대해서 공부하고 오자

인터넷에서 검색할 때는 [ js map 함수 ] 등의 키워드로 검색하면 금방 좋은 글들이 나옴

<< map 함수를 사용해 컴포넌트 호출을 개선한 AddressList 컴포넌트 >>

import React from 'react';
import Address from './Address';

function AddressList() {
    let addressList = [
        {"name": "홍길동", "tel": "010-1111-1111", "address": "서울특별시"},
        {"name": "김철수", "tel": "010-2222-2222", "address": "인천광역시"},
        {"name": "고영희", "tel": "010-3333-3333", "address": "경기도"}
    ];

    return(
        <div>
            {
                addressList.map((address) => {
                    return (
                        <Address name={address.name} tel={address.tel} address={address.address} />
                    );
                })
            }
        </div>
    );
}

export default AddressList;

<< 학습 목표 >>

1. 컴포넌트를 호출 할 때 컴포넌트로 값을 전달할 수 있다.

2. props에 대해서 설명할 수 있다.

3. props로 전달할 값을 올바르게 표현할 수 있다.

4. 컴포넌트의 이름이 대문자로 시작해야하는 이유를 설명할 수 있다.

JS에서 함수를 선언할 때 매개변수를, 호출 할 때는 인자를 넣어서 함수로 값을 전달 할 수 있음

리엑트의 컴포넌트도 선언할 때 매개변수를, 호출 할 때는 인자를 넣어서 함수로 값을 전달 할 수 있음

전 글에서 도서 3권의 정보를 출력하기 위해 각 도서 정보를 갖고 있는 컴포넌트를 만들었는데 이번에는 한 컴포넌트를 사용해 3권의 도서 정보를 출력해보자

프로젝트 -> src -> chapter02 -> SomeBook.jsx 파일을 추가하고 아래 코드를 입력하자

import React from 'react'

function SomeBook(param) {
    return (
        <div>
            <h1>도서명 : {param.name}</h1>
            <h2>저자 : {param.author}</h2>
            <h3>출판사 : {param.publisher}</h3>
            <hr/>
        </div>
    );
}

export default SomeBook;

이제 이 컴포넌트를 불러와 화면에 출력할 수 있게 App 컴포넌트를 추가하자

프로젝트 -> src -> chapter02 -> App1.js 파일을 추가하고 아래 코드를 입력하자

import React from 'react';
import SomeBook from './SomeBook';

function App() {
    let book1 = {
        "name": "소플의 처음만난 리액트",
        "author": "이인제",
        "publisher": "한빛미디어"
    };

    let book2 = {
        "name": "리액트를 다루는 기술",
        "author": "김민준",
        "publisher": "길벗"
    };

    let book3 = {
        "name": "한 입 크기로 잘라 먹는 리액트",
        "author": "이정환",
        "publisher": "인사이트(insight)"
    };

    return(
        <div>
            {SomeBook(book1)}
            <SomeBook name={book2.name} author={book2.author} publisher={book2.publisher} />
            <SomeBook name={book3.name} author={book3.author} publisher={book3.publisher} />
        </div>
    );
}

export default App;

App1.js 파일에서 컴포넌트를 호출 할 때 권장하지 않는 방식(1)과 권장하는 방식(2)을 혼합해서 사용했음

권장하지 않는 방식은 컴포넌트를 함수처럼 호출하는 것이므로 함수를 호출 할 때 인자를 넣듯이 컴포넌트로 전달할 값을 넣을 수 있음

권장하는 방식은 함수 호출과는 완전히 다른 방식임

권장하는 방식을 사용해서 컴포넌트로 값을 전달할 때는 값만 전달하면 안되고 전달할 값의 이름도 함께 지정(3)해야함

권장하는 방식을 사용해서 컴포넌트로 값을 전달하면 다음과 같이 JSON에 담겨서 컴포넌트의 매개변수로 전달 됨

컴포넌트로 값이 잘 전달됬는지 App 컴포넌트를 출력해 확인해보자

프로젝트 -> src -> index.js 를 다음과 같이 수정하고 프로젝트를 실행시켜보자

3권의 도서 정보가 출력되는걸 확인할 수 있음

컴포넌트의 매개변수 이름은 일반적으로 props 로 지어줌

앞으로는 컴포넌트의 매개변수 이름을 props 로 짓겠음

SomeBook 컴포넌트의 매개변수 이름을 props로 바꾸자

더보기

---

---

또한 컴포넌트의 매개변수 라는 말을 이제부터 props 라고 부르겠음

props로 전달 할 수 있는 데이터의 형태는 다양함

정수, 실수, 문자열, 논리값은 물론이고 JSON, 심지어는 컴포넌트도 전달할 수 있음

적절한 형태는 아니지만 SomeBook 컴포넌트의 props 로 다음과 같이 다양한 형태의 데이터를 보내보자

프로젝트 -> src -> chapter02 -> App2.js 를 추가하고 아래 코드를 추가하자

import React from 'react';
import SomeBook from './SomeBook';

function App() {
    let data = {
        "name": "value"
    };

    return(
        <div>
            <SomeBook name={1} author={3.14} publisher="한빛미디어" />
            <SomeBook name={true} author={data} publisher={<div>한빛미디어</div>} />
        </div>
    );
}

export default App;

이 컴포넌트는 출력할 수 없으니 코드만 보자

props로 값을 전달 할 때 문자열 외에 모든 형태의 데이터는 { } 안에 표현했음

문자열도 { } 안에 표현해서 {"한빛미디어"} 와 같이 표현할 수 있지만 중괄호를 생략해도 되니 일반적으로 props로 문자열을 전달 할 때는 { } 를 생략함

문자열 외에 모든 형태의 데이터는 반드시 { } 안에 표현해야함

props의 중요한 특징은 읽기 전용(Read-Only) 라는 것임

읽기 전용이라는 것은 props에 저장된 값을 사용할 수만 있고 props에 저장된 값을 바꾸면 안된다는 것

SomeBook 컴포넌트에서는 props에 저장된 값을 사용하기만 하고 저장된 값을 바꾸진 않고 있음

만약 왼쪽처럼 컴포넌트의 props 값을 바꾸려고 한다면 웹 페이지에는 무시무시한? 에러 페이지가 보이게됨

컴포넌트 안에서는 전달 받은 값을 절대 바꾸면 안되지만 어쩔 수 없이 바꿔야한다면 다음과 같이 우회할 수 있음

마지막으로 컴포넌트 이름에 대해서 알아보자

앞서 컴포넌트 기초 ( https://codingaja.tistory.com/72 ) 에서 컴포넌트 이름은 반드시 대문자로 시작해야한다고 했음

컴포넌트 이름이 왜 대문자여야 하는지 알아보자

아래 코드에서 el1과 el2에 무언가를 저장하고 있음

el1에는 HTML의 br 태그를 저장하고 있고 el2에는 welcome 컴포넌트가 반환한 태그를 저장하고 있는 것임

나는 어떻게 구분했을까? HTML에는 welcome 이라는 태그가 없으므로...

import React from 'react';

function App() {
    let el1 = <br />
    let el2 = <welcome />

    return(
        <div>
            {el1}
            {el2}
        </div>
    );
}

export default App;

이렇게 컴포넌트명이 소문자로 시작하면 이 코드가 HTML 태그를 나타내는 코드인지 컴포넌트를 호출하는 코드인지 구분할 수 없게 됨

그래서 컴포넌트를 호출하는 코드임을 확실히 파악하기 위해 컴포넌트명의 첫 글자를 대문자로 지어주는 것임

정~말 마지막으로 컴포넌트는 반드시 태그를 반환해야함

태그를 반환하지 않는 컴포넌트를 호출하면 화면에 NaN 으로 출력됨

만약 태그를 반환하지 않는 컴포넌트를 만들었다면 JS 함수로 바꿔야함

JS의 함수로 바꾼다는건?

이름의 첫 글자를 소문자로 바꾸고 호출할 때도 {함수명()} 으로 호출해야함

<< 학습 목표 >>

1. 리엑트 컴포넌트의 JS 함수를 구분할 수 있다.

2. 리엑트 컴포넌트를 권장하는 방식으로 호출할 수 있다.

3. 리엑트 컴포넌트를 분리해 작성할 수 있다.

4. 분리되어있는 리엑트 컴포넌트를 불러올 수 있다.

리엑트는 화면에 보여줄 요소를 컴포넌트라고 부른다고 했음

우리가 지금까지 화면에 보여주기 위해서 어디를 수정했는지??

프로젝트(1) 내 App.js 파일(2)을 수정했고

App.js 파일 안에서도 App 함수(3) 에 코드를 이렇게 저렇게 수정해 화면에 출력했음

(3) 은 JS의 함수로 이름이 App인 함수를 선언한 것인데 리엑트가 적용된 프로젝트에서 첫 글자가 대문자인 함수를 리엑트 컴포넌트라고 부름

JS 함수와 리엑트 컴포넌트는 이름외에도 큰 차이가 있음

태그를 반환하지 않는 것을 JS 함수 라고 부르고

태그를 반환하는 것을 리엑트 컴포넌트라고 부름

App.js 파일 내에서 함수와 컴포넌트를 구분지어보자

더보기

---

 

그래서 사실 getH1 는 이름이 잘못됬음

컴포넌트는 대문자로 시작해야한다고 했으므로 GetH1 으로 이름을 바꿔야함

---

함수 안에서 또 다른 함수를 호출할 수 있는 것처럼 컴포넌트 안에서 또 다른 컴포넌트를 호출할 수 있음

App 컴포넌트를 보면 App 컴포넌트 안에서 getH1 컴포넌트를 호출하고 있음

이렇게 컴포넌트는 또다른 컴포넌트를 호출할 수 있음

이제부터 본격적으로 리엑트를 시작할텐데 실행 중인 리엑트 프로젝트를 중지 시키고 학습을 위한 프로젝트를 만들자

리엑트 프로젝트를 중지 시키면 터미널 창의 경로가 다음(1)과 같을 것

이 상태로 리엑트 프로젝트를 생성하면 first-project 안에 또 다른 리엑트 프로젝트가 만들어지는 것

상위 폴더로 이동해 학습을 위한 리엑트 프로젝트를 만들자

터미널 창에서 상위 폴더로 이동하려면 cd .. 명령을 입력하면 됨

이동 후 이름이 study-project 인 프로젝트를 만들자

( npx create-react-app study-project )

이전 프로젝트처럼 App.js 파일 안에 컴포넌트를 추가하고 App 컴포넌트의 return에서 컴포넌트를 호출하는 방법이 있지만 컴포넌트를 별도의 파일로 분리해 컴포넌트를 호출할 수도 있음

또한 컴포넌트 안에서 컴포넌트를 호출할 때는 함수 형태로 호출 할 수도 있지만 또 다른 형태로 컴포넌트를 호출 할 수 있음

먼저, 지금까지 한 첫 번째 방식으로 컴포넌트를 호출해보자

방금 만든 프로젝트 -> src -> App.js 파일 내 불필요한 코드를 전부 지우자

컴포넌트가 작다면 한 파일(App.js)에 컴포넌트들을 추가하고 컴포넌트를 호출하면 됨

또한 컴포넌트를 호출하는 방법은 2, 3과 같이 두 가지 방법이 있음

컴포넌트를 호출할 때는 되도록 3번의 방법으로 호출해야함

JS 함수를 호출할 때는 2번의 방식으로만 호출할 수 있음

이번에는 별도의 파일에 컴포넌트를 추가하고 App.js에서 컴포넌트를 불러와 호출해보자

먼저 chapter02에서 배운 것들을 모아 저장할 chapter02 폴더를 추가하자

프로젝트 -> src 폴더 우클릭(1) -> 새 폴더(2) 클릭 -> 폴더 이름을 chapter02 로 지정(3) 

chapter02 폴더 안에 컴포넌트를 갖고 있을 파일을 추가하자

chapter02 폴더 우클릭(1) -> 새 파일(2) 클릭 -> 파일 이름을 Component2.jsx 로 지정(3)

여기까지 왜 왔는지 다시 한번 떠올려 보면 이전 프로젝트처럼 App.js 파일 안에 컴포넌트를 추가하고 App 컴포넌트의 return에서 컴포넌트를 호출하는 방법이 있지만 컴포넌트를 별도의 파일로 분리해 컴포넌트를 호출할 수도 있다고 했음

그래서 << 하나의 파일에 컴포넌트를 추가 >> 하고 컴포넌트를 호출하는 두 가지 방법을 봤음

그 중에 컴포넌트는 되도록이면 두 번째 방법으로 호출하라고 했음

이번에는 << 컴포넌트를 별도의 파일로 분리 >> 하기 위해 chapter02 폴더를 만들고 그 안에 Component2.jsx 파일을 만든 것

파일의 확장자가 jsx 인 것은 이 파일에 리엑트 코드를 넣을 것이기 때문...

리엑트는 JS 라이브러리이므로 파일의 확장자를 js로 해도 무관함

Component2.jsx 파일 안에 아래와 같이 코드를 추가하자(1)

그 후 App.js에서 Component2.jsx 파일을 불러와(2) Component2 컴포넌트를 호출(3)해보자

이것저것 왔다갔다 복잡한걸 배운듯 하지만 컴포넌트 맛보기였음

컴포넌트를 생성하는 방법은 두 가지가 있음

1. App.js 에 컴포넌트들을 생성

2. 별도의 파일에 컴포넌트들을 생성

App.js에 컴포넌트들을 생성했을 경우 당연히 별도의 불러오는 과정없이 App.js에서 바로 호출 할 수 있음

별도의 파일에 컴포넌트들을 생성했을 경우 App.js 에서 컴포넌트를 불러와 호출할 수 있음

컴포넌트를 호출하는 방법은 두 가지가 있음

1. 함수 방식으로 컴포넌트 호출

2. 리엑트 고유의 방식으로 컴포넌트 호출

컴포넌트는 리엑트에서 사용하는 것이므로 2번의 방법인 리엑트 고유의 방식으로 컴포넌트를 호출하길 권장함

마지막으로 별도의 파일에 컴포넌트들을 생성했을 때 굳이 App.js 를 통해 호출하지 않고 곧바로 index.js 에서 컴포넌트들을 불러와(1) 호출(2)할 수도 있음

<< 학습 목표 >>

1. JSX를 사용할 수 있다.

리엑트는 JS 라이브러리이므로 JS코드와 리엑트 코드가 혼합되어있음

노란 밑줄이 그어진 코드는 JS 코드이고

주황 밑줄이 그어진 코드는 리엑트 코드임

let element = <h1>Hello React!</h1>;

위 코드는 element 변수를 선언한 후 element 변수에 h1 태그를 저장한 것으로 리엑트의 JSX가 적용된 코드임

JS만 사용했다면 위 코드는 문법에 어긋난 코드임

JSX는 A syntax extension to JavaScript 를 뜻하는 말로 우리말로 번역하면 자바스크립트 확장 문법임

자바스크립트의 문법에 리엑트 문법을 더 할 수 있음

JSX코드는 실제 웹 사이트가 동작할 때 JS 코드로 변환됨

JSX를 JS 코드로 변환 시켜주는 건 리엑트의 createElement 함수가 함

createElement 함수는 중요하지 않으므로 "이런게 있구나" 정도로만 기억하면 됨

JSX를 사용하면 많은 장점이 생기지만 가장 큰 장점은 Injection Attack을 방어할 수 있다는 점이라고 생각함

Injection Attack 이란 사용자가 입력한 값을 JS에서 사용한다는 점을 이용해 사이트를 해킹하는 기법임

왼쪽의 이미지와 같이 네이버에 로그인할 때 일반적인 사용자는 아이디, 비밀번호를 입력함

그러나 해커는 아이디, 비밀번호를 JS에서 사용해 로그인 처리를 한다는 점을 파악하고 JS에서 실행 가능한 코드를 넣어 서비스를 해킹하려고 시도할 수 있음

해커의 이런 방식을 Injection Attack 이라고 하며 JSX를 사용해서 사용자가 입력한 아이디, 비밀번호를 가져온다면 해커가 입력한 실행 가능한 코드가 실행되지 않도록 막아줌

지금까지는 JSX에 대한 서론, 설명이었고 여기서부터가 본론인 JSX를 사용하는 방법임

그러나 굉장히 간단함

우리는 이미 지난 Chapter에서 JSX를 사용했었음

App 함수를 선언(1)했는데 이는 JS 문법임

JS는 아래처럼 HTML을 직접 반환할 순 없고 문자열로 반환해야함

App 함수가 HTML을 직접 반환할 수 있는 이유는 JSX를 사용(2)했기 때문

변수를 JSX로 사용해보자

변수를 선언(1)하고 JSX를 사용해 변수를 사용(2) 할 수 있음

리엑트 프로젝트를 실행시켜보자

우리가 text 변수에 저장했던 문자열이 출력된 화면을 볼 수 있음

변수 선언(1)은 JS 코드로만 이루어져있고 변수에 저장한 값을 h1 태그에 넣기 위해 JSX를 사용(2)한 것임

이렇게 JSX의 {변수명} 을 사용하면 변수가 가지고 있는 값을 사용함

JSX에서 객체를 활용할 수있고 함수를 호출할 수도 있음

JSX는 App 내에서 뿐만 아니라 JS 코드 어디든 사용할 수 있음

왜? JSX의 X가 (extention) 이므로...

여기까지가 JSX의 끝~!

간단하지만 JS를 잘모른다면 JS와 JSX의 차이, JSX를 어떻게 활용해야하는지 알 수 없음

JS가 부족하다 생각된다면 JS 공부도 함께 병행해야함

<< 학습 목표 >>

1. 리엑트 프로젝트를 실행시킬 수 있다.

2. 리엑트 프로젝트를 종료시킬 수 있다.

리엑트 프로젝트를 실행시키려면

1. 실행 시킬 리엑트 프로젝트를 vs code로 직접 열거나

2. 실행 시킬 리엑트 프로젝트를 포함하고 있는 상위 폴더를 vs code로 열어야함

vs code에서 프로젝트 또는 폴더를 열 때는 vs code 내 상단 [ 파일 ] (1) -> [ 폴더 열기 ] (2) 후 해당 폴더를 선택하자

그 다음 vs code 내에서 터미널 창을 열어야함

터미널 창을 열려면 vs code 내 상단 [ 터미널 ] (1) -> [ 새 터미널 ] (2) 클릭

그럼 vs code 하단에 터미널 콘솔(1)이 열렸을 것

이제 터미널에서 리엑트 프로젝트를 실행시키는 명령을 입력하면 되는데

1. 실행시킬 리엑트 프로젝트를 직접 열었다면 바로 리엑트 프로젝트를 실행시키는 명령을 입력하면 됨

2. 실행 시킬 리엑트 프로젝트를 포함하고 있는 상위 폴더를 열었다면 터미널 창 내에서 실행시킬 리엑트 프로젝트로 이동 후 리엑트 프로젝트를 실행시키는 명령을 입력하면 됨

즉, 리엑트 프로젝트로 이동 후 리엑트 프로젝트를 실행 시키냐 곧바로 리엑트 프로젝트를 실행시키냐의 차이

터미널 창에서 명령을 실행시킬 때는 엔터키를 눌러야함

실행시킬 리엑트 프로젝트로 이동할 때는 cd (프로젝트) 명령으로 이동할 수 있음

cd 명령을 사용해 실행시킬 리엑트 프로젝트로 이동했음(1)

터미널의 경로(2)를 보면 실행시킬 리엑트 프로젝트로 이동한 걸 알 수 있음

리엑트 프로젝트를 실행시키는 명령은 npm start 임

해당 명령을 입력하고 잠시 기다리면 리엑트 페이지가 열리는걸 볼 수 있음

리엑트 프로젝트를 종료하고 싶을 때는 vs code를 끄면 되지만 또 다른 방법으로는 vs code의 터미널 창을 한번 클릭 한 후 Ctrl + C 를 누르면 됨

그럼 [ 일괄 작업을 끝내시겠습니까? (Y/N)? ] 메세지(1)가 나오는데 Y 입력 후 엔터키를 누르면 리엑트 프로젝트가 종료됨