본문 바로가기
LG 헬로비전 DX DATA SCHOOL/Web Programming

Django & React

by 황밤 2023. 7. 28.
728x90
반응형

2023/07/28

 

ajax 다시보기

  • 비동기적으로 서버에 데이터를 요청하는 것
  • 다른 부분을 영향을 주지 않고 UI를 실시간으로 갱신하는 것이 목적
  • 최근에는 웹 서버와 웹 클라이언트를 별개의 프로그램으로 구현을 하기 때문에 웹 크라이언트에서 웹 서버로 데이터를 요청을 해서 응답을 받아서 출력하는 형태로 작성
  • 요청(파라미터를 어떻게 전송하고 전송 방식은 어떻게 할 것 인가?)-> 응답 -> 응답받은 데이터를 파싱(일반 Flat File 형태, XML, JSON - 최근에 많이 사용) -> 사용

 

2023.07.27 - [LG 헬로비전 DX DATA SCHOOL/Python] - Django REST API

 

Django REST API

2023/0727 2023.07.26 - [LG 헬로비전 DX DATA SCHOOL/Python] - Django Django 2023/07/26 2023.07.25 - [LG 헬로비전 DX DATA SCHOOL/DATA BASE] - 데이터 베이스 데이터 베이스 2023-07-25 1. 데이터 베이스 1.1) SQR 사용에 따른 분류 R

dxdata.tistory.com

 

 

 

SMALL
SMALL

12.6) form에 데이터를 입력받아서 삽입

 

  • form을 만들어서 데이터를 전송할 때는 form 안의 name 과 파라미터 이름이 일치해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
    <div id="display"></div>
<button id="allbtn">전체 데이터 가져오기</button>
itemid <input type="text" id="itemid" />
<button id="getbtn">데이터 1개 가져오기</button>


    <!-- ajax로 보낼 때는 id 만 필요 -->
    <!-- submit 버튼으로 전송할 때는 나머지 3가지 고려 -->
    <!-- action은 처리할 서버의 url -->
    <!-- method는 전송방식으로 생략하면 get -->
    <!-- enctype은 파일이 있는 경우 multipart-formdata를 선정 -->
<form id="crazyform">
    <h3>도서 정보 입력</h3>
    <p>itemid<input type="number" name="itemid" />></p>
    <p>제목<input type="text" name="title" />></p>
    <p>작가<input type="text" name="author" />></p>
    <p>가격<input type="number" name="price" />></p>
    <p>분류<input type="text" name="category" />></p>
    <p>페이지수<input type="number" name="pages" />></p>
    <p>날짜<input type="date" name="published_date" />></p>
    <p>설명<textarea name="description" rows ="4" clos="20"></textarea></p>
    <p><input type="button" value="전송" id="insert" />></p>

</form>



