1) 한글 처리

• 터미널에서 한글이 깨질 때: set LC_ALL=ko_KR.UTF-8 명령
• git status에서 한글이 깨질 때: git config --global --edit 명령 후 [core]에 quotepath = false 추가해주기

2) git reset

실수로 커밋된 걸 되돌리기

• git reset HEAD~1: HEAD는 현재 위치. 현재 위치에서 한 단계 전으로 내려가기 (커밋 자체가 사라져버림)

  뒤에 --soft, --mixed(기본), --hard 옵션을 붙여 어떤 단계로 돌아갈지 직접 설정 가능

2. git revert, git branch

• git revert: reset은 기록없이 전 단계로 돌아가지만 revert는 되돌아가되 commit 기록이 남음 (협업 시 사용)
• git branch: 같은 코드에 각자 서로 다른 작업을 할 수 있게 복사본을 만들고 나중에 하나로 합칠 수 있음. 브랜치 생성 후 git checkout으로 원하는 브랜치로 이동

3. git merge, git rebase

• git merge: master 브랜치와 다른 브랜치를 합치는 것. (같은줄의 내용을 동시에 수정했다면 충돌이 일어나기 때문에 그 부분을 하나로 합쳐주기)
• git rebase: merge로 병합시키면 commit된 줄기가 생기고, rebase는 필요없는 commit은 생략하여 하나의 줄기만 있기 때문에 깔끔하다는 장점이 있음

4. git cherry-pick과 기타 명령어

• git cherry-pick: 여러 commit을 선택적으로 가져오기
• git tag: 커밋을 참조하기 위해 아이디 대신 이름을 붙이는 것
• git stash: commit 하지 않고 하던 작업 임시저장 (다시 가져올 때 git stash apply)
• git fetch: pull처럼 원격저장소에서 파일을 가져오지만 병합은 안 되어있기 때문에 merge 해줘야 함

5. git flow 전략

⭐TIP initial commit 하나 만들고 바로 여러 기능들의 branch들을 만들어 commit이 쌓이면 하나로 합쳐주기 (이때 충돌이 나면 거기서 해결해주기) 올바른 commit이 되었을 때 master로 옮기기

branch는 충돌이 많이 나기 때문에 전략을 잘 짜기!

1) 버전 관리

코딩하고 있을 때 중간에 꺼져서 날아가거나, 배포 후 버전을 되돌리고 싶을 때 한 파일로 버전을 관리할 수 있음

2) ⭐협업

예를 들어 팀원이 두 명 이상일 때 보고서 작성 시 한 파일을 동시에 수정하는 일이 발생할 수 있으므로 효율적으로 합쳐서 관리

2. git status, git add

터미널에 git init 명령어를 사용하여 git에서 관리하게 끔 만들어주기 (.git 폴더 생성)

• git status: 상태 확인
• git add: git에서 모든 파일을 관리 할 필요는 없기 때문에 git add 파일 설정 후 다시 git status 명령 시 관리하는 파일을 확인할 수 있음 (모든 파일 관리는 git add .)

3. git commit

• git commit: 어떤 상태인지 기억해달라고 메시지를 남기는 것.
  • git commit 명령 후 메시지 남긴 후 (ex. Initial commit...) :wq 입력** (w: write, q: quit)**
  • 메시지가 짧다면 git commit -m "Initial commit"
• git log: 커밋 목록 보기
• git checkout: 수정한 파일을 다시 되돌리고 싶을 때 사용
• git commit -am "커밋 메시지": a는 all(add .), m은 commit message 모든 파일을 한꺼번에 올림 👉 단, 한 번도 add되지 않은 파일은 add로 먼저 올려주기

❗ 오류가 난다면 git config --global user.email "이메일 주소", git config --global user.name "이름" 설정 후 커밋 작성

4. GitHub과 git remote

github 가입 후 new repository 생성

• git remote add origin https://github.com/ji-silver/파일이름 : origin으로 주소 등록하여 원격 저장소 관리

5. git push, git pull

• git push origin (master) *main**: 원격 저장소에 업로드. origin은 원격 저장소 이름, master는 컴퓨터 브랜치 이름
• git pull origin (master) main: 나 이외에 다른 사람이 같은 파일의 코드를 변경 시 변경 내용을 컴퓨터로 가져옴

🔥🔥🔥 *10월 1일부터 기본 브랜치 이름이 'master' 에서 'main' 으로 변경되었음!! git branch -M main으로 master 브랜치를 main으로 바꿔준 후 remote 저장소에 push하기

전역적으로 데이터가 사용되야 할 때 (TicTacToe-> Table-> Tr-> Td) 사용

2. createContext와 Provider

• createContext() 함수를 사용하여 Context 만들기
• Context API의 데이터에 접근해야 하는 컴포넌트를 Provider로 묶어주기
• 전달할 데이터는 value={} 안에 넣어주기

MineSearch.jsx

import React, { useReducer, createContext, useMemo } from 'react';

export const TableContext = createContext({
  // 초깃값 설정
});

const MineSearch = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    const value = useMemo(() => ({ tableData: state.tableData, dispatch }), [state.tableData]); // tableDate값이 바뀔 때 갱신

    return (
        <TableContext.Provider value={value}>
            <Form />
            <div>{state.timer}</div>
            <Table />
            <div>{state.result}</div>
        </TableContext.Provider>
    );
};

❗ Context API는 성능 최적화하기 힘들기 때문에 useMemo()로 객체값을 기억하게 하여 캐싱 작업하기

3. useContext 사용해 지뢰 칸 렌더링

1) 배열에 지뢰 심기

MineSearch.jsx

export const CODE = {
    MINE: -7, // 지뢰
    NORMAL: -1, // 일반 칸
    QUESTION: -2, // 물음표
    FLAG :-3, // 깃발
    QUESTION_MINE: -4, // 물음표 칸이 지뢰인 경우
    FLAG_MINE: -5, // 깃발 칸이 지뢰인 경우
    CLICKED_MINE: -6, // 지뢰 클릭
    OPENED: 0, // 칸 열었을 때 (0이상이면 다 opened)
};

...

const plantMine = (row, cell, mine) => {
    console.log(row, cell, mine);
    const candidate = Array(row * cell).fill().map((arr, i) => { //0 ~ 99까지
        return i;
    });
    const shuffle = [];
    while(candidate.length > row * cell - mine) {
        const chosen = candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0];
        shuffle.push(chosen); // 랜덤으로 뽑은 20개 숫자들을 shuffle 배열에 넣기
    }
    //2차원 배열 만들기
    const data = [];
    for (let i = 0; i < row; i++) {
        const rowData = [];
        data.push(rowData);
        for (let j = 0; j < cell; j++) {
            rowData.push(CODE.NORMAL); // 일반칸을 기본으로 설정
        }
    }
    //2차원 배열에 지뢰 심기
    for (let k = 0; k < shuffle.length; k++) {
        const ver = Math.floor(shuffle[k] / cell);
        const hor = shuffle[k] % cell;
        data[ver][hor] = CODE.MINE; // 지뢰 심기
    }
    console.log(data);
    return data;
};

export const START_GAME = 'START_GAME';

const reducer = (state, action) => {
    switch (action.type) {
        case START_GAME: 
        return {
            ...state,
            tableData: plantMine(action.row, action.cell, action.mine) // tableData에 지뢰가 심어짐
        };
        default:
            return state;
    }
};

2) 화면에 나타내기

Table.jsx

import React, { useContext } from 'react';
import Tr from './Tr';
import { TableContext } from './MineSearch';

const Table = () => {
    const { tableData } = useContext(TableContext);
    return (
        <table>
            {Array(tableData.length).fill().map((tr, i) => <Tr rowIndex={i} />)}
        </table>
    )
};

export default Table;

Tr.jsx

import React, { useContext } from 'react';
import Td from './Td';
import { TableContext } from './MineSearch';

const Tr = ({ rowIndex }) => {
    const { tableData } = useContext(TableContext);
    return (
        <tr>
            {tableData[0] && Array(tableData[0].length).fill().map((td, i) =>
                <Td rowIndex={rowIndex} cellIndex={i} />
            )}
        </tr>
    )
};

export default Tr;

Td.jsx

import React, { useContext } from 'react';
import { CODE, TableContext } from './MineSearch';

const getTdStyle = (code) => {
    switch (code) {
        case CODE.NORMAL:
        case CODE.MINE:
            return {
                background: '#444',
            };
        case CODE.OPENED:
            return {
                background: 'white'
            };
        default:
            return {
                background: 'white'
            };
    }
};

const getTdText = (code) => {
    switch (code) {
        case CODE.NORMAL:
            return '';
        case CODE.MINE:
            return 'X';
        default:
            return code || '';
    }
};

const Td = ({ rowIndex, cellIndex }) => {
    const { tableData } = useContext(TableContext);
    return (
        <td
            style={getTdStyle(tableData[rowIndex][cellIndex])}
        >{getTdText(tableData[rowIndex][cellIndex])}</td>
    )
};

export default Td;

4. 왼쪽 오른쪽 클릭 로직 작성하기

Td.jsx

const Td = ({ rowIndex, cellIndex }) => {
    const { tableData, dispatch, halted } = useContext(TableContext);

    const onClickTd = useCallback(() => {
        if (halted) {
            return; // 게임이 멈추면 클릭x
        }
        switch (tableData[rowIndex][cellIndex]) {
            //이미 연 칸, 깃발, ?칸은 그냥 return
            case CODE.OPENED:
            case CODE.FLAG_MINE:
            case CODE.FLAG:
            case CODE.QUESTION_MINE:
            case CODE.QUESTION:
                return;
            case CODE.NORMAL:
                dispatch({ type: OPEN_CELL, row: rowIndex, cell: cellIndex });
                return;
            case CODE.MINE:
                dispatch({ type: CLICK_MINE, row: rowIndex, cell: cellIndex });
                return;
            default:
                return;
        }
    }, [tableData[rowIndex][cellIndex], halted]);

    const onRightClickTd = useCallback((e) => {
        e.preventDefault(); // 우클릭 시 나오는 메뉴 안 뜨게 하기
        if (halted) {
            return;
        }
        switch (tableData[rowIndex][cellIndex]) {
            case CODE.NORMAL:
            case CODE.MINE:
                dispatch({ type: FLAG_CELL, row: rowIndex, cell: cellIndex });
                return;
            case CODE.FLAG_MINE:
            case CODE.FLAG:
                dispatch({ type: QUESTION_CELL, row: rowIndex, cell: cellIndex });
                return;
            case CODE.QUESTION_MINE:
            case CODE.QUESTION:
                dispatch({ type: NORMALIZE_CELL, row: rowIndex, cell: cellIndex });
                return;
            default:
                return;
        }
    }, [tableData[rowIndex][cellIndex], halted]);

    return (
        <td
            style={getTdStyle(tableData[rowIndex][cellIndex])}
            onClick={onClickTd}
            onContextMenu={onRightClickTd} // 우클릭 이벤트
        >{getTdText(tableData[rowIndex][cellIndex])}</td>
    )
};

MineSearch.jsx

export const TableContext = createContext({ // 초깃값 설정
    tableData: [],
    halted: true, // 게임 중단 코드
    dispatch: () => { },
});

const initialState = {
    tableData: [],
    timer: 0,
    result: '',
    halted: false,
};

...

export const START_GAME = 'START_GAME';
export const OPEN_CELL = 'OPEN_CELL';
export const CLICK_MINE = 'CLICK_MINE';
export const FLAG_CELL = 'FLAG_CELL';
export const QUESTION_CELL = 'QUESTION_CELL';
export const NORMALIZE_CELL = 'NORMALIZE_CELL';

const reducer = (state, action) => {
    switch (action.type) {
        case START_GAME:
            return {
                ...state,
                tableData: plantMine(action.row, action.cell, action.mine),
                halted: false,
            };
        case OPEN_CELL: {
            const tableData = [...state.tableData];
            tableData[action.row] = [...state.tableData[action.row]];
            tableData[action.row][action.cell] = CODE.OPENED; // 클릭한 칸을 OPENED으로 바꾸기
            return {
                ...state,
                tableData,
            };
        }
        case CLICK_MINE: {
            const tableData = [...state.tableData];
            tableData[action.row] = [...state.tableData[action.row]];
            tableData[action.row][action.cell] = CODE.CLICKED_MINE;
            return {
                ...state,
                tableData,
                halted: true,
            };
        }
        case FLAG_CELL:
            const tableData = [...state.tableData];
            tableData[action.row] = [...state.tableData[action.row]];
            if (tableData[action.row][action.cell] === CODE.MINE) {
                tableData[action.row][action.cell] = CODE.FLAG_MINE;
            } else {
                tableData[action.row][action.cell] = CODE.FLAG;
            }
            return {
                ...state,
                tableData,
            };
        case QUESTION_CELL: {
            const tableData = [...state.tableData];
            tableData[action.row] = [...state.tableData[action.row]];
            if (tableData[action.row][action.cell] === CODE.FLAG_MINE) {
                tableData[action.row][action.cell] = CODE.QUESTION_MINE;
            } else {
                tableData[action.row][action.cell] = CODE.QUESTION;
            }
            return {
                ...state,
                tableData,
            };
        }
        case NORMALIZE_CELL: {
            const tableData = [...state.tableData];
            tableData[action.row] = [...state.tableData[action.row]];
            if (tableData[action.row][action.cell] === CODE.FLAG_MINE) {
                tableData[action.row][action.cell] = CODE.MINE;
            } else {
                tableData[action.row][action.cell] = CODE.NORMAL;
            }
            return {
                ...state,
                tableData,
            };
        }
        default:
            return state;
    }
};

