74일차_React day01 & day02_vite

비구조할당

const dog = {
    name : '멍멍이',
    age : 2
}

console.log(dog.name, dog.age)
console.log(dog['name'], dog['age'])

// 비구조 할당
const {name, age} = dog
console.log(name, age)

console.log('-------------------------')

const data = {
    name2 : '홍길동',
    kor : 95,
    eng : 100,
    math : 85
}

console.log(data.name2, data.kor, data.eng, data.math)
console.log(data['name2'], data['kor'], data['eng'], data['math'])

// 비구조 할당
const {name2, kor, eng, math} = data;
console.log(name2, kor, eng, math)

 

 

Spread

console.log('spread - 배열')
const arr1 = ['강아지', '고양이', '토끼', '펭귄']
const arr2 = arr1.concat();
const arr3 = [...arr1] // 복제
const arr4 = arr1.concat('코끼리', '기린') // arr1 마지막에 () 원소 추가됨
const arr5 = [...arr1, '코끼리', '기린']
const arr6 = ['코끼리', ...arr1, '기린'] // 원하는 위치에 arr1 복제 가능

console.log('arr1 : ' + arr1)
console.log('arr2 : ' + arr2)
console.log('arr3 : ' + arr3)
console.log('arr4 : ' + arr4)
console.log('arr5 : ' + arr5)
console.log('arr6 : ' + arr6)

console.log('--------------------')
console.log('spread - 객체')

const dog1 = {
    name : '멍멍이',
    age : 2
}

const dog2 = {...dog1, name: '진돗개', age: 5}
console.log(dog2) // {name: '진돗개', age: 5}
// 배열에서는 배열을 복제되지만, 객체에서는 데이터가 수정된다.

 

 

1. React 생성

 

React 프로젝트 생성

• npx create-react-app {프로젝트명}

서버 시작

• npm start

포트번호

• 8080

 

 

 

2. vite 프로젝트 생성

vite 프로젝트 생성

• npm create vite@latest {프로젝트명}

서버 실행

1. cd day01_vite (폴더 이동)
2. npm install 
3. npm run dev (서버 시작 종료)

포트번호

• 5173

 

 

node_modules: 환경 파일 설정 

 

3. React 프로젝트 구조 및 실습 - day01

 

 

1. 프로젝트 구조

 

 

 

 

 

1. 프로젝트 시작 시, index.html 화면 출력

2. index.js 에서 id가 root인 태그에 App.js 파일에 있는 App 함수 반환값을 그려라

3. App.js 파일에 있는 App 함수 호출

 

 

 

 

 

 

 

 

 

js구역

jsx 구역

 

 

2. 실습

 

 

 

 

import React from 'react';

const Test02 = () => {
    // js 영역: 조건문, 제어문 등 사용 가능
    let title = '신상명세서';
    const name = '홍길동';
    const age = 25;
    const addr = '서울';

    const css1 = {
        color: 'red',
        background : 'yellow',
        fontsize : '30pt',
        padding : 20,
        margin : 10,
        border : '3px solid #000'
    };

    const css2 = {
        width : 400,
        color: '#fff',
        background : 'hotpink',
        fontsize : 20,
        padding : 15,
        margin : 30
    }

    return (
        <>
            <h2>JSX 영역 1</h2>
            <h3>{title}</h3>
            <ul>
                <li>이름: {name}</li>
                <li>나이: {age} 살 {age >= 19 ? '성인' : '청소년'}</li>
                <li style={{color: 'red'}}>주소: {addr}</li>
            </ul>  
            <hr />
            <h2>JSX 영역 2</h2>
            <h3 style={css1}>{title}</h3>
            <ul>
                <li style={css2}>이름: {name}</li>
                <li style={{
                    background : 'greenyellow',
                    padding : 15,
                    margin : 'auto'
                }}>나이: {age} 살 {age >= 19 ? '성인' : '청소년'}</li>
                <li style={{color: 'red'}}>주소: {addr}</li>
            </ul>  
        </>
    );
};

export default Test02;

 

 

 

 

 

 

 

 

 

 

Test04

데이터 전달

데이터 전송: 부모 -> 자식 만 가능

 

 

 

Test05

데이터 전달

 

 

 

4. day02_vite

 

 

1. 프로젝트 구조

1. 프로젝트 시작 시, index.html 화면 출력

2. main.jsx 에서 id가 root인 태그에 App.js 파일에 있는 App 함수 반환값을 그려라

3. App.js 파일에 있는 App 함수 호출

 

 

 

 

 

 

 

 

Test01 - button

리엑트는 순수 자바스크립트가 아니다 => 베이스가 자바스크립트일 뿐이다
함수 뒤에 ()를 붙여서 호출하면 새로고침 하자마자 무조건 실행된다.
    => 해결하려면 함수로 한먼 묶어준다.
    => 값을 넘길때는 함수 ex)  () => 함수(값)

 

 

 

Test02 - map()

 

 

Test03 - Hook

Hook은 React 16.8버전에 새로 추가되었습니다.
Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.

Hook의 개요

함수형 컴포넌트는 렌더링할때마다 내부의 것들을 기억하지 못한다.
다시 생성, 초기화 해야한다. (변수, 함수 등)

내부의 것들을 유지하기 위해서 hook이 등장했다 - useXXX

useState
값이 유동으로 변할 때
const [상태데이터, 상태데이터의 값을 변경해주는 함수] = React.useState(초기값);

 

크롬 확장 프로그램 : React Developer Tools

 

 

 

 

 

Test04 - True / False

 

 

 

Test05

 

+1 버튼 5번 클릭

-1 버튼 1번 클릭

 

 

Test06

import React, { useState } from 'react';
import '../css/Test06.css'

const Test06 = () => {
    const [list, setList] = useState([
        {seq: 1, name: '홍길동', age: '20', addr: '부산', done: true},
        {seq: 2, name: '마루', age: '4', addr: '서울', done: true},
        {seq: 3, name: '우리', age: '29', addr: '서울', done: false},
        {seq: 4, name: '임주스', age: '29', addr: '경기', done: true},
        {seq: 5, name: '미니언즈', age: '10', addr: '미국', done: false}
    ]);

    const arr = [10, 20, 30]
    return (
        <div>
            <table className='list'>
                <caption>신상명세서</caption>
                <colgroup>
                    <col className='seq'></col>
                    <col className='name'></col>
                    <col className='age'></col>
                    <col className='addr'></col>
                    <col className='done'></col>
                </colgroup>
                    <thead>
                        <tr>
                            <th>번호</th>
                            <th>이름</th>
                            <th>나이</th>
                            <th>주소</th>
                            <th>동의여부</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            list.map(item => 
                                <tr key={item.seq}>
                                    <td>{item.seq}</td>
                                    <td>{item.name}</td>
                                    <td>{item.age}</td>
                                    <td>{item.addr}</td>
                                    <td>{item.done ? '동의' : '비동의'}</td>
                                </tr>
                            )
                        }
                    </tbody>
            </table>
        </div>
    );
};

export default Test06;