</body>
<script>
    document.getElementById("insert").addEventListener('click', (e)=>{
        //form 에 입력된 데이터 가져오기
        let crazyform = document.getElementById("crazyform");

        let formdata = new FormData(crazyform);
        //ajax 요청 객체
        let request = new XMLHttpRequest();
        // 요청 생성
        request.open('POST', '../example/fbv/items', true)


        //FormData를 POST 방식으로 전송하기 위한 데이터로 변경
        request.setRequestHeader("Content-type",
            "application/x-www-form-urlencoded");
        let param = "";


        for(let pair of formdata.entries()){
            param += pair[0] + '=' + pair[1] + "&";
        }



        request.send(param);
        //응답 결과를 처리
        request.addEventListener("load", (e) =>{
            alert(request.responseText);
        })

    })


    document.getElementById("getbtn").addEventListener('click',
        (e) => {
        // 아이디가 itemid인 입력의 값을 가져온다
            let itemid = document.getElementById("itemid").value;
            //alert(itemid);

            let request = new XMLHttpRequest();
            request.open('GET', '../example/fbv/book/' + itemid, true);
            request.send('');
            request.addEventListener('load', (e) => {
                //없는 번호인 경우는 detail에 NotFound 값이 넘어옵니다.
                //alert(request.responseText)

                // Parsing 진행
                let data = JSON.parse(request.responseText);
                //alert('detail' in data)
                let txt = "";

                if('detail' in data){
                    // 데이터가 없을 때 처리
                    txt = "<h3>해당 되는 itemid가 없습니다.</h3>";


                }else {
                    //데이터가 있을 때 처리
                    txt += "<h3>" + data.itemid + "</h3>"
                    txt += "<h3>" + data.title + "</h3>"
                    txt += "<h3>" + data.price + "</h3>"

                }
                document.getElementById('display').innerHTML = txt;
            })
        });


    document.getElementById("allbtn").addEventListener("click",
        (e) => {
        let request = new XMLHttpRequest();
        //출력하는 함수에 객체 대입하면 toString 메서드를 호출합니다.
            //python은 __str__ 메서드를 호출합니다.
            //위 메서드를 재정의하면 그 내용이 출력되지만, 재정의를 하지 않으면
            //기본적으로 설정된 값이 출력된다.
            alert(request)

            //요청 생성
            //http://localhost:8000/example/fbv/items
            //현재는 http://localhost:8000/ajax
            request.open('GET', '../example/fbv/items', true);
            //요청전송
            request.send('')
            //응답이 오면 호출
            request.addEventListener('load', (e) => {
                //문자열
                //alert(request.responseText)

                //문자열을 자바스크립트 데이터로 변환
                // 객체들의 배열
                let data = JSON.parse(request.responseText);
                let txt = '';
                for(let item of data){
                    txt += '<h5>' + item.title + '</h5>';
                    txt += '<p>' + item.price + '</p>';
                    txt += '<p>' + item.published_date + '</p>';

                }
                document.getElementById('display').innerHTML =
                    txt;
            })
    })

</script>
</html>

 

 

12.7) fetch API

  • XML HttpRequest는 콜백(이벤트가 발생했을 때 처리하는 함수를 별도로 설정하는 방식) 함수를 이용하는 구조
  • 콜백 함수를 사용하는 경우의 단점은 콜백 함수 안에 콜백 함수가 위치해야 하는 경우 코드의 가독성이 떨어짐

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
    <div id="display"></div>
<button id="allbtn">전체 데이터 가져오기</button>

<button id="fetchbtn">FetchAPI 사용</button>

itemid <input type="text" id="itemid" />
<button id="getbtn">데이터 1개 가져오기</button>


    <!-- ajax로 보낼 때는 id 만 필요 -->
    <!-- submit 버튼으로 전송할 때는 나머지 3가지 고려 -->
    <!-- action은 처리할 서버의 url -->
    <!-- method는 전송방식으로 생략하면 get -->
    <!-- enctype은 파일이 있는 경우 multipart-formdata를 선정 -->
<form id="crazyform">
    <h3>도서 정보 입력</h3>
    <p>itemid<input type="number" name="itemid" />></p>
    <p>제목<input type="text" name="title" />></p>
    <p>작가<input type="text" name="author" />></p>
    <p>가격<input type="number" name="price" />></p>
    <p>분류<input type="text" name="category" />></p>
    <p>페이지수<input type="number" name="pages" />></p>
    <p>날짜<input type="date" name="published_date" />></p>
    <p>설명<textarea name="description" rows ="4" clos="20"></textarea></p>
    <p><input type="button" value="전송" id="insert" />></p>

</form>



</body>
<script>
    document.getElementById("fetchbtn").addEventListener('click',
        (e)=>{

        /*
        // ajax 객체 생성
        let request = new XMLHttpRequest();
        //alert(request)


        // open을 해서 연결을 설정
        request.open('GET', '../example/fbv/items', true)
        //alert(request)

        // 전송할 데이터 생성

        // 전송
            request.send('')
        // 전송 성공시 수행할 동작
            request.addEventListener('load', (e)=>{
                let data = JSON.parse(request.responseText);
                //alert(data)

         */
            fetch('../example/fbv/items', {
                //옵션 설정
                //전송 방식이나 파라미터 설정
            })    
                .then((response) => response.json())
                .then((data)=> alert(data));
            //fetch 함수를 호출하면 서버에게 요청을 전송하고
            //then에 함수를 설정하면 then에게 전송받은 데이터가 전달됨
            //전달된 데이터가 json이라면 json 메서드를 호출하면 전달한 데이터를 파싱하고
            // 그 결과를 다음 함수에게 전달

    });