5. 지뢰 개수 표시하기

MineSearch.jsx

const reducer = (state, action) => {
    switch (action.type) {
        case OPEN_CELL: {
            const tableData = [...state.tableData];
            tableData[action.row] = [...state.tableData[action.row]];
            let around = [];
            if (tableData[action.row - 1]) { // 클릭한 칸 기준으로 윗줄이 있으면
                around = around.concat(
                    tableData[action.row - 1][action.cell - 1],
                    tableData[action.row - 1][action.cell],
                    tableData[action.row - 1][action.cell + 1]
                );
            }
            around = around.concat(
                tableData[action.row][action.cell - 1],
                tableData[action.row][action.cell + 1]
            );
            if (tableData[action.row + 1]) { // 클릭한 칸 기준으로 밑에줄이 있으면
                around = around.concat(
                    tableData[action.row + 1][action.cell - 1],
                    tableData[action.row + 1][action.cell],
                    tableData[action.row + 1][action.cell + 1]
                );
            }
            // 주변 지뢰 갯수 찾기
            const count = around.filter((v) => [CODE.MINE, CODE.FLAG_MINE, CODE.QUESTION_MINE].includes(v)).length;
            console.log(around, count);
            tableData[action.row][action.cell] = count;
            return {
                ...state,
                tableData,
            };
        }
    }
};

6. 빈 칸들 한 번에 열기

MineSearch.jsx

case OPEN_CELL: {
    const tableData = [...state.tableData];
    // tableData[action.row] = [...state.tableData[action.row]];
    tableData.forEach((row, i) => { // 클릭한 칸 뿐 아니라 모든 칸을 새로운 객체로 만들기
        tableData[i] = [...state.tableData[i]];
    });
    const checked = [];
    const checkAround = (row, cell) => {
        // 닫힌 칸이 아니면 리턴
        if ([CODE.OPENED, CODE.FLAG_MINE, CODE.FLAG, CODE.QUESTION_MINE, CODE.QUESTION].includes(tableData[row][cell])) {
            return;
        }
        // 상하좌우 없는 칸은 안 열기
        if (row < 0 || row >= tableData.length || cell < 0 || cell >= tableData[0].length) {
            return;
        }
        // 옆에칸 서로 검사하는 거 막아주기
        if (checked.includes(row + ',' + cell)) { // 이미 검사한 칸이면 
            return;
        } else { // 아니면 checked 배열에 넣어주기 
            checked.push(row + ',' + cell);
        }
        let around = [];
        if (tableData[row - 1]) {
            around = around.concat(
                tableData[row - 1][cell - 1],
                tableData[row - 1][cell],
                tableData[row - 1][cell + 1]
            );
        }
        around = around.concat(
            tableData[row][cell - 1],
            tableData[row][cell + 1]
        );
        if (tableData[row + 1]) {
            around = around.concat(
                tableData[row + 1][cell - 1],
                tableData[row + 1][cell],
                tableData[row + 1][cell + 1]
            );
        }
        const count = around.filter((v) => [CODE.MINE, CODE.FLAG_MINE, CODE.QUESTION_MINE].includes(v)).length;
        tableData[row][cell] = count;

        // 지뢰가 없으면 주변 8칸 열기
        if (count === 0) {
            const near = [];
            if (row - 1 > -1) {
                near.push([row - 1, cell - 1]);
                near.push([row - 1, cell]);
                near.push([row - 1, cell + 1]);
            }
            near.push([row, cell - 1]);
            near.push([row, cell + 1]);
            if (row + 1 < tableData.length) {
                near.push([row + 1, cell - 1]);
                near.push([row + 1, cell]);
                near.push([row + 1, cell + 1]);
            }
            near.forEach((n) => {
                if (tableData[n[0]][n[1]] !== CODE.OPENE) {
                    checkAround(n[0], n[1]);
                }
            })
        }
    };
    checkAround(action.row, action.cell);
    return {
        ...state,
        tableData,
    };
}

7. 승리 조건 체크와 타이머

승리조건: 클릭한 칸이 가로 * 세로 - 지뢰개수 한 값과 같으면 승리

1) 승리조건 체크

const initialState = {
    tableData: [],
    date: {
        row: 0,
        cell: 0,
        mine: 0,
    },
    result: '',
    halted: true,
    openedCount: 0,
};

const reducer = (state, action) => {
    switch (action.type) {
        case START_GAME:
            return {
                ...state,
                data: { // 게임 시작 시 data 기록해두기
                    row: action.row,
                    cell: action.cell,
                    mine: action.mine,
                },
                openedCount: 0,
                tableData: plantMine(action.row, action.cell, action.mine),
                halted: false,
                timer: 0,
            };
        case OPEN_CELL: {
            let openedCount = 0;
            const checkAround = (row, cell) => {
                openedCount += 1; // 칸을 열 때마다 1씩 올려주기
              ...
            };
        ...
        }; 
        checkAround(action.row, action.cell);
            let halted = false;
            let result = '';
            console.log(state.data.row * state.data.cell - state.data.mine, state.openedCount, openedCount);
            if (state.data.row * state.data.cell - state.data.mine === state.openedCount + openedCount) { // 승리
                halted = true; // 승리 시 게임 멈추기
                result = '승리하셨습니다!';
            }
            return {
                ...
                halted,
                result
            };
        }      

2) 타이머

const initialState = {
    ...
    timer: 0,
};

export const INCREMENT_TIMER = 'INCREMENT_TIMER';

const MineSearch = () => {
    useEffect(() => {
        let timer;
        if (halted === false) { // 게임 시작 시 타이머 실행
            timer = setInterval(() => {
                dispatch({ type: INCREMENT_TIMER });
            }, 1000);
        }
        return () => {
            clearInterval(timer);
        }
    }, [halted]);
};

마지막으로 useMemo 사용하여 최적화 하기

state가 많아지면 관리가 힘들어지기 때문에 useReducer를 사용하여 하나의 state, setState 로 통일할 수 있음

const [state, dispatch] = useReducer(reducer, initialState);

2. reducer, action, dispatch의 관계

• reducer: state와 action객체를 파라미터로 받아와 새로운 상태로 반환해주는 함수
• action: 업데이트를 위한 정보를 가지고 있음. 이름은 대문자로 보통 사용
• dispatch: 액션을 실행시키는 함수

TicTacToe.jsx

import React, { useState, useReducer, useCallback } from 'react';
import Table from './Table';

const initialState = { // state들 여기에 묶어주기
    winner: '',
    turn: 'O',
    tableData: [['', '', ''], ['', '', ''], ['', '', '']],
};

const SET_WINNER = 'SET_WINNER';

const reducer = (state, action) => { // action을 해석 후 state를 바꿔주는 역할
    switch (action.type) {
        case 'SET_WINNER':
            return { // return으로 새로운 상태 반환
                ...state, // 기존 state를 직접 바꾸지 않고 얕은 복사 후 바뀌는 부분만 넣기
                winner: action.winner,
            }
    };
};

const TicTacToe = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const onClickTable = useCallback( // 컴포넌트에 들어가는 이벤트 함수는 useCallback 써주기 (함수 재사용)
        () => {
            dispatch({ type: SET_WINNER, winner: 'O' }); // dispatch안에 들어가는 객체를 action이라고 함
        }, []);

    return (
        <>
            <Table onClick={onClickTable} tableData={state.tableData} />
            {state.winner && <div>{state.winner}님의 승리!</div>}
        </>
    );
};

export default TicTacToe;

3. action 만들어 dispatch 하기

클릭한 곳이 몇 번째 줄, 몇 번째 칸인지 알아내고 클릭할 때마다 턴 바꾸기

TicTacToe.jsx

import React, { useState, useReducer, useCallback } from 'react';
import Table from './Table';

const initialState = {...};

export const SET_WINNER = 'SET_WINNER';
export const CLICK_CELL = 'CLICK_CELL';
export const CHANGE_TURN = 'CHANGE_TURN';

const reducer = (state, action) => {
    switch (action.type) {
        case SET_WINNER:
            return {...};

        case CLICK_CELL: {
            const tableData = [...state.tableData];
            tableData[action.row] = [...tableData[action.row]];
            tableData[action.row][action.cell] = state.turn;
            return {
                ...state,
                tableData,
            };
        }
        case CHANGE_TURN: {
            return {
                ...state,
                turn: state.turn === 'O' ? 'X' : 'O',
                  // 기존 턴이 'O'면 'X'로 'X'면 'O'로
            };
        }
    }
};

const TicTacToe = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const onClickTable = useCallback(
        () => {
            dispatch({ type: SET_WINNER, winner: 'O' });
        }, []);

    return (
        <>
            <Table onClick={onClickTable} tableData={state.tableData} dispatch={dispatch} />
            {state.winner && <div>{state.winner}님의 승리!</div>}
        </>
    );
};

export default TicTacToe;

Table.jsx

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

const Table = ({ onClick, tableData, dispatch }) => {
    return (
        <table>
            {Array(tableData.length).fill().map((tr, i) => (<Tr dispatch={dispatch} rowIndex={i} rowData={tableData[i]} />))}
        </table>
    );
};

export default Table;

Tr.jsx

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

const Tr = ({ rowData, rowIndex, dispatch }) => {
    return (
        <tr>
            {Array(rowData.length).fill().map((td, i) => (
                <Td dispatch={dispatch} rowIndex={rowIndex} cellIndex={i} cellData={rowData[i]}>{''}</Td>
            ))}
        </tr>
    );
};

export default Tr;

Td.jsx

import React, { useCallback } from 'react';
import { CLICK_CELL, CHANGE_TURN } from './TicTacToe';

const Td = ({ rowIndex, cellIndex, dispatch, cellData }) => {
    const onClickTd = useCallback(() => {
        console.log(rowIndex, cellIndex);
        dispatch({ type: CLICK_CELL, row: rowIndex, cell: cellIndex }); // 칸 클릭 후
        dispatch({ type: CHANGE_TURN }); // 턴 바꾸기
    }, []);

    return (
        <td onClick={onClickTd}>{cellData}</td>
    );
};

export default Td;

4. 틱택토 구현하기

한 번 눌렀던 칸은 못 누르게 하고, 승자 & 무승부 가리기

Td.jsx

import React, { useCallback } from 'react';
import { CLICK_CELL } from './TicTacToe';

const Td = ({ rowIndex, cellIndex, dispatch, cellData }) => {
    const onClickTd = useCallback(() => {
        console.log(rowIndex, cellIndex);
        if (cellData) { // 기존 데이터가 있으면 리턴
            return;
        }
        dispatch({ type: CLICK_CELL, row: rowIndex, cell: cellIndex });
    }, [cellData]);

    return (
        <td onClick={onClickTd}>{cellData}</td>
    );
};

export default Td;

TicTacToe.jsx

import React, { useEffect, useReducer, useCallback } from 'react';
import Table from './Table';

const initialState = {
    winner: '',
    turn: 'O',
    tableData: [
        ['', '', ''],
        ['', '', ''],
        ['', '', ''],
    ],
    recentCell: [-1, -1], // 없는 칸 임의로 설정
};

export const SET_WINNER = 'SET_WINNER';
export const CLICK_CELL = 'CLICK_CELL';
export const CHANGE_TURN = 'CHANGE_TURN';
export const RESET_GAME = 'RESET_GAME';

const reducer = (state, action) => {
    switch (action.type) {
        case SET_WINNER:
            return {
                ...state,
                winner: action.winner,
            };
        case CLICK_CELL: {
            const tableData = [...state.tableData];
            tableData[action.row] = [...tableData[action.row]];
            tableData[action.row][action.cell] = state.turn;
            return {
                ...state,
                tableData,
                recentCell: [action.row, action.cell], // 최근 클릭한 칸 기억해두기
            };
        }
        case CHANGE_TURN: {
            return {
                ...state,
                turn: state.turn === 'O' ? 'X' : 'O',
            };
        }
        case RESET_GAME: {
            return {
                ...state,
                turn: 'O',
                tableData: [
                    ['', '', ''],
                    ['', '', ''],
                    ['', '', ''],
                ],
                recentCell: [-1, -1],
            };
        }
        default:
            return state;
    }
};

const TicTacToe = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const { tableData, turn, winner, recentCell } = state;

    const onClickTable = useCallback(
        () => {
            dispatch({ type: SET_WINNER, winner: 'O' });
        }, []);

    useEffect(() => {
        const [row, cell] = recentCell;
        if (row < 0) { // useEffect는 첫 랜더링때도 실행되기 때문에 걸러주기
            return;
        }
        let win = false;
        if (tableData[row][0] === turn && tableData[row][1] === turn && tableData[row][2] === turn) { // 가로 검사
            win = true;
        }
        if (tableData[0][cell] === turn && tableData[1][cell] === turn && tableData[2][cell] === turn) { // 세로 검사
            win = true;
        }
        if (tableData[0][0] === turn && tableData[1][1] === turn && tableData[2][2] === turn) { // 왼쪽 대각선 검사
            win = true;
        }
        if (tableData[0][2] === turn && tableData[1][1] === turn && tableData[2][0] === turn) { // 오른쪽 대각선
            win = true;
        }
        console.log(win, row, cell, tableData, turn);
        if (win) { // 승리시
            dispatch({ type: SET_WINNER, winner: turn });
            dispatch({ type: RESET_GAME });
        } else {
            let all = true; // 무승부
            tableData.forEach((row) => {  //무승부 검사
                row.forEach((cell) => {
                    if (!cell) {
                        all = false;
                    }
                });
            });
            if (all) {
                dispatch({ type: RESET_GAME });
            } else {
                dispatch({ type: CHANGE_TURN });
            }
        }
    }, [recentCell]);

    return (
        <>
            <Table onClick={onClickTable} tableData={tableData} dispatch={dispatch} />
            {winner && <div>{winner}님의 승리</div>}
        </>
    )
};

export default TicTacToe;

❗ useReducer에선 state가 비동기적이기 때문에 useEffect 사용

5. 테이블 최적화하기

React.memo(), useMemo() 사용하여 최적화하기

Td.jsx

import React, { useCallback, memo } from 'react';
import { CLICK_CELL } from './TicTacToe';

const Td = memo(({ rowIndex, cellIndex, dispatch, cellData }) => {
    const onClickTd = useCallback(() => {
        console.log(rowIndex, cellIndex);
        if (cellData) {
            return;
        }
        dispatch({ type: CLICK_CELL, row: rowIndex, cell: cellIndex });
    }, [cellData]);

    return (
        <td onClick={onClickTd}>{cellData}</td>
    );
});

export default Td;

Tr.jsx

import React, { memo, useMemo } from 'react';
import Td from './Td';

const Tr = memo(({ rowData, rowIndex, dispatch }) => {
    return (
        <tr>
            {Array(rowData.length).fill().map((td, i) => (
                useMemo(() => <Td key={i} dispatch={dispatch} rowIndex={rowIndex} cellIndex={i} cellData={rowData[i]}>{''}</Td>,
                [rowData[i]])
            ))}
        </tr>
    );
});

export default Tr;

Table.jsx

import React, { useMemo } from 'react';
import Tr from './Tr';

const Table = ({ onClick, tableData, dispatch }) => {
    return (
        <table>
            {Array(tableData.length).fill().map((tr, i) => (
                useMemo(
                    () => <Tr key={i} dispatch={dispatch} rowIndex={i} rowData={tableData[i]} />,
                    [tableData[i]]
                )
            ))}
        </table>
    );
};

export default Table;

Lotto.jsx

import React, { Component } from 'react'
import Ball from './Ball'; 

function getWinNumbers() {
    console.log('getWinNumbers');
    const candidate = Array(45).fill().map((v, i) => i + 1); // 45개의 숫자를 candidate 배열에 넣기
    const shuffle = [];
    while (candidate.length > 0) {
        shuffle.push(candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]); //배열에서 랜덤으로 숫자를 뽑아 셔플배열에 넣기
    }
    const bonusNumber = shuffle[shuffle.length - 1]; // 섞여진 숫자중에 마지막 숫자를 보너스로 뽑기
    const winNumbers = shuffle.slice(0, 6).sort((p, c) => p - c); // 셔플 정렬
    return [...winNumbers, bonusNumber];
};

class Lotto extends Component {
    state = {
        winNumbers: getWinNumbers(), // 당첨 숫자들
        winBalls: [],
        bonus: null, // 보너스 공
        redo: false, //재실행
    };

    render() {
        const { winBalls, bonus, redo } = this.state;
        return (
            <>
                <div>당첨 숫자</div>
                <div id="결과창">
                    {winBalls.map((v) => <Ball key={v} number={v} />)}
                </div>
                <div>보너스!</div>
                {bonus && <Ball number={bonus} />}
                {redo && <button onClick={this.onClickRedo}>한 번 더!</button>}
            </>
        )
    }
}

export default Lotto;

Ball.jsx

import React, { memo } from 'react'

const Ball = memo(({number}) =>  {
    let background;
    if(number <= 10) {
        background = 'red';
    } else if (number <= 20) {
        background = 'orange';
    } else if (number <= 30) {
        background = 'yellow';
    } else if (number <= 40) {
        background = 'blue';
    } else {
        background = 'green';
    }
    return (
        <div className="ball" style={{ background }}>{number}</div>
    );
});

export default Ball;

2. setTimeout 여러 번 사용하기

• for문에 let 사용 시 클로저 문제 발생 x
• setTimemout() 사용 시 끝나고 항상 clear 해줘야 함 (메모리 누수 문제 발생)

  ...
  timeouts = [];
  

componentDidMount() { const { winNumbers } = this.state; for (let i = 0; i < winNumbers.length - 1; i++) { // 보너스 공 때문에 1 빼줌 this.timeouts[i] = setTimeout(() => { this.setState((prevState) => { return { winBalls: [...prevState.winBalls, winNumbers[i]], }; }); }, (i + 1) * 1000); // 순서대로 1초, 2초, 3초 ... } this.timeouts[6] = setTimeout(() => { this.setState({ bonus: winNumbers[6], // 마지막공이 보너스 공 redo: true, }); }, 7000); }

componentWillUnmount() { this.timeouts.forEach((v) => { clearTimeout(v); }); }

## 3. componentDidUpdate
`componentDidUpdate()`를 이용하여 버튼 클릭 시 재실행하게 하기
```jsx
...
runTimeouts = () => {
    const { winNumbers } = this.state;
    for (let i = 0; i < winNumbers.length - 1; i++) {
        this.timeouts[i] = setTimeout(() => {
            this.setState((prevState) => {
                return {
                    winBalls: [...prevState.winBalls, winNumbers[i]],
                };
            });
        }, (i + 1) * 1000);
    }
    this.timeouts[6] = setTimeout(() => {
        this.setState({
            bonus: winNumbers[6],
            redo: true,
        });
    }, 7000);
};

componentDidMount() {
    this.runTimeouts();
}

componentDidUpdate(prevProps, prevState) { // 전 props, 전 state값이 바뀔 때 실행
    if (this.state.winBalls.length === 0) { // redo 클릭 시 winBalls는 빈 배열
        this.runTimeouts();
    }
}

onClickRedo = () => {
    this.setState({
        winNumbers: getWinNumbers(),
        winBalls: [],
        bonus: null,
        redo: false,
    });
    this.timeouts = [];
};

4. useEffect로 업데이트 감지하기

Class를 Hooks로 바꾸기

import React, { useState, useRef, useEffect } from 'react'
import Ball from './Ball';

function getWinNumbers() {
    console.log('getWinNumbers');
    const candidate = Array(45).fill().map((v, i) => i + 1); // 45개의 숫자를 candidate 배열에 넣기
    const shuffle = [];
    while (candidate.length > 0) {
        shuffle.push(candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]); //배열에서 랜덤으로 숫자를 뽑아 셔플배열에 넣기
    }
    const bonusNumber = shuffle[shuffle.length - 1]; // 섞여진 숫자중에 마지막 숫자를 보너스로 뽑기
    const winNumbers = shuffle.slice(0, 6).sort((p, c) => p - c); // 셔플 정렬
    return [...winNumbers, bonusNumber];
};

const Lotto = () => {
    const [winNumbers, setWinNumbers] = useState(getWinNumbers());
    const [winBalls, setWinBalls] = useState([]);
    const [bonus, setBonus] = useState(null);
    const [redo, setRedo] = useState(false);
    const timeouts = useRef([]);

    useEffect(() => {
        console.log('useEffect');
        for (let i = 0; i < winNumbers.length - 1; i++) {
            timeouts.current[i] = setTimeout(() => {
                setWinBalls((prevBalls) => [...prevBalls, winNumbers[i]]);
            }, (i + 1) * 1000);
        }
        timeouts.current[6] = setTimeout(() => {
            setBonus(winNumbers[6]);
            setRedo(true);
        }, 7000);
        return () => { // componentWillUnMount는 return
            timeouts.current.forEach((v) => {
                clearTimeout(v);
            });
        };
    }, [timeouts.current]); // 빈 배열이면 componentDidMount와 동일
    //배열에 요소가 있으면 componentDidMount랑 componentDidUpdate 둘 다 수행

    const onClickRedo = () => {
        setWinNumbers(getWinNumbers());
        setWinBalls([]);
        setBonus(null);
        setRedo(false);
        timeouts.current = [];
    };

    return (
        <>
            <div>당첨 숫자</div>
            <div id="결과창">
                {winBalls.map((v) => <Ball key={v} number={v} />)}
            </div>
            <div>보너스!</div>
            {bonus && <Ball number={bonus} />}
            {redo && <button onClick={onClickRedo}>한 번 더!</button>}
        </>
    );
}

export default Lotto;

• timeouts.current[i] = ... 는 current 배열에 요소를 넣어준거라 바뀌지 않고, timeouts.current = [] 는 current에 직접 넣어 값이 바뀜

  5. useMemo와 useCallback

  1) useMemo

• 복잡한 함수 결과값을 기억하는 함수
• state값이 바뀔 때마다 랜더링 되면서 호출되기 때문에 결과값을 기억한 후 재사용가능

  const Lotto = () => {
    const lottoNumbers = useMemo(() => getWinNumbers(), []);
    const [winNumbers, setWinNumbers] = useState(lottoNumbers);
    ...

  2) useCallback

• useMemo는 결과값을 재사용 할 때 사용하지만, useCallback은 함수 자체를 기억해둬서 재실행되도 새로 생성되지 않고 재사용
• 단, useCallback안에서 state 사용 시 배열 안에 넣어줘야 함. 배열 안에 값이 바뀌면 새로 실행
• 자식 컴포넌트에게 props로 함수를 넘길 때 꼭 사용

const onClickRedo = useCallback(() => {
    setWinNumbers(getWinNumbers());
    setWinBalls([]);
    setBonus(null);
    setRedo(false);
    timeouts.current = [];
}, [winNumbers]);

Hooks에 대한 자잘한 팁들

• Hooks는 순서가 매우 중요!
• 조건문 안에 절대 넣으면 안됨, 함수나 반복문 안에도 웬만하면 넣지 말기

• componentDidMount(): 처음 render가 성공적으로 됐다면 실행, 리랜더링이 되면 실행x (비동기 요청)
• componentDidUpdate(): 리랜더링 후 실행
• componentWillUnmount(): 컴포넌트가 제거되기 직전 실행 (비동기 요청 정리)
• 클래스의 경우 constructor -> render -> ref -> componentDidMount -> (setState / props 바뀔 때) -> shouldComponentUpdate(true) -> render -> componentDidUpdate -> 부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸

2. setInterval과 라이프사이클 연동하기

interval;

componentDidMount() {
    this.interval = setInterval(() => {
      ...
    }, 1000);
}

componentWillUnmount() {
    clearInterval(this.interval);
}

setInterval(), setTimeout()은 없애주지 않으면 메모리 누수가 생기므로 완료되지 않은 비동기 요청은 componentWillUnmount()에서 정리해주기

❗ 비동기 안에서 바깥에 있는 함수를 참조하면 클로저 문제 발생 항상 주의

3. 가위바위보 게임 만들기

RSP.jsx

import React, { Component } from 'react';

const rspCoords = {
    바위: '0',
    가위: '-260px',
    보: '-538px'
};

const scores = {
    가위: 1,
    바위: 0,
    보: -1,
};

const computerChoice = (imgCoord) => {
    return Object.entries(rspCoords).find(function (v) {
        return v[1] === imgCoord;
    })[0];
};

class RSP extends Component {
    state = {
        result: '',
        imgCoord: '0',
        score: 0,
    };

    interval;

    componentDidMount() {
        this.interval = setInterval(this.changeHand, 100);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    changeHand = () => {
        const { imgCoord } = this.state;
        if (imgCoord === rspCoords.바위) {
            this.setState({
                imgCoord: rspCoords.가위,
            });
        } else if (imgCoord === rspCoords.가위) {
            this.setState({
                imgCoord: rspCoords.보,
            });
        } else if (imgCoord === rspCoords.보) {
            this.setState({
                imgCoord: rspCoords.바위,
            });
        }
    }

    // 버튼 클릭 시 인터벌 잠시 멈추고 점수 계산 후 다시 실행
    onClickBtn = (choice) => {
        const { imgCoord } = this.state;
        clearInterval(this.interval);
        const myScore = scores[choice];
        const cpuScore = scores[computerChoice(imgCoord)];
        const diff = myScore - cpuScore; // 내 스코어와 컴퓨터 스코어 빼기
        if (diff === 0) { // 차이가 없으면
            this.setState({
                result: '비겼습니다!',
            });
        } else if ([-1, 2].includes(diff)) {
            this.setState((prevState) => {
                return {
                    result: '이겼습니다!',
                    score: prevState.score + 1,
                };
            });
        } else {
            this.setState((prevState) => {
                return {
                    result: '졌습니다!',
                    score: prevState.score - 1,
                };
            });
        }
        setTimeout(() => {
            this.interval = setInterval(this.changeHand, 100);
        }, 2000); // 결과 나온 후 2초 기다렸다가 다시 돌리기
    };

    render() {
        const { result, score, imgCoord } = this.state;
        return (
            <>
                <div id="computer" style={{ background: `url(https://data.ac-illust.com/data/thumbnails/4f/4f63b32d7d43ea2cb231c0724200cf8e_t.jpeg) ${imgCoord} 0` }}></div>
                <div>
                    <button id="rock" className="btn" onClick={() => this.onClickBtn('바위')}>바위</button>
                    <button id="scissor" className="btn" onClick={() => this.onClickBtn('가위')}>가위</button>
                    <button id="paper" className="btn" onClick={() => this.onClickBtn('보')}>보</button>
                </div>
                <div>{result}</div>
                <div>현재 {score}점</div>
            </>
        );
    }
}