function 이름(매개변수){

내용

}

let 이름 = function (매개변수){

내용

}

function 

 

 

 

12.8) axios 라이브러리

 

  • ajax를 편리하게 사용할 수 있도록 만든 자바스크립트 라이브러리
  • https://axios-http.com/kr/docs/intro

 

 

12.9) CORS(Cross-Origin Resource Sharing) <-> COS

 

  • SOP(Same Origin Poiicy(동일 출처 정책)
  • 다른 출처에서 가져온 리소스와 상호 작용하는 것을 제한하는 브라우저읩 보안 방식 ajax 나 fetch api를 이용해서는 자신의 애플리케이션이 아니면 데이터를 받아오지 못합니다.
  • ajax 나 fetch api를 이용해서 다른 애플리케이션이 제공하는 데이터를 받아서 사용하고자 하는 경우는 서버 쪽에서 CORS 설정을 해서 특정 클라이언트가 데이터를 받아갈 수 있도록 하거나 클라이언트 쪽에서 Proxy를 구축해서 직접 받지 않고 다른 프로그래밍 언어가 받아서 전달해주도록 하면 됩니다.
  • CSRF 는 현재 연결되는 통신을 끊는 기능

 

 

**Django & MySQL & react를 이용한 ToDo 작성 및 도커 이미지 배포


1. 개발 환경


1)Back End

  • Database: MySQL
  • Programming Language: Python
  • Framework: Django
  • IDE: Pycharm

 


2)Front End

  • Framework: react
  • IDE: Visual Studio Code

 


2. 구현 기능

  • ToDo 생성
  • ToDo 목록 보기
  • ToDo 수정
  • ToDo 삭제
  • 추가할 내용: 회원가입, 로그인, 로그아웃

 

 


3. 백엔드 테스트 도구

 

  • 백엔드 서비스 테스트를 프론트 엔드를 구현한 후 하면 한꺼번에 수정해야 할 부분이 늘어나서 벡엔드 테스트를 위한 도구를 사용
  • postman을 이용
    https://www.postman.com/downloads

 

Download Postman | Get Started for Free

Try Postman for free! Join 25 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster.

www.postman.com

 

 

 

4. 목표

  • 서비스를 구현 한 후 데이터베이스를 백업하고 서버 와 클라이언트 애플리케이션 이미지를 생성해서 다른 컴퓨터에서 구동이 가능하도록 만드는 것

 


5. 데이터베이스 작업

 

  • 사용할 데이터베이스를 생성하거나 확인

create database lg;

show databases;

use lg;

 


6.Django 프로젝트 생성 및 설정

 

 

1)프로젝트 디렉토리를 생성

 


2)가상 환경 생성 및 활성화

 

  • 생성

python -m venv myvenv

 

  • 활성화

windows: myvenv\Scripts\activate
mac: source myvenv/bin/activate

 

 

 


3)필요한 패키지 설치

 

 

  • pip install django
  • pip install mysqlclient
  • pip install djangorestframework

 

 


4)장고 프로젝트 생성

  • django-admin startproject todoproject .

 

 


5)애플리케이션 생성

  • python manage.py startapp todoapplication

 


6)settings.py 파일에 설정 변경

 

  • app 등록 

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "todoapplication",
    "rest_framework"
]

 

 

 

  • 데이터베이스 접속 정보를 수정
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",
        "NAME": "lg",
        "USER": "root",
        "PASSWORD": "252585",
        "HOST": "127.0.0.1",
        "PORT": "3306"
    }
}

 

 

 

  • 시간 대역을 수정


TIME_ZONE = "Asia/Seoul"

 

 

 


7) 서버 구동

 

  • python manage.py runserver
  • 브라우저에서 localhost:8000 으로 접속해서 로켓 모양의 장고 이미지가 출력되는지 확인

 

8) 데이터베이스 설정 정보를 python 코드로 만들지 않고 별도의 파일에 텍스트 형태로 작성하는 이유

  • 일반 파일이나 데이터베이스에 설정 정보를 저장하면 설정 내용이 변경되도 다시 컴파일해서 빌드할 필요가 없어집니다.

개발 환경에서 운영 환경으로 이행 시 발생하는 오류나 운영환경 내에서의 변경에도 오류가 발생할 가능성이 매우 낮아집니다.

 

 

9) ORM을 사용하는 이유

 

  • SQL 을 이용하지 않고 프로그래밍 언어ㅢ 함수를 이용하여 작업을 하기 때문에 SQL을 별도로 익히지 않아도 됨
  • SQL을 이용하지 않기 때문에 관계형 데이터베이스를 변경할 때 설정 정보만 변경하면 됩니다.
  • ORM을 사용할 수 없는 환경 : NoSQL을 사용하는 경우, 유사한 형태로 동작을 시켜주는 패키지는 존재

 

7. 모델 생성

 

7.1) 모델과 테이블 연결

  • 테이블을 먼저 만들고 Model 클래스와 연결하는 것이 가능하고 Model 클래스를 만들어서 자동으로 테이블을 생성하는 것도 가능
  • 테이블 이름은 application이름_모델이름으로 만들어 지는데 모델이름의 첫글자는 관계형 데이터베이스 종류에 따라 대소문자를 다르게 합니다.
  • 실무에서는 테이블을 만들고 연결하는 것이 일반적입니다.

학습을 할 때는 2개가 연동되는 과정을 보거나 모델 클래스의 필드가 데이터베이스에 어떻게 생성되는지를 확인하기 위해서 모델 클래스를 만들어서 Migration을 합니다.

 

 

 

7.2) ToDo 모델을 어플리케이션의 models.py에 작성

from django.db import models

class ToDo(models.Model):
    id = models.AutoField(primary_key=True) #auto_increment
    userid = mdoels.CharField(manx_length=100)
    title = models.CharField(max_length=100)
    done = models.BooleanField()
    regdate = models.DateTimeField(auto_now_add=True)
    moddate = models.DateTimeField()
    #delete 필드를 제작해 boolean 으로 휴면 여부를 만들 수 있다.

 

 

 

 

 

 

7.3) 변경 내용 적용

python manage.py makemigrations
python manage.py migrate

 

 

 

 

 

 

7.4) 데이터베이스에 접속하여 테이블을 확인

 

CREATE database lg;

show databases;

use lg;show tables;

desc svngapp_todo;

SELECT * FROM svngapp_todo;

 

 

 

 

 

 

8. CRUD 작업을 위한 url 설정

 

 

 

 

 

8.1) 작업의 종류 : 어떤 정보를 전달해서 어떤 정보를 받아올 것인지 결정

  • userid를 매개변수로 받아서 userid에 해당하는 정보를 전부 가져오기

결과는 userid에 해당하는 정보를 리턴

 

  • 데이터 삽입 작업(userid와 title만 받아서 처리)

결과는 userid에 해당하는 정보를 리턴

 

  • 데이터 수정 작업(userid와 id 그리고 done의 값만 받아서 처리)

결과는 userid에 해당하는 정보를 리턴

 

  • 데이터 삭제 작업(userid와 id만 받아서 처리)

결과는 userid에 해당하는 정보를 리턴

 

 

 

 

 

 

 

8.2) url 설정

  • 이전에는 작업을 구분하는 것을 URL 만으로 했는데 최근에는 URL 과 method(전송 방식)으로 구분하는 것을 권장
  • todo 라는 URL로 method를 구분해서 4개 작업을 처리

 

 

 

 

 

 

8.3) 장고에서 url 처리

  • urls.py 파일에 url과 처리할 views의 함수 또는 클래스를 연결

예전에는 함수를 권장했지만 최근에는 클래스를 권장

 

 

 

 

 

 

 