export default RSP;

4. 고차 함수

메서드 안에 함수를 호출하는 부분이 있으면 화살표 함수를 빼서 함수를 연달아 쓸 수 있음

onClickBtn = (choice) => () => {
  ...
};

...

render() {
  return (
    <button onClick={this.onClickBtn('바위')}>바위</button>
    <button onClick={this.onClickBtn('가위')}>가위</button>
    <button onClick={this.onClickBtn('보')}>보</button>
  );
}

5. Hooks와 useEffect

Hooks엔 LifeCycle이 없지만 useEffect로 동일하게 동작하게 할 수 있음

useEffect(() => { // componentDidMount, componentDidUpadate 역할 (1대1 대응은 아님)
    interval.current = setInterval(changeHand, 100);
    return () => { //componentWillUnmount 역할
        clearInterval(interval.current);
    }
}, [imgCoord]);
//두번째 인수 배열에 넣은 값(imgCoord)이 바뀔 때 useEffect 실행 (useEffect를 다시 실행할 값만 넣어주기)

매번 clearInterval()을 하기 때문에 setTimeout() 하는 것과 동일

👉 state가 업데이트 될 때 마다 useEffect가 실행 후 종료가 되므로 setTimeout()을 사용해도 됨!

6. 클래스와 Hooks 라이프사이클 비교

• 클래스: componentDidMount, componentDidUpadate, componentWillUnmount로 state를 한 번에 조작할 수 있음
• Hooks: useEffect로 state를 개별로 담당. useEffect는 여러 개 작성 가능

• jsx에서는 for, if문 사용 x -> 삼항연산자 또는 AND(&&) 연산자 사용

  ResponseCheck.jsx

  renderAverage = () => {
    const { result } = this.state;
    return result.length === 0
        ? null // jsx에서 false, undefined, null은 태그 없음을 의미. 처음엔 null, result에 값이 있으면 랜더링
        : <div>평균 시간: {result.reduce((a, c) => a + c) / result.length}ms</div>
  }

  코드가 지저분할 때 이렇게 함수로 랜더링 부분을 분리해도 되지만 새로운 컴포넌트로 만들어 주는 게 더 좋음!

2. setTimeout 넣어 반응속도체크

timeout;
startTime;
endTime;

onClickScreen = () => {
    const { state, message, result } = this.state;
    if (state === 'waiting') {
        this.setState({
            state: 'ready',
            message: '초록색이 되면 클릭하세요.',
        });
        this.timeout = setTimeout(() => {
            this.setState({
                state: 'now',
                message: '지금 클릭',
            });
            this.startTime = new Date(); // state에 넣으면 바뀔 때 마다 랜더링 되기 때문에 this.startTime
        }, Math.floor(Math.random() * 1000) + 2000); // 2초 ~ 3초 중 랜덤
    } else if (state === 'ready') {
        clearTimeout(this.timeout); // 초기화 되지 않고 setTimeout이 실행되기 때문에 삭제하는 코드
        this.setState({
            state: 'waiting',
            message: '너무 성급하시군요! 초록색이 된 후에 클릭하세요.',
        });
    } else if (state === 'now') { // 반응 속도 체크
        this.endTime = new Date();
        this.setState((prevState) => {
            return {
                state: 'waiting',
                message: '클릭해서 시작하세요.',
                result: [...prevState.result, this.endTime - this.startTime],
            };
        });
    }
};

3. 반응속도체크 Hooks로 전환하기

• this의 속성들을 ref로 표현, ref는 안에 current가 들어 있어서 값을 가져올 때도 뒤에 current를 넣어야함
• useRef 는 값이 바뀌기는 하지만 화면에 영향을 미치고 싶지 않을 때 사용 (리랜더링 되지 않음)

  import React, { useState, useRef } from 'react';
  

const ResponseCheck = () => { const [state, setState] = useState('waiting'); const [message, setMessage] = useState('클릭해서 시작하세요.'); const [result, setResult] = useState([]); const timeout = useRef(null); const startTime = useRef(); const endTime = useRef();

const onClickScreen = () => {
    if (state === 'waiting') {
        setState('ready');
        setMessage('초록색이 되면 클릭하세요.');
        timeout.current = setTimeout(() => {
            setState('now');
            setMessage('지금 클릭');
            startTime.current = new Date();
        }, Math.floor(Math.random() * 1000) + 2000);
    } else if (state === 'ready') {
        clearTimeout(timeout.current);
        setState('waiting');
        setMessage('너무 성급하시군요! 초록색이 된 후에 클릭하세요.');
    } else if (state === 'now') {
        endTime.current = new Date();
        setState('waiting');
        setMessage('클릭해서 시작하세요.');
        setResult(prevResult => {
            return [...prevResult, endTime.current - startTime.current];
        });
    }
};

const onReset = () => {
    setResult([]);
};

const renderAverage = () => {
    return result.length === 0
        ? null
        : <>
            <div>평균 시간: {result.reduce((a, c) => a + c) / result.length}ms</div>
            <button onClick={onReset}>리셋</button>
        </>
};

return (
    <>
        <div id="screen" className={state} onClick={onClickScreen}>
            {message}
        </div>
        {renderAverage()}
    </>
);

};

export default ResponseCheck;

```

4. return 내부에 for과 if 쓰기

• jsx에선 {} 중괄호 사용 시 자바스크립트 코드 사용 가능
• jsx에선 못 쓰지만 함수 안에서는 for, if문 사용 가능

함수를 선언 하자마자 즉시 실행 하는 함수로 만들어주기

1) require: node의 모듈 시스템

//NumberBaseball.jsx
module.exports = NumberBaseball; 

//client.jsx
const NumberBaseball = require('./NumberBaseball');

NumberBaseball class가 module.exports 담겨서 다른파일에서 require로 불러오기

2) import: ES2015(ES6) 모듈 시스템

export const hello = 'hello'; // 가져올 때 import { hello }
export default NumberBaseball; // 가져올 때 import NumberBaseball

import React, { Component } from 'react';
//따라서 React는 export default, Component는 export const Component

• exports 되는 게 객체나 배열이면 구조 분해 가능
• default는 한 번만 사용 가능
• 엄밀히 따지면 export default와 module.exports 다르지만 호환은 가능

node로 webpack을 돌리면 import 사용 시 에러가 나지만 babel이 import를 require로 바꿔줌 (node에서는 require, react에서는 import와 export 사용)

2. 리액트 반복문(map)

• 리액트에서는 반복문을 map 메서드로 사용
• 달라지는 부분을 배열로 만들고 받아오기. 공통되는 부분은 return

  <ul>
    {['사과', '바나나', '포도', '귤', '감', '배', '밤',].map((v) => {
        return (
            <li>{v}</li>
        );
    })}
  </ul>

3. 리액트 반복문(key)

• 달라지는 부분을 2차원 배열 또는 객체로 만들기
• 리액트가 key를 보고 같은 컴포넌트인지 아닌지 판단. key는 고유한 값이 들어가야함

  <ul>
    {[
        { fruit: '사과', taste: '달다' },
        { fruit: '바나나', taste: '맛없다' },
        { fruit: '포도', taste: '새콤하다' },
        { fruit: '귤', taste: '시다' },
        { fruit: '감', taste: '떫다' },
        { fruit: '배', taste: '맛있다' },
        { fruit: '밤', taste: '맛있다' },
    ].map((v, i) => { //두번째는 인덱스
        return (
            <li key={v.fruit + v.taste}><b>{v.fruit}</b> - {v.taste}</li>
        );
    })}
  </ul>

화살표 함수 사용 시 return 생략 가능. 중괄호가 없으면 return을 뜻함

.map((v, i) =>
    <li key={v.fruit + v.taste}><b>{v.fruit}</b> - {v.taste}</li>
)

4. 컴포넌트 분리와 props

• 컴포넌트를 분리하는 이유: 재사용성, 가독성, 성능 최적화(반복문 사용 시 성능 문제 발생)
• 컴포넌트 분리 시 매개변수 v, i를 사용하기 위해 연결해주는 props 필요 NumberBaseball class가 Try의 부모!

  Try.jsx

  import React, { Component } from 'react';
  

class Try extends Component { render() { return(

export default Try;

#### NumberBaseball.jsx
```jsx
import Try from './Try';
...
fruits = [
    { fruit: '사과', taste: '달다' },
    { fruit: '바나나', taste: '맛없다' },
    { fruit: '포도', taste: '새콤하다' },
    { fruit: '귤', taste: '시다' },
    { fruit: '감', taste: '떫다' },
    { fruit: '배', taste: '맛있다' },
    { fruit: '밤', taste: '맛있다' },
];

render() {
    return (
        <>
            ...
            <ul>
                {this.fruits.map((v, i) => {
                    return (
                        <Try key={v.fruit + v.taste} value={v} index={i} />
                    );
                })}
            </ul>
        </>
    );
}

5. 주석과 메서드 바인딩

1) 주석

{/* jsx 주석 */}

2) 바인딩

render() 밖에서 화살표 함수를 쓰지 않으면 this가 undefined가 되어 연결해주는 bind()함수를 써야함. 화살표 함수를 사용하면 자동으로 바인딩

6. 숫자야구 만들기

• push() 사용 시 뭐가 바뀌었는지 감지 x, 예전 state와 현재 state가 다르면 render

  NumberBaseball.jsx

  import React, { Component } from 'react';
  import Try from './Try';
  