8.4) REST API

  • REST API는 요청한 디바이스나 화면에 상관없이 동일한 요청은 동일한 URL로 처리하도록 하자는 것으로 서버가 클라이언트의 요청에 응답할 때 서버에서 뷰를 생성하지 말고 데이터를 전송해서 클라이언트에서 랜더링하도록 하자는 것

 

 

 

 

 

8.5) 애플리케이션의 views.py 

class TodoView(View):

 

 

 

 

 

8.6) 프로젝트의 urls.py 파일에서 todo 요청은 views.py 파일의 TodoView 클래스가 처리하도록 설정

from django.contrib import admin
from django.urls import path
from svngapp import views

#todo 요청은 views의 todoview 클래스가 처리하도록 설정
urlpatterns = [
    path("admin/", admin.site.urls),
    path("todo", views.TodoView.as_view())
]

 

 

 

 

 

 

8.7) userid를 받아서 userid에 해당하는 모든 데이터를 조회하는 요청 처리

  • views.py 파일에 TodoView 클래스에 작성
from django.shortcuts import render

#응답하는 클래스
from django.views import View
# ToDo 모델
from .models import ToDo

# JSON 응답을 만들기 위한 import
from django.http import JsonResponse
from rest_framework import status

#클래스의 get,post,put,delete 메서드가 각 요청 방식을 처리
class TodoView(View):
    def get(self, request):
        #파라미터를 읽어오기
        #userid가 없으면 None
        userid = request.GET.get("userid", None)
        if userid != None:
            todos = ToDo.objectsfilter(userid = userid)
        else :
            todos = ToDo.objects.all()
        #JSON 응답 ans라는 키로 검색된 데이터를 list로 전달
        return JsonResponse({'ans':list(todos.values())},
                            status=status.HTTP_200_OK)

 

  • 서버를 재구동
  • GET 방식은 브라우저에서 테스트가 가능

localhost:800/todo

현재는 데이터가 없어서 {'"ans":[]}로 나옴.

실행결과

 

더미 데이터를 추가하여 확인

SELECT * FROM svngapp_todo;

INSERT into svngapp_todo(userid, title, done, regdate, moddate)
values('svng', "정보보안기사따기", true, now(), now());

INSERT into svngapp_todo(userid, title, done, regdate, moddate)
values('hwang', "자격증 준비하기", true, now(), now());

commit;

 

  • 브라우저에서 다시 확인

localhost:8000//todo

localhost:8000/todo?userid=svng

실행결과

인코딩 된 상태로, 출력됨을 알 수 있다.

 

 

 

 

 

 

 

8.8) userid와 title을 매개변수로 받아서 데이터를 삽입하는 요청을 처리

  • views.py 파일에 추가(TodoView 클래스에 삽입)
    #post 요청 처리
    def post(self, request):
        #파라미터 읽기
        params = json.loads(request.body)
        userid = request["userid"]
        title = request['title']

        #삽입할 객체를 생성
        todo = ToDo()
        todo.userid = userid
        todo.title = title
        todo.done = False
        todo.moddate = datetime.datetime.today()

        #데이터 삽입
        todo.save()

 

 

 

 

 

 

8.9) REST API 테스트 도구를 이용해서 테스트

 

설치 : postman

http://www.postman.com/downloads 에서 다운로드!

 

  • GET 테스트 : 아무런 문제가 되지 않음
  • POST 테스트

POST - http://127.0.0.1:8000/todo

파라미터

{

	"userid":"svng"

	"title" : "제목"

}

서버에서 처리하는 도중 403 에러 발생

 

 

 

 

 

 

8.10) CSRF

  • Cross Site Request Forgery : 웹 애플리케이션 취약점 중 하나로 인터넷 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(삽입, 삭제, 수정)를 특정 웹 사이트에 요청하게 만드는 공격
  • 하나의 애플리케이션이 서버와 클라이언트를 담당할 때는 아무런 문제가 되지 않음
  • 서버와 클라이언트가 다른 애플리케이션으로 만들어지는 경우 이 문제가 발생할 수 있음.
  • 이 경우 서버에서 설정을 해제해주어야 외부에서 삽입, 삭제, 갱신이 가능

 

  • Django 에서는 decorator로 이 문제를 해결
  • views.py 파일의 요청 처리 클래스 위에 설정을 추가