function getNumbers() { //숫자 4개를 겹치지 않고 랜덤하게 뽑는 함수 const candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const array = []; for (let i = 0; i < 4; i += 1) { const chosen = candidate.splice(Math.floor(Math.random() * (9 - i)), 1)[0]; array.push(chosen); } return array; }

class NumberBaseball extends Component { state = { result: '', value: '', answer: getNumbers(), tries: [], };

onSubmitForm = (e) => {
    const { result, value, tries, answer } = this.state;
    e.preventDefault();
    if (value === answer.join('')) { //답이 맞는 지 비교
        this.setState((prevState) => {
            return {
                result: '홈런!',
                tries: [...prevState.tries, { try: value, result: '홈런!' }],
            }
        });
        alert('게임을 다시 시작합니다!');
        this.setState({
            value: '',
            answer: getNumbers(),
            tries: [],
        });
    } else { // 답 틀렸으면
        const answerArray = value.split('').map((v) => parseInt(v));
        let strike = 0;
        let ball = 0;
        if (tries.length >= 9) { // 10번 이상 틀렸을 때
            this.setState({
                result: `10번 넘게 틀려서 실패! 답은 ${answer.join(',')}였습니다!`,
            });
            alert('게임을 다시 시작합니다!');
            this.setState({
                value: '',
                answer: getNumbers(),
                tries: [],
            });
        } else {
            for (let i = 0; i < 4; i += 1) {
                if (answerArray[i] === answer[i]) {
                    strike += 1;
                } else if (answer.includes(answerArray[i])) {
                    ball += 1;
                }
            }
            this.setState((prevState) => {
                return {
                    tries: [...prevState.tries, { try: value, result: `${strike} 스트라이크, ${ball} 볼입니다` }],
                    value: '',
                };
            });
        }
    }
};

onChangeInput = (e) => {
    console.log(this.state.answer);
    this.setState({
        value: e.target.value,
    });
};

render() {
    const { result, value, tries } = this.state;
    return (
        <>
            <h1>{result}</h1>
            <form onSubmit={this.onSubmitForm}>
                <input maxLength={4} value={value} onChange={this.onChangeInput} />
            </form>
            <div>시도: {tries.length}</div>
            <ul>
                {tries.map((v, i) => {
                    return (
                        <Try key={`${i + 1}차 시도: `} tryInfo={v} />
                    );
                })}
            </ul>
        </>
    );
}

}

export default NumberBaseball;

#### Try.jsx
```jsx
import React, { Component } from 'react';

class Try extends Component {
    render() {
        const { tryInfo } = this.props; // 구조 분해 문법
        return (
            <li>
                <div>{tryInfo.try}</div>
                <div>{tryInfo.result}</div>
            </li>
        );
    }
}

export default Try;

7. 숫자야구 Hooks로 전환하기

NumberBaseball.jsx

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

function getNumbers() {
    const candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    const array = [];
    for (let i = 0; i < 4; i += 1) {
        const chosen = candidate.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
        array.push(chosen);
    }
    return array;
}

const NumberBaseball = () => {
    const [result, setResult] = useState('');
    const [value, setValue] = useState('');
    const [answer, setAnswer] = useState(getNumbers());
    const [tries, setTries] = useState([]);

    const onSubmitForm = (e) => {
        e.preventDefault();
        if (value === answer.join('')) {
            setResult('홈런!');
            setTries((prevTries) => { // 이전 tries 배열로 새 tries 배열을 만들기 때문에 함수형으로 만들기
                return [...prevTries, { try: value, result: '홈런!' }]
            });
            alert('게임을 다시 시작합니다!');
            setValue('');
            setAnswer(getNumbers());
            setTries([]);
        } else {
            const answerArray = value.split('').map((v) => parseInt(v));
            let strike = 0;
            let ball = 0;
            if (tries.length >= 9) {
                setResult(`10번 넘게 틀려서 실패! 답은 ${answer.join(',')}였습니다!`);
                alert('게임을 다시 시작합니다!');
                setValue('');
                setAnswer(getNumbers());
                setTries([]);
            } else {
                console.log(answer.join(''));
                for (let i = 0; i < 4; i += 1) {
                    if (answerArray[i] === answer[i]) {
                        strike += 1;
                    } else if (answer.includes(answerArray[i])) {
                        ball += 1;
                    }
                }
                setTries((prevTries) => [...prevTries, { try: value, result: `${strike} 스트라이크, ${ball} 볼입니다` }]);
                setValue('');
            }
        }
    };

    const onChangeInput = (e) => {
        setValue(e.target.value);
    };

    return (
        <>
            <h1>{result}</h1>
            <form onSubmit={onSubmitForm}>
                <input maxLength={4} value={value} onChange={onChangeInput} />
            </form>
            <div>시도: {tries.length}</div>
            <ul>
                {tries.map((v, i) => {
                    return (
                        <Try key={`${i + 1}차 시도: `} tryInfo={v} />
                    );
                })}
            </ul>
        </>
    );
};

export default NumberBaseball;

Try.jsx

import React from 'react';

const Try = ({tryInfo}) => {
  return (
    <li>
      <div>{tryInfo.try}</div>
      <div>{tryInfo.result}</div>
    </li>
  );
};

export default Try;

8. shouldComponentUpdate

• state, props가 바뀌거나 setState 호출 시 랜더링 됨. 건들이지 않은 컴포넌트도 다시 랜더링 👉 성능 문제 발생
• shouldComponentUpdate()의 return 값이 true면 랜더링, false 랜더링 하지 않게 구현

9. PureComponent와 React.memo

1) PureComponent

shouldComponentUpdate()에서 true, false 할 것인지를 state가 바뀌었는지 안 바뀌었는지 판단 후 자동으로 구현한 컴포넌트

import React, { PureComponent } from 'react';

class Test extends PureComponent { ...

❗ 단 state엔 복잡한 객체구조는 안 쓰는 게 좋음

2) React.memo

Hooks에서 사용하는 리랜더링 방지 함수

const React = require('react');
const { memo } = React; 

const Try = memo(({ tryInfo }) => {...

10. React.createRef

• class에서 ref를 Hooks와 비슷하게 만들 수 있음
• this.inputRef.current.focus(); 로 접근 가능

  import React, { Component, createRef } from 'react';
  ...
  InputRef = createRef();
  

함수형 방식은 세밀한 작업을 하고싶을 때 사용

## 11. props와 state 연결하기
- `render()` 안에 `this.setState()` 사용 시 무한반복이 되므로 사용 X
- props는 부모가 바꿔야하며 자식이 바꿀 수 없음
만약 props를 바꿔야한다면 state로 만들어서 바꾸기
```jsx
const Try = memo(({ tryInfo }) => {
    const [result, setResult] = useState(tryInfo.result);

    const onClick = () => {
        setResult('1');
    }

    return (
        <li>
            <div>{tryInfo.try}</div>
            <div onClick={onClick}>{tryInfo.result}</div>
        </li>
    );
});

• create-react-app으로 자동 설치 가능
• 터미널 실행 후 npm init: package.json 파일 생성
• npm i react react-dom: npm이 react, react-dom 설치
• npm i -D webpack webpack-cli: webpack, webpack-cli 설치 -D: 개발할 때만 사용한다는 의미. 실제 서비스 할 땐 webpack 필요 x
• 👉실제 서비스에서는 dependencies 기록 개발에만 쓰이는 것들은 devDependencies 에 기록

client.jsx

//React, React-dom 불러오기
const React = require('react');
const ReactDom = require('react-dom');

jsx문법 사용 시 웬만하면 파일 확장자를 jsx로 쓰기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>끝말잇기</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
</body>
</html>

2. 모듈 시스템과 웹팩 설정

WordRelay.jsx

//npm에서 react를 불러오기
const React = require('react');
const { Component } = require('react');

class WordRelay extends Component {
    state = {
        text: 'Hello, webpack'
    };
    render() {
        return <h1>{this.state.text}</h1>;
    }
}
//컴포넌트를 바깥에서도 사용할 수 있는 코드
module.exports = WordRelay;

client.jsx

const React = require('react');
const ReactDom = require('react-dom');

// 필요한 모듈 불러오기
const WordRelay = require('./WordRelay');

ReactDom.render(<WordRelay />, document.querySelector('#root'));

webpack.config.js

//webpack은 webpack.config.js 모든게 돌아감
const path = require('path');

module.exports = {
    name: 'wordrelay-setting',
    mode: 'development', // 실서비스: production
    devtool: 'eval', // 빠르게
    resolve: {
        extensions: ['.js', '.jsx']
    },

    entry: {
        app: ['./client']
    }, // 입력
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    }, // 출력
};

• path.join: 경로를 함쳐줌
• __dirname: 현재 폴더 (현재 폴더가 dist라는 것) 👉 client.jsx 와 WordRelay.jsx를 합쳐 app.js 파일 생성

3. 웹팩으로 빌드하기

• webpack은 명령어로 등록이 안 되어있어서 터미널에서 오류 발생

1) webpack 명령어 등록을 해주기 2) package.json에 scripts로 등록 후 npm run dev

"scripts": {
    "dev": "webpack"
},

3) 터미널에 npx webpack 입력 👉 dist 디렉터리에 app.js 파일 생성됨

1) babel 설치

• npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/plugin-proposal-class-properties
  • @babel/core: babel 기본
  • @babel/preset-env: 브라우저에 맞게 이전 문법지원
  • @babel/preset-react: jsx 지원
  • babel-loader: babel과 webpack 연결

2) babel, webpack 연결

webpack.config.js

//entry파일 읽고 module 적용 후 output으로 출력

entry: {
    app: ['./client']
}, // 입력

module: {
    rules: [{ // 여러개의 규칙 적용할 수 있기 때문에 배열
        test: /\.jsx?/, // 정규표현식. js, jsx파일에 rule 적용(babel)
        loader: 'babel-loader', 
        options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties'],
        },
    }],
},

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js'
}, // 출력

4. @babel/preset-env와 plugins

1) @babel/preset-env

• presets: plugin들의 모음
• @babel/preset-env: 이전 브라우저 자동 지원
• browserslist 옵션들 참고

  webpack.config.js

  options: {
    presets: [
        ['@babel/preset-env', {
            target: {
                browsers: ['> 5% in KR', 'last 2 chrome versions'],
                // 한국에서 브라우저 점유율이 5% 이상인 브라우저는 지원
                // chrome의 최신버전 2가지만 호환되게, 모든 브라우저를 호환하면 babel의 작업량이 늘어나서 느려짐 
            },
            debug: true,
        }],
        '@babel/preset-react'
    ],
    plugins: ['@babel/plugin-proposal-class-properties'],
  },

  2) plugins

  module.exports = {
    mode: 'development',
    entry: {
      ...
    },
    module: {
      ...
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true }),
      // options에 debug: true 넣어주기
    ],
    output: {
      ...
    },
  };

  mode, entry, module, plugins, output이 제일 중요!

  5. 끝말잇기 class 만들기

  WordRelay.jsx

  const React = require('react');
  const { Component } = require('react');
  

class WordRelay extends Component { state = { word: '제로초', value: '', result: '', };

onSubmitForm = (e) => {
    e.preventDefault();
    if (this.state.word[this.state.word.length - 1] === this.state.value[0]) {
        this.setState({
            result: '딩동댕',
            word: this.state.value,
            value: '',
        });
        this.input.focus();
    } else {
        this.setState({
            result: '땡',
            value: '',
        });
        this.input.focus();
    }
};

onChangeInput = (e) => {
    this.setState({
        value: e.target.value
    });
};

input; // this.input 생성

onRefInput = (c) => {
    this.input = c;
};

render() {
    return (
        <>
            <div>{this.state.word}</div>
            <form onSubmit={this.onSubmitForm}>
                <input ref={this.onRefInput} value={this.state.value} onChange={this.onChangeInput} />
                <button>입력!</button>
            </form>
            <div>{this.state.result}</div>
        </>
    );
}

}

module.exports = WordRelay;

input에 value, onChange는 세트. 아니면 `defaultValue` 넣기

## 6. webpack-dev-server와 hot-loader
- `npm i -D react-hot-loader`
- `npm i -D webpack-dev-server`: webpack.config.js 읽어 build 후 유지
```js
"scripts": {
    "dev": "webpack-dev-server --hot"
 },

client.jsx

const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root');

const WordRelay = require('./WordRelay');

const Hot = hot(WordRelay);

ReactDom.render(<Hot />, document.querySelector('#root'));

webpack.config.js

...
module: {
    rules: [{
        test: /\.jsx?/,
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: [
                '@babel/plugin-proposal-class-properties',
              ⭐'react-hot-loader/babel',
            ],
        },
    }],
},

로컬호스트 서버를 이용해서 프론트엔트 프로그램을 돌릴 수 있음. 저장하는 순간 변경된게 자동으로 빌드 됨

7. 끝말잇기 Hooks로 전환하기

WordRelay.jsx

const React = require('react');
const { useState, useRef } = require('react');

const WordRelay = () => {
    const [word, setWord] = useState('지은');
    const [value, setValue] = useState('');
    const [result, setResult] = useState('');
    const inputRef = useRef(null);

    const onSubmitForm = (e) => {
        e.preventDefault();
        if (word[word.length - 1] === value[0]) {
            setResult('딩동댕');
            setWord(value);
            setValue('');
            inputRef.current.focus();
        } else {
            setResult('땡');
            setValue('');
            inputRef.current.focus();
        }
    };

    const onChangeInput = (e) => {
        setValue(e.target.value);
    };

    return (
        <>
            <div>{word}</div>
            <form onSubmit={onSubmitForm}>
                <input ref={inputRef} value={value} onChange={onChangeInput} />
                <button>입력!</button>
            </form>
            <div>{result}</div>
        </>
    );

};

module.exports = WordRelay;

• create-react-app없이 html로 컴포넌트 만들기

• lecture 디렉터리 만들고 그 안에 index.html 생성

  index.html

  // react, reactDom
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <div id="root"></div>
    // root에 리액트 넣기
    <script>
        const e = React.createElement; //html 태그를 만들어주는 함수
  
        class LikeButton extends React.Component {
            constructor(props) {
                super(props);
            }
  
            render() {
                return e('button', null, 'Like'); //<button>Like</button> 
            }
        }
    </script>
    <script>
        ReactDOM.render(e(LikeButton), document.querySelector('#root')); // ReactDOM은 웹에 실제로 반영시켜줌
    </script>

2. HTML 속성과 상태(state)

• 상태(state)는 바뀌는 부분, 혹은 바뀔 수 있는 부분

  class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            liked: false
        };
    }
  
    render() {
        return e('button',
            { onClick: () => { this.setState({ liked: true }) }, type: 'submit' },
            this.state.liked === true ? 'Liked' : 'Like'
        );
        // 두번째 자리에 html 속성 넣기
        //<button onclick"() => {console.log('click')}" type="submit">Like</button> 
    }
  }

3. JSX와 바벨(babel)

• 자바스크립트에서 HTML문법을 쓸 수 없지만 babel 사용시 쓸 수 있음

• script태그에 <script type="text/babel"> 넣어주기

• JSX (JS + XML) => 닫는 태그를 꼭 해줘야 함(문법이 엄격함)

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
  ...
  </script>

  <script type="text/babel">
    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                liked: false
            };
        }
  
        render() {
            return <button type="submit" onClick={() => this.setState({ liked: true })}>
                {this.state.liked === true ? 'Liked' : 'Like'}
            </button>;
            // e('button',
            //     { onClick: () => { this.setState({ liked: true }) }, type: 'submit' },
            //     this.state.liked === true ? 'Liked' : 'Like'
            // );
        }
    }
  </script>
  <script type="text/babel">
    ReactDOM.render(<LikeButton />, document.querySelector('#root'));
  </script>

  ❗ 컴포넌트 장점: 원하는 개수만큼 쉽게 늘릴 수 있음

  4. 구구단 만들기

  index.html

  <div id="root"></div>
  <script type="text/babel">
    class GuGuDan extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                first: Math.ceil(Math.random() * 9),
                second: Math.ceil(Math.random() * 9),
                value: '',
                result: '',
            };
        }
        render() {
            return (
                <div>
                    <div>{this.state.first} 곱하기 {this.state.second}는?</div>
                    <form>
                        <input type="number" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />
                        <button>입력!</button>
                    </form>
                    <div>{this.state.result}</div>
                </div>
            );
        }
    }
  </script>
  <script type="text/babel">
    ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
  </script>

  1) 클래스 메서드

  onSubmit = (e) => {
    e.preventDefault();
    if (parseInt(this.state.value) === this.state.first * this.state.second) {
        this.setState({
            result: this.state.value + ' 정답',
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: ''
        });
    } else {
        this.setState({
            result: '땡',
            value: '',
        });
    }
  };
  

onChange = (e) => { this.setState({ value: e.target.value }) // input태그는 onChange로 value를 직접 바꿔야함 };

```javascript
render() {
    return (
        <div>
            <div>{this.state.first} 곱하기 {this.state.second}는?</div>
            <form onSubmit={this.onSubmit}>
                <input type="number" value={this.state.value} onChange={this.onChange} />

                <button>입력!</button>
            </form>
            <div>{this.state.result}</div>
        </div>
    );
}

render() 안에서 쓴 함수는 function 사용 가능. but! 밖에서 썼다면 무조건 화살표 함수 쓰기 (this가 현재 class를 가리키지 않기 때문) ❗ 밖에서 쓰려면 bind() 함수 써야함

🔥JSX와 javascript코드는 웬만하면 섞어쓰지 않기🔥

2) Fragment와 기타 팁들

• 쓸떼없는 div태그가 감싸져있어서 방해가 됨 -> <>빈태그 또는 <React.Fragment> 로 대신 감싸면 <div id="root"> 다음 바로 태그가 나옴

  render() {
    return (
        <div>
            <div>
              ...
              </div>
        </div>
    );
  }
  

```javascript
render() {
    return (
        <React.Fragment>
            <div>
              ...
            </div>
        </React.Fragment>
    );
}

//이 부분 생략 가능 (실무에선 이 방식을 더 많이 사용)
constructor(props) {
    super(props);
}

3) 함수형 setState

• setState는 비동기이기 때문에 예전 state값으로 새로운 state를 만들 때 리턴해주는 함수 사용하기
• prevState는 바꾸기 전 상태값이 들어있음

this.setState((prevState) => {
    return {
          // 현재 값
        result: prevState.value + ' 정답',
          // 미래에 바꾸겠다는 state 값
        first: Math.ceil(Math.random() * 9),
        second: Math.ceil(Math.random() * 9),
        value: ''
    };
});

4) ref

• React로 input에 포커스 주기

onSubmit = (e) => {
    e.preventDefault();
    if (parseInt(this.state.value) === this.state.first * this.state.second) {
        ...
      ⭐this.input.focus();
    }
};

input;

render() {
    return (
        <React.Fragment>
            <input ⭐ref={(c) => {this.input = c;}}
             type="number"
           value={this.state.value}
           onChange={this.onChange} />
        </React.Fragment>
    );
}

state 값이 바뀔 때마다 render()함수가 계속 실행되기 때문에 밖으로 빼줌

input;

onRefInput = (c) => {this.input = c;};

render() {
    return (
        <React.Fragment>
            <input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange} />
        </React.Fragment>
    );
}

5. React Hooks

• React도 Hooks 쓰기를 권장함

• setState, ref를 안 쓸 때 함수형 컴포넌트를 사용. 하지만 사용할 수 있도록 한 것이 Hooks

• Hooks는 state가 바뀌면 함수 자체가 재실행 되어 조금 더 느릴 수 있음

  <script type="text/babel">
    const GuGuDan = () => {
        //state를 선언하는 방법, state를 분리하기
        const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
        const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
        const [value, setValue] = React.useState('');
        const [result, setResult] = React.useState('');
        //ref
        const inputRef = React.useRef(); //useRef로 DOM에 접근
  
        const onSubmitForm = (e) => {
            e.preventDefault();
            if (parseInt(value) === first * second) {
                setResult('정답: ' + value);
                setFirst(Math.ceil(Math.random() * 9));
                setSecond(Math.ceil(Math.random() * 9));
                setValue('');
                inputRef.current.focus();
            } else {
                setResult('땡');
                setValue('');
                inputRef.current.focus();
            }
        };
  
        const onChangeInput = (e) => {
            setValue(e.target.value);
        };
  
        return (
            <React.Fragment>
                <div>{first}곱하기{second}는?</div>
                <form onSubmit={onSubmitForm}>
                    <input ref={inputRef} onChange={onChangeInput} value={value} />
                    <button>입력!</button>
                </form>
                <div id="result">{result}</div>
            </React.Fragment>
        );
    }
  </script>

• Read기능, Create 기능 결합
• components 디렉터리에 UpdateContents.js 파일 생성

  App.js

  import UpdateContent from './components/UpdateContent';
  

...

else if (this.state.mode === 'update') { _article = <UpdateContent onSubmit={function (_title, _desc) { this.max_content_id = this.max_content_id + 1; var _contents = this.state.contents.concat( { id: this.max_content_id, title: _title, desc: _desc } ) this.setState({ contents: _contents }); console.log(_title, _desc); }.bind(this)}> }

- render()함수 안 코드가 복잡하기 때문에 새로운 함수로 쪼개서 분리시켜보기
```javascript
getContent() {
  var _title, _desc, _article = null;
  if (this.state.mode === 'welcome') {
    _title = this.state.welcome.title;
    _desc = this.state.welcome.desc;
    _article = <ReadContent title={_title} desc={_desc}></ReadContent>
  } else if (this.state.mode === 'read') {
    var i = 0;
    while (i < this.state.contents.length) {
      var data = this.state.contents[i];
      if (data.id === this.state.selected_content_id) {
        _title = data.title;
        _desc = data.desc;
        break;
      }
      i = i + 1;
    }
    _article = <ReadContent title={_title} desc={_desc}></ReadContent>
  } else if (this.state.mode === 'create') {
    _article = <CreateContent onSubmit={function (_title, _desc) {
      // add content to this.state.contents
      this.max_content_id = this.max_content_id + 1;
      // this.state.contents.push(
      // {id:this.max_content_id, title:_title, desc:_desc}
      // );
      var _contents = this.state.contents.concat(
        { id: this.max_content_id, title: _title, desc: _desc }
      )
      this.setState({
        contents: _contents
      });
      console.log(_title, _desc);
    }.bind(this)}></CreateContent>
  } else if (this.state.mode === 'update') {
    _article = <UpdateContent onSubmit={function (_title, _desc) {
      this.max_content_id = this.max_content_id + 1;
      var _contents = this.state.contents.concat(
        { id: this.max_content_id, title: _title, desc: _desc }
      )
      this.setState({
        contents: _contents
      });
      console.log(_title, _desc);
    }.bind(this)}></UpdateContent>
  }
  return _article;
}
render() {
  return (
    <div className="App">
      <Subject
        title={this.state.subject.title}
        sub={this.state.subject.sub}
        onChangePage={function () {
          this.setState({ mode: 'welcome' });
        }.bind(this)}
      >
      </Subject>
      <TOC onChangePage={function (id) {
        this.setState({
          mode: 'read',
          selected_content_id: Number(id)
        });
      }.bind(this)} data={this.state.contents}></TOC>
      <Control onChangeMode={function (_mode) {
        this.setState({
          mode: _mode
        });
      }.bind(this)}></Control>
      //getContent()를 쓰는 건 _article이기 때문에 
      {this.getContent()}
    </div>
  );
}

• UpdateContent 컴포넌트 실행 시 입력값으로 현재 선택된 id에 해당되는 contents를 주입시키기
• mode가 read일 때 하는 방법과 같아 코드가 중복되기 때문에 getReadContent() 함수 생성하여 코드 넣어 리팩토링 하기

  getReadContent() {
  var i = 0;
  while (i < this.state.contents.length) {
    var data = this.state.contents[i];
    if (data.id === this.state.selected_content_id) {
      return data;
    }
    i = i + 1;
  }
  }
  ...
  

else if (this.state.mode === 'read') { var _content = this.getReadContent(); _article = } else if (this.state.mode === 'update') { _content = this.getReadContent(); _article = <UpdateContent data={_content} onSubmit={function (_title, _desc) { this.max_content_id = this.max_content_id + 1; var _contents = this.state.contents.concat( { id: this.max_content_id, title: _title, desc: _desc } ) this.setState({ contents: _contents }); console.log(_title, _desc); }.bind(this)}> }

UpdateContent 컴포넌트의 data의 값을 _content를 주며 현재 id값을 찾는다.
(현재 id 기본값은 2번이기때문에 2번 contents 출력 )
## 2. form
#### UpdateContent.js
```javascript
import React, { Component } from 'react';

class UpdateContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: this.props.id,
            title: this.props.data.title,
            desc: this.props.data.desc
        }
        this.inputFormHandler = this.inputFormHandler.bind(this);
    }
    inputFormHandler(e) {
        this.setState({ [e.target.name]: e.target.value });
        // state값을 동적으로 바꾸기 위해 setState 사용
        // e.target.value를 사용하면 현재 텍스트 값을 읽을 수 있음
    }
    render() {
        console.log(this.props.data);
        return (
            <article>
                <h2>Update</h2>
                <form action="/create_process" method="post" onSubmit={function (e) {
                    e.preventDefault();
                    this.props.onSubmit(
                        this.state.id,
                        this.state.title,
                        this.state.desc
                    );
                }.bind(this)}
                >
                    <input type="hidden" name="id" value={this.state.id}></input>
                    <p>
                        <input
                            type="text"
                            name="title"
                            placeholder="title"
                            value={this.state.title} //props는 읽기전용이기 때문에 수정이 되지 않음 -> 가변적인 데이터 state화 시키기
                            onChange={this.inputFormHandler} // onChange함수는 변화가 일어났는지 탐지
                        ></input>
                    </p>
                    <p><textarea
                        onChange={this.inputFormHandler}
                        name="desc"
                        placeholder="description"
                        value={this.state.desc} // textarea의 내용은 value 사용
                    >
                    </textarea>
                    </p>
                    <p><input type="submit"></input></p>
                </form>
            </article>
        );
    }
}

export default UpdateContent;

3. state 변경

• update, create로 새로운 값 입력 시 mode를 'read'로 바꾸기

  App.js

  ...
  else if (this.state.mode === 'create') {
  _article = <CreateContent onSubmit={function (_title, _desc) {
    this.max_content_id = this.max_content_id + 1;
    var _contents = Array.from(this.state.contents);
    _contents.push({ id: this.max_content_id, title: _title, desc: _desc });
    // var _contents = this.state.contents.concat(
    //   { id: this.max_content_id, title: _title, desc: _desc }
    // )
    this.setState({
      contents: _contents,
      mode: 'read',
      selected_content_id: this.max_content_id
    });
    console.log(_title, _desc);
  }.bind(this)}></CreateContent>
  } else if (this.state.mode === 'update') {
  _content = this.getReadContent();
  _article = <UpdateContent data={_content} onSubmit={function (_id, _title, _desc) {
    var _contents = Array.from(this.state.contents); //state의 contents 배열 복제하여 새로운 배열 만들어짐
    var i = 0;
    while (i < _contents.length) {
      if (_contents[i].id === _id) { // _contents의 id 값과 입력받은 id값이 같으면 실행
        _contents[i] = { id: _id, title: _title, desc: _desc }; // 교체하기
        break;
      }
      i = i + 1;
    }
    this.setState({
      contents: _contents,
      mode: 'read'
    });
    console.log(_title, _desc);
  }.bind(this)}></UpdateContent>
  }

  4. Delete

  App.js

  ...
  <Control onChangeMode={function (_mode) {
  if (_mode === 'delete') {
    if (window.confirm('really?')) { // confirm() 실행 시 확인누르면 true, cancel 누르면 false
      var _contents = Array.from(this.state.contents);
      var i = 0;
      while (i < _contents.length) {
        if (_contents[i].id === this.state.selected_content_id) {
          _contents.splice(i, 1) // splice()는 (어디서부터, 어디까지)를 지울 것인지 구하는 함수
          break;
        }
        i = i + 1;
      }
      this.setState({
        mode: 'welcome',
        contents: _contents
      });
      alert('deleted!');
    }
  } else {
    this.setState({
      mode: _mode
    });
  }
  }.bind(this)}></Control>
  

```