from django.views.decorators.csrf import csrf_exempt
from django.utils.decorators import method_decorator
@method_decorator(csrf_exempt, name='dispatch')
  • 데이터 삽입을 다시 테스트

 

 

 

 

 

8.11) 수정

 

  • views.py 의 클래스에 put 메서드를 작성 : 수정을 할 때는 id, userid, done 을 전송

수정을 할 때 수정할 데이터의 기본키값은 반드시 전송되어야 합니다.

ORM 에서는 수정 작업은 기본키를 이용해서 데이터를 조회한 후 그 데이터를 수정하고 save 하면 됩니다.

 

    def put(self, request):
        #클라이언트의 파라미터 읽기
        params = json.loads(request.body)
        id = params["id"]
        done = params["done"]
        userid = params["userid"]


        #서버에서의 처리
        #여기서 데이터베이스 작업 이외의 작업을 한다면 별도의 클래스를 만들어서 처리한 후
        # 리턴을 받아서 다음 작업을 수행
        #id에 해당하는 데이터를 찾아서 done의 값을 수정
        todo = ToDo.objects.get(id=id) #post와의 차이
        todo.done = done

        todo.save()


        #응답 만들기
        todos = ToDo.objects.filter(userid=userid)

        # JSON 응답 ans라는 키로 검색된 데이터를 list로 전달
        return JsonResponse({'ans': list(todos.values())},
                            status=status.HTTP_200_OK)

 

 

  • POSTMAN을 이용해서 테스트
{
    "id":4,
    "done":true,
    "userid":"svng"
}

id가 4인 데이터가 done의 값이 수정됨.

 

 

 

8.12) 데이터 삭제 구현

  • 삭제 구현도 수정과 동일 : 기본키를 이용해서 데이터를 찾은 후 delete 메서드를 호출하면 됩니다.
  • 기본키는 파라미터로 반드시 전송을 해야 합니다.
  • views.py 파일에 삭제 구현
    def delete(self, request):
        #파라미터 읽기
        params = json.loads(request.body)
        id = params["id"]
        userid = params["userid"]
        
        
        #데이터 가져오기
        todo = ToDo.objects.get(id = id)
        #데이터 삭제
        todo.delete()

        # 응답 만들기
        todos = ToDo.objects.filter(userid=userid)

        # JSON 응답 ans라는 키로 검색된 데이터를 list로 전달
        return JsonResponse({'ans': list(todos.values())},
                            status=status.HTTP_200_OK)

 

 

서버(Back End)

=>URL 과 전송방식에 해당하는 메서드 호출 방법
=>클라이언트가 전송한 파라미터를 어떻게 읽을 것인지
=>유효성 검사 - 일반 프로그래밍 언어 로직
=>데이터베이스의 CRUD
=>결과를 JSON으로 어떻게 전송하는지

=>CSRF 해결책
=>CORS 해결책

=>비밀번호를 암호화해서 저장하는 방법
=>JWT Token을 사용하는 방법

=>로깅하는방법
=>구독과 게시를 만드는 방법

=> 데이터 모델링, SQL 최적화
=> 네트워크, 보안
=> 트래픽 분석
=> Cloud 배
=>디자인 패턴, 아키텍쳐 패턴, 개발 방법론

 

 

 

9. 클라이언트 프로그램 만들기

 

 

 

 

 

9.0)react를 사용하기 위한 사전 준비

  • node.js 설치
  • yarn 설치 : npm install --location=global yarn

 

 

 

 

 

9.1) react 프로젝트 생성

 

yarn create react-app 앱이름(svngapp)

 

 

 

 

 

9.2) 프로젝트 시작

 

yarn start
  • 브라우저가 자동으로 실행되고 localhost:3000 으로 접속이 되면 리액트 로고가 출력

 

 

 

 

 

9.3) UI 작업을 편리하게 하기 위한 패키지를 설치

 

material-ui 패키지

  • npm install --save --legacy-peer-deps @material-ui/core
  • npm install --save --legacy-peer-deps @material-ui/icons

 

 

 