• <TOC>와 <Content> 컴포넌트 사이에 create, update, delete 버튼 만들기
• components 디렉터리 안에 Control.js 파일 생성

Control.js

class Control extends Component {
    render() {
        return (
            <ul>
                <li><a href="/create" onClick={function(e){  // 클릭 시 onChangeMode 핸들러 실행되게 하는 코드
                    e.preventDefault();
                    this.props.onChangeMode('create'); // 호출 시 mode값 전달하기
                }.bind(this)}>create</a></li>
                <li><a href="/update" onClick={function(e){
                    e.preventDefault();
                    this.props.onChangeMode('update');
                }.bind(this)}>update</a></li>
                <li><input onClick={function(e){
                    e.preventDefault();
                    this.props.onChangeMode('delete');
                }.bind(this)} type="button" value="delete"></input></li>
            </ul>
        );
    }
}

App.js

import Control from "./components/Control";

<TOC onChangePage={function (id) {
    this.setState({
        mode: 'read',
        selected_content_id: Number(id)
    });
}.bind(this)} data={this.state.contents}></TOC>
⭐<Control onChangeMode={function (_mode) {
    this.setState({ // 함수 호출 시 mode state값 바꾸기
        mode: _mode
    });
}.bind(this)}></Control>
<Content title={_title} desc={_desc}></Content>

2. mode 전환

• create 클릭 시 <CreateContent> 컴포넌트로 바꿔보기
• 원래 있던 create 파일을 ReadContent로 모두 바꾸고, CreateContent 파일 생성

App.js

import CreateContent from './components/CreateContent';
import UpdateContent from './components/UpdateContent';

render() {
    var _title, _desc, _article = null;
    if (this.state.mode === 'welcome') {
        _title = this.state.welcome.title;
        _desc = this.state.welcome.desc;
        _article = <ReadContent title={_title} desc={_desc}></ReadContent>
    } else if (this.state.mode === 'read') {
        var i = 0;
        while (i < this.state.contents.length) {
            var data = this.state.contents[i];
            if (data.id === this.state.selected_content_id) {
                _title = data.title;
                _desc = data.desc;
                break;
            }
            i = i + 1;
        }
        _article = <ReadContent title={_title} desc={_desc}></ReadContent>
   ⭐} else if (this.state.mode === 'create') { // mode가 'create'일 때 CreateContent 나오게 하기
        _article = <CreateContent></CreateContent>
    }
    return (
        <div className="App">
            <Subject
                title={this.state.subject.title}
                sub={this.state.subject.sub}
                onChangePage={function () {
                    this.setState({ mode: 'welcome' });
                }.bind(this)}
            >
            </Subject>
            <TOC onChangePage={function (id) {
                this.setState({
                    mode: 'read',
                    selected_content_id: Number(id)
                });
            }.bind(this)} data={this.state.contents}></TOC>
            <Control onChangeMode={function (_mode) {
                this.setState({
                    mode: _mode
                });
            }.bind(this)}></Control>
           ⭐{_article}
        //가변적으로 바꾸기 위해 _article변수 사용
        </div>
    );
}

3. form

CreateContent.js

import React, { Component } from 'react';

class CreateContent extends Component {
    render() {
        return (
            <article>
                <h2>Create</h2>
                <form action="/create_process" method="post"
                    // 사용자가 데이터 추가, 수정 시 method를 post 방식을 써야 url 노출x 
                    onSubmit={function (e) { // Submit 버튼 클릭 시 폼 태그에 포함되어 있는 onSubmit 이벤트 실행
                        e.preventDefault();
                    }.bind(this)}
                >
                    <p><input type="text" name="title" placeholder="title"></input></p>
                    <p><textarea name="desc" placeholder="description"></textarea></p>
                    <p><input type="submit"></input></p>
                </form>
            </article>
        );
    }
}

export default CreateContent;

1) onSubmit 이벤트

App.js

else if (this.state.mode === 'create') {
  _article = <CreateContent onSubmit={function (_title, _desc) {
  // add content to this.state.contents
  }.bind(this)}></CreateContent>
}

CreateContent.js

<form action="/create_process" method="post"
    onSubmit={function (e) {
        e.preventDefault();
        this.props.onSubmit(
            e.target.title.value,
            e.target.desc.value
        );
    }.bind(this)}
>
    <p><input type="text" name="title" placeholder="title"></input></p>
    <p><textarea name="desc" placeholder="description"></textarea></p>
    <p><input type="submit"></input></p>
</form>

e.target은 form 자체를 가리킴 value는 입력한 값을 가져올 수 있기 때문에 _title, _desc 인자로 값을 넘겨줌

4. contents 변경