9.4) 메인 화면 만들기

 

  • 메인 화면으로 사용할 컴포넌트 생성 - 일반적인 확장자는 jsx(js를 사용할 수 있고 타입스크립트를 사용하면 tsx 도 가능) : src 디렉토리에 ToDo.jsx 생성
//react.js 파일에서 export한 객체를 React로 받아서 사용
//{이름} 의 경우는 export 한 객체에서 이름에 해당하는 것만 받아서 사용
import React from "react"

class ToDo extends React.Component{
    render(){
        return(
            <div className = "ToDo">
                <input type="checkbox" id="todo0"
                 name="todo0" value="todo0"/>
            <label for="todo0"> ToDo 컴포넌트 만들기</label>
            </div>
        )
    }
}

export default ToDo;

 

 

  • App.js 를 수정하여 ToDo 컴포넌트를 출력
import './App.css';
import React from 'react';
import ToDo from './ToDo';


function App() {
  return (
    <div className='App'>
      <ToDo/>
    </div>
  );
}

export default App;

 

 

  • 재실행 하고 메인 화면이 수정되었는지 확인

실행 결과..

뭐가 없긴 하지만 이게 잘 나온겁니다.. ㅎ

 

리액트를 왜하는가? -> CBD, SPA, 

(Component Based Development)
컴포넌트 기반 소프트웨어 공학, 컴포넌트 기반 개발은 기존의 시스템이나 소프트웨어를 구성하는 컴포넌트를 조립해서 하나의 새로운 응용 프로그램을 만드는 소프트웨어 개발방법론이다.
싱글 페이지 애플리케이션(SPA)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.

React 에서 사용하는 변수의 개념 :

  • State는 내부 (자신 컴포넌트)에서 생성하고 데이터를 변경할 수 있음(읽고 쓰기 가능)
  • Props는 외부(상위 컴포넌트)에서 상속 받는 데이터이며, 데이터를 변경할 수 없음(읽기 전용)

리액트는 원본 데이터를 수정하지 않음.

복사본을 만들어서 수정한 후 다시 대입하는 형태로 작업을 수행합니다.

 

데이터를 주고받는 것은 React 가 아니라 자바스크립트가 한다.

react는 화면 출력만 담음.

 

9.5) 메인화면에  출력할 내용을 수정

 

//react.js 파일에서 export한 객체를 React로 받아서 사용
//{이름} 의 경우는 export 한 객체에서 이름에 해당하는 것만 받아서 사용
import React from "react"

class ToDo extends React.Component{
    constructor(props){
        super(props); 
        //상위 컴포넌트로부터 넘겨받은 데이터를 나의 props에 저장
        //props는 읽기전용이라서, 수정할 경우 state에 복사하여 사용해야 함
        this.state = {item:props.item}
    }
    

    render(){

        return(
            <div className = "ToDo">
                <input type="checkbox"
                id={this.state.item.id}
                name={this.state.item.id}
                value={this.state.item.done}/>
            <label id={this.state.item.done}>{this.state.item.title}</label>
            </div>
        )
    }
}

export default ToDo;

 

  • Apps.js에서 샘플 데이터를 생성해서 ToDo.jsx를 이용해서 출력
import './App.css';
import React from 'react';
import ToDo from './ToDo';


class App extends React.Component {
  constructor(props){
    super(props);
    //하나의 객체를 생성해서 state에 item 이라는 이름으로 저장
    this.state = {item:{id:0, title:"Hello React", done:true}};
  }


  render(){
    return(
      <div className='App'>
        <ToDo item={this.state.item} />
      </div>
    )
  }
}

export default App;
반응형
LIST

'LG 헬로비전 DX DATA SCHOOL > Web Programming' 카테고리의 다른 글

React 애플리케이션 개발  (0) 2023.07.31
JavaScript 기초 3  (0) 2023.07.04
JavaScript 기초 2  (0) 2023.07.03
JavaScript 기초  (0) 2023.06.30
LG DX DATA SCHOOL 1기 xhtml  (0) 2023.06.29

관련글

티스토리툴바