• onSubmit 이벤트가 실행됐을 때 App컴포넌트의 contents 배열 끝에 데이터 추가하기

  App.js

  class App extends Component {
  constructor(props) {
    super(props);
  ⭐this.max_content_id = 3; // state값이 아닌 이유는 UI에 아무런 영향을 주지 않기 때문
    this.state = {
      mode: 'create',
      selected_content_id: 2,
      subject: { title: 'WEB', sub: 'World Wide Web!' },
      welcome: { title: 'welcome', desc: 'Hello, React!!!' },
      contents: [
        { id: 1, title: 'HTML', desc: 'HTML is for information' },
        { id: 2, title: 'CSS', desc: 'CSS is for design' },
        { id: 3, title: 'JavaScript', desc: 'JavaScript is for interactive' }
      ]
    }
  }
  

render() { ... else if (this.state.mode === 'create') { _article = <CreateContent onSubmit={function (_title, _desc) { this.max_content_id = this.max_content_id + 1; // 원래 있던 id값을 1 증가 ⭐var _contents = this.state.contents.concat( { id: this.max_content_id, title: _title, desc: _desc } ) this.setState({ contents: _contents }); }.bind(this)}> } }

> 
- 왜 **push**가 아닌 **concat**으로 배열 추가를 했을까?
    - push는 원본배열 값이 바뀜, concat은 원본을 바꾸지 않고 원본을 변경한 새로운 배열 리턴
```javascript
var a = [1, 2];
a.push(3);
console.log(a);
[1, 2, 3]

var a = [1, 2];
var b = a.concat(3);
console.log(a, b);
[1, 2] [1, 2, 3]
=> 원본이 바뀌지 않음

1) shouldComponentUpdate

• App.js에 contents 배열의 값이 바뀐다면 TOC 컴포넌트의 render()를 통해 TOC가 다시 그려짐 But! contents가 바뀌지 않아도 TOC가 또 랜더링 됨
• shouldComponentUpdate() 함수는 컴포넌트의 render함수가 실행될지 실행되지 않을지 결정할 수 있음
• shouldComponentUpdate(newProps, newState)로 사용할 수 있다.

TOC.js

class TOC extends Component {
  shouldComponentUpdate(newProps, newState){ //- TOC 컴포넌트의 Props와 State값이 바뀐 값을 매개변수로 준다
    if(this.props.data === newProps.data){
      return false; // 현재 props와 바뀐 props가 같다면 함수 호출 x -->
    }
    return true; //그렇지 않다면 render() 호출
  }
}  

• return false 면 render 함수 호출x, true면 render가 호출됨
• TOC로 들어오는 data의 props가 바뀌었을 때 render호출, 바뀌지 않았을 때 render 호출x

🔥그렇기 때문에 concat을 쓰지 않고 push를 썼다면? 원본이 바뀌어 이전값, 바뀐값이 같아져서 shouldComponentUpdate()를 쓰지 못함.

2) immutable

• 원본을 바꾸지 않음

  <배열>

  var a = [1, 2];
  var b = Array.from(a);
  console.log(a, b, a===b);
  => [1, 2] [1, 2] false
  

b.push(3); console.log(a, b, a===b); => [1, 2] [1, 2, 3] false

a,b는 내용이 같을 뿐 완전히 다름

- 만약 concat이 아닌 push를 쓰고 싶다면 **Array.from()** 사용
```javascript
var newContents = Array.from(this.state.contenst);
newContents.push({id:this.max_content_id, title:_title, desc:_desc});
this.setState({
  contents: newContents
});

<객체>

• Object.assign() 첫 번째 인자로 빈객체 또는 새로운 객체 넣을 수 있음

  var a = { name: 'egoing' };
  var b = Object.assign({}, a);
  console.log(a, b, a === b);
  => {name: "egoing"} {name: "egoing"} false
  

b.name = 'leezche'; console.log(a, b, a === b); => {name: "egoing"} {name: "leezche"} false

a, b는 내용이 같지만 같은 객체가 아님

```

• immutable.js를 사용하면 모든 명령어들이 원본에 불변하기 때문에 일관된 코드를 사용할 수 있다.

• props, state, event 이 3개가 서로 상호작용하여 애플리케이션의 역동성을 만듦

App.js

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ⭐mode: 'read',
            ⭐welcome: { title: 'Welcome', desc: 'Hello, React!!' },
            subject: { title: 'WEB', sub: 'World Wide Web!' },
            contents: [
                { id: 1, title: 'HTML', desc: 'HTML is for information' },
                { id: 2, title: 'CSS', desc: 'CSS is for design' },
                { id: 3, title: 'JavaScript', desc: 'JavaScript is for interactive' }
            ]
        }
    }

    render() { //어떤 HTML을 그릴것인가를 결정하는 함수
        var _title, _desc = null;
        if (this.state.mode === 'welcome') { //state의 mode값이 'weclome' 일 때 실행
            _title = this.state.welcome.title;
            _desc = this.state.welcome.desc;
        } else if (this.state.mode === 'read') { //state의 mode값이 'read' 일 때 실행
            _title = this.state.contents[0].title;
            _desc = this.state.contents[0].desc;
        }
        return (
            <div className="App">
                <Subject
                    title={this.state.subject.title}
                    sub={this.state.subject.sub}>
                </Subject>
                <TOC data={this.state.contents}></TOC>
                  <Content title={_title} desc={_desc}></Content>
            </div>
        );
    }
}

mode값이 welcome, read에 따라 실행되는 코드가 바뀜

props, state값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render함수가 다시 호출. 그리고 render함수 하위에 있는 컴포넌트들도 다시 호출** (화면 다시 그려짐)**

React에서는 링크 클릭시 event를 발생시켜 state, props를 변경함으로써 페이지 전체가 re-rendering

2. 이벤트 설치

...
return (
    <div className="App">

        {/* <Subject
            title={this.state.subject.title}
            sub={this.state.subject.sub}>
        </Subject> */}

        <header>
            <h1><a href="#" onClick={function (e) {
                e.preventDefault();
                //이벤트가 발생한 태그의 기본 동작방법을 못하게 막는 코드
            }}>{this.state.subject.title}</a></h1>
            {this.state.subject.sub}
        </header>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
    </div>
);

3. 이벤트에서 state 변경하기

• 링크 클릭 시 App 컴포넌트의 mode 값을 welcome으로 바꿔보기
• this.state.mode = 'welcome'; => ❌오류❌

<header>
    <h1><a href="#" onClick={function (e) {
        e.preventDefault();
        this.state.mode = 'welcome'; 
    }}
</header>

• 위 코드로 작성시 2가지 문제점 발생 1) 이벤트가 호출됐을 때 실행되는 함수 안에서는 this의 값이 컴포넌트 자기 자신을 가리키지 않고 아무 값도 세팅되어 있지 않음. => 함수가 끝난 직후 bind() 함수 추가 2) 동적으로 state값을 바꿀때는 setState ()사용

<header>
    <h1><a href="#" onClick={function (e) {
        e.preventDefault();
        this.setState({
            mode: 'welcome'
        });
    }.bind(this)}>{this.state.subject.title}</a></h1>
    {this.state.subject.sub}
</header>

❗ 하지만 render() 함수 밖에서 onClick 이벤트 함수를 화살표함수로(ES6) 만들면 bind() 없이 this 사용 가능

4. 컴포넌트 이벤트 만들기

• App.js에서 이전에 작업한 주석처리 했던 Subject 컴포넌트 다시 살리고 Subject.js에서 갖고 온 코드는 지우기

  1) Subject 컴포넌트에 이벤트 설치해보기

App.js

...
<Subject
    title={this.state.subject.title}
    sub={this.state.subject.sub}
    //onChagePage 이벤트 만들고, 링크 클릭시 함수가 실행되게 하기
    onChangPage={function () {
        this.setState({
            mode: 'welcome' // 클릭시 mode값을 welcome으로 바꾸기
        });
    }.bind(this)}>
</Subject>

Subject.js

<header>
    <h1><a href="#" onClick={function (e) {
        e.preventDefault();
        this.props.onChangePage();
        //Subject 컴포넌트에 onChangePage로 함수가 전달되는데 그 함수를 호출하는 코드
    }.bind(this)}>{this.props.title}</a></h1>
    {this.props.sub}
</header>

2-1) TOC 컴포넌트 클릭 시 state의 mode를 read로 바꾸기

App.js

...
//onChangePage이벤트 만들기
<TOC onChangePage={function (id) { 
    this.setState({
        mode: 'read'
    });
}.bind(this)} data={this.state.contents}></TOC>

TOC.js

while (i < data.length) {
    lists.push(
        <li key={data[i].id}>
            <a href={"/content/" + data[i].id}
                onClick={function (e) {
                    e.preventDefault();
                    this.props.onChangPage();
                }.bind(this)}
            >{data[i].title}</a>
        </li>);
    i = i + 1;
}

2-2) 내가 선택한 내용을 본문에 나타내기

App.js

this.state = {
    mode: 'read',
 ⭐selected_content_id = 2, // 기본적으로 2번 contents가 선택되게 함
    welcome: { title: 'Welcome', desc: 'Hello, React!!' },
    subject: { title: 'WEB', sub: 'World Wide Web!' },
    contents: [
        { id: 1, title: 'HTML', desc: 'HTML is for information' },
        { id: 2, title: 'CSS', desc: 'CSS is for design' },
        { id: 3, title: 'JavaScript', desc: 'JavaScript is for interactive' }
    ]
}

render() {
    var _title, _desc, _article = null;
    if (this.state.mode === 'welcome') {
        _title = this.state.welcome.title;
        _desc = this.state.welcome.desc;
    }⭐ else if (this.state.mode === 'read') {
        var i = 0;
        while (i < this.state.contents.length) {
            var data = this.state.contents[i]; //현재 순번에 해당되는 contents를 data변수에 지정
            if (data.id === this.state.selected_content_id) {
                _title = data.title;
                _desc = data.desc;
                break; //조건문을 끝내는 코드
            }
            i = i + 1;
        }
    }
    return (
        <div className="App">
            <TOC onChangePage={function (id) {
                this.setState({
                    mode: 'read',
                    selected_content_id: Number(id)
                    // 인자가 문자로 넘어가기 때문에 숫자로 바꿔주는 Number 명령어를 사용
                });
            }.bind(this)} data={this.state.contents}>
            </TOC>
        </div>
    );
}

TOC.js

while (i < data.length) {
    lists.push(
        <li key={data[i].id}>
            <a href={"/content/" + data[i].id}
                data-id={data[i].id} // 
                onClick={function (e) {
                    e.preventDefault();
                    this.props.onChangPage(e.target.dataset.id);
                    //onChangePage 함수를 호출하는 코드의 인자로 e.target에서 얻어진 id 값을 넘겨줌
                }.bind(this)}
            >{data[i].title}</a>
        </li>);
    i = i + 1;
}

• 저기서 e.target은 a태그를 가리키며, dataset을 통하여 data-id값을 알아낼 수 있음

• 🔥하위가 상위에게 명령할 땐 이벤트를 실행해 state 값 변경 가능

• Props: 사용자가 컴포넌트를 사용하는 입장에서 중요
• State: Props의 값에 따라 내부의 구현에 필요한 데이터, 외부에서 알 필요 없는 정보 은닉

2. State 사용

<Subject title="WEB" sub="world wide web!"></Subject>

위 props의 값들이 하드코딩되어 있는 걸 state로 만들고, state값을 Subject의 props로 전달하는 걸로 코드 개선

App.js

class App extends Component {
//state값을 초기화하는 코드, render 함수보다 먼저 실행
    constructor(props) {
        super(props);
        this.state = {
            subject: { title: 'WEB', sub: 'World Wide Web!' }
        }
    }

    render() {
        return (
            <div className="App">
                <Subject title={this.state.subject.title}
                sub={this.state.subject.sub}>
                </Subject>
            </div>
        );
    }
}

이렇게 코드를 개선하면 외부에서는 state값에 subject가 있는지 없는지 알 수 없음.

3. key

• 여러 개의 element를 자동으로 생성시 key라고 하는 props를 가져야 함
• 각각의 목록을 다른 것들과 구분할 수 있는 식별자를 key={} 안에 넣어주면 됨

App.js

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            subject: { title: 'WEB', sub: 'World Wide Web!' },
            contents: [
                { id: 1, title: 'HTML', desc: 'HTML is for information' },
                { id: 2, title: 'CSS', desc: 'CSS is for design' },
                { id: 3, title: 'JavaScript', desc: 'JavaScript is for interactive' }
            ]
        }
    }

    render() {
        return (
            <div className="App">
                <Subject
                    title={this.state.subject.title}
                    sub={this.state.subject.sub}>
                </Subject>
                <TOC data={this.state.contents}></TOC>
            </div>
        );
    }
}

TOC.js

class TOC extends Component {
    render() {
        //글 목록 생성하기
        var lists = [];
        var data = this.props.data
        var i = 0;
        while (i < data.length) {
            lists.push(<li key={data[i].id}><a href={"/content/" + data[i].id}>{data[i].title}</a></li>)
            //<li>태그가 생성되어 lists 배열에 담김
            i = i + 1;
        }
        return (
            <nav>
                <ul>
                    {lists}
                </ul>
            </nav>
        );
    }
}

• state 와 props의 관계
  • 부모인 App은 state를 사용, 자식에겐 props로 전달
    • 자식 컴포넌트는 props를 읽기만 하고 직접 수정할 수 없음
    • state는 컴포넌트 내부에 선언, 값 변경 가능

pure.html

<html>
    <body>
        <header>
            <h1>WEB</h1>
            world wide web!
        </header>

        <nav>
            <ul>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">JavaScript</a></li>
            </ul>
        </nav>

        <article>
            <h2>HTML</h2>
            HTML is HyperText Markup Language.
        </article>

    </body>
</html>

** HTML로 짠 코드를 React로 정리해보기**

App.js

class Subject extends Component {
    render() {    // 일반적인 함수는 앞에 function이 붙지만 class에 소속된 함수는 생략
        return (
            <header>    //컴포넌트를 만들 때는 반드시 하나의 최상위 태그로 시작해야 함
                <h1>WEB</h1>
                world wide web!
            </header>
        );
    }
}

class TOC extends Component {
    render() {
        return (
            <nav>
                <ul>
                    <li><a href="1.html">HTML</a></li>
                    <li><a href="2.html">CSS</a></li>
                    <li><a href="3.html">JavaScript</a></li>
                </ul>
            </nav>
        );
    }
}

class Content extends Component {
    render() {
        return (
            <article>
                <h2>HTML</h2>
                HTML is HyperText Markup Language.
            </article>
        );
    }
}

/* 컴포넌트 이름에만 집중하게 함으로써 복잡도를 획기적으로 낮춤
(pure.html 코드보다 훨씬 코드가 간편해짐) */

class APP extends Coponent {
    render() {
        return (
            <div className="App">
                <Subject></Subject>
                <TOC></TOC>
                <Content></Content>
            </div>
        );
    }
}

실행결과 <div class="App"> 안에 <header>, <nav>, <article> 태그가 다 들어가 있음

❗ 위에 코드는 HTML 같지만 자바스크립트 (JSX)

• JSX로 코드 작성시 Creat React App이 알아서 자바스크립트 코드로 변환
  • 태그를 열었으면 꼭 닫아야 함
  • 두 개 이상의 태그는 무조건 하나의 태그로 감싸야 함 간단하게는 <div> 태그로, 복잡하다면 <Fragment>태그로 감싸기

2. props

• 어떠한 값을 컴포넌트에게 전달할 때 사용

  1) props 사용법

• React 매뉴얼 Components and Props

  class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
  }

  자신이 받아온 props값은 this로 조회 가능

2) props 사용하기

App.js

class Sample extends Component {
    render() {
        return (
            <header>
                //title, sub값을 받고 싶으면 props라는 파라미터를 통해 조회 가능
                <h1>{this.props.title}</h1>
                {this.props.sub}

            </header>
        );
    }
}

class APP extends Coponent {
    render() {
        return (
            <div className="App">
                //Subject 컴포넌트를 사용할 때 title, sub 같은 속성을 추가
                <Subject title="WEB" sub="world wide web!"></Subject>
            </div>
        );
    }
}

Subject 컴포넌트는 언제나 똑같은 값을 갖고 있었지만 title, sub값에 따라 달라짐 (재사용성 높아짐)

3. 컴포넌트 파일로 분리하기

1. src 디렉터리에 components 디렉터리 만들기
2. components 디렉터리 안에 각각의 컴포넌트 별로 파일 만들기

TOC.js

// Component를 TOC.js 안에 쓰기 위해 리액트를 불러오는 코드
import React, { Component } from 'react';

class TOC extends Component {
    render() {
        return (
            <nav>
                <ul>
                    <li><a href="1.html">HTML</a></li>
                    <li><a href="2.html">CSS</a></li>
                    <li><a href="3.html">JavaScript</a></li>
                </ul>
            </nav>
        );
    }
}

export default TOC;  // TOC 컴포넌트를 가져다 사용할 수 있는 코드

App.js

//컴포넌트를 App.js에서 불러오는 코드, 상단에 코드 추가 후 각각의 클래스들 지우기
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";

리액트가 없다면?

• 작성한 태그가 많아지면 코드가 한눈에 들어오지 않음

  사용자 정의 태그 Component로 작성

• 가독성
• 재사용성 높아짐
• 유지보수를 쉽게 할 수 있음

2. 개발환경 종류

https://reactjs.org/

1) Online Playgrounds

컴퓨터에 세팅할 수 없는 환경이라면 **CodeSandbox **이용

2) Add React to a Website

부분적으로 React 기능을 추가하고 싶을 때 서비스 추가 (🚨 초급사용자가 사용하기에 까다로울 수 있음)

3) Create a New React App

Toolchain: 여러가지 개발환경, 도구를 모아놓은 것 create-react-app

3. 개발환경 준비

1) node.js 설치

• Node.js 공식 홈페이지
• npm -v : 설치 확인

2) Create React App 설치

- npm을 이용한 방법

• npm install -g create-react-app
• create-react-app -V : 설치 확인. 설치한 프로그램의 버전이 나오면 성공

- npx을 이용한 방법 (공식적으로 권장하는 방법)

• npx create-react-app

👉 npm과 npx의 차이: npm은 설치하는 프로그램, npx는 임시로 설치해서 실행 후 지워지는 프로그램

4. 개발환경 구축

리액트 개발환경을 만들기 위해 react-app 폴더 만들기

• cd 경로
• create-react-app . : 현재 디렉토리가 create react app에 의해 개발환경이 됨

5. 샘플 웹앱 실행

Visual Studio Code 에디터 이용

• 터미널 띄우기 : View - Terminal
• npm (run) start : 실행
• ctrl + c : 실행 종료

6. 디렉터리 구조 파악

1) JS

• public - index.html react 실행 시 나오는 첫 화면. 컴포넌트가 <div id="root"></div> 태그 안에 들어감
• src - index.js document.getElementById('root') : id 를 이용해 index.html 에 진입. <App /> : 리액트를 통해 만든 사용자 정의 태그 (컴포넌트) import App from './App' : App 컴포넌트를 구현한 걸 불러옴 (App.js)
• src - App.js App 컴포넌트로 실제 구현한 파일

2) CSS

• import './App.css' css 파일 불러오기

7. 배포

• 터미널에 npm run build 명령 실행 시 디렉터리에 build 파일 생성
• 공백과 같은 불필요한 내용 없어짐 = 용량이 줄어듦