React 기초 - 제로초님

웹 게임을 만들며 배우는 React - 조현영님

React를 쓰는 이유

• 웹에서 앱과 같은 사용자 경험을 만들어줌

• 데이터 처리(싱크로나이즈)

• 컴포넌트 재사용

React

React, react-dom

• 컴포넌트들을 렌더링할 루트(div)가 필요

• 상태(state) = 바뀌는, 바뀔여지가 있는 부분

• 클래스 사용 시 클래스1 === 컴포넌트1

• class 대신 className For 대신 htmlFor html과 헷갈릴 수 있어서 구분

JSX

• babel 사용 <script type="text/babel">

• JSX : JS + XML

• (html이 아니라 xml이기 때문에 싱글 태그도 닫는 태그를 꼭 넣어주어야함)

• babel의 역할 = createElement -> <>

• 컴포넌트는 대문자로 시작, 태그는 소문자

• <></> : 최상단에 들어가는 껍데기(div대신)

• value와 onChange는 세트(or defaultValue)

Class

• DOM에 직접 접근하고 싶을때는 ref사용

input;
...
render() {
    return (
        <input
            ref={(c) => {this.input = c; }} 
        />
    )
}

setState

• 예전 값으로 새로운 state를 만들때는 함수 사용

this.setState((prevState) => {
    return {
        result: prevState.value + '정답',
        first: Math.ceil(Math.random() * 9 ),
        second: Math.ceil(Math.random() * 9 ),
        value: '',
    };
});

• setState는 비동기

• setState가 실행될 때 마다 render만 같이 실행됨(따라서 따로 뺄 수 있는건 빼주는게 좋음)

React Hooks

• 함수 컴포넌트 : setState나 ref를 안쓰는 경우에 썼었음

• Hooks = 함수 컴포넌트 + state, ref ...

• setState 분리

const GuGuDan = () => {
    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('');
}

• state가 바뀔 때 마다 함수가 다시 실행되므로 느릴 수 있음(렌더링)

• setState는 비동기이기 때문에 모아서 한번에 처리됨

웹팩

• 스크립트의 중복을 최소화 하기 위해 웹팩 등장

• node.js는 자바스크립트(웹팩) 실행기

• 웹팩 셋팅

• npm init - npm i react react-dom - npm i -D webpack webpack-cli

• webpack.config.js

• 플러그인들의 모음이 프리셋

• browserslist

const path = require('path');

module.exports = {
    name: 'wordrelay-setting',
    mode: 'development', // 실서비스 : production
    devtool: 'eval',
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    entry: {
        app: ['./client'],
    }, // 입력(불러오는 파일은 같이 입력됨)
    module: {
        rules: {
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets:[
                    ['@babel/preset-env', {
                        targets: {
                            browsers: ['> 1% in KR'], // 지원 브라우저 지정가능
                        },
                        debug: true,
                    }], 
                    '@babel/preset-react'
                ],
                plugins: [''],
            },
        },
    },
    plugins: [],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
    }, // 출력
};

• client.jsx

  const React = require('react');
  const ReactDom = require('react-dom');
  const WordRelay = require('./WordRelay');
  
  ReactDom.render(<WordRelay />, document.querySelector('#root'));

• index.html

  <div id="root"></div>
  <script src="./dist/app.js"></script>

• 클래스(컴포넌트) jsx로 쪼개기

• 웹팩 실행

  1. package.json - script

  2. npx webpack

react-refresh

• 핫 리로딩 기능, 변경사항을 감지해서 반영해줌.

  • 리로딩과는 다름(리로딩은 새로고침으로 데이터가 날아감)

"dev": "webpack serve --env development"
// script 서버실행

"react-refresh": "^0.11.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
"webpack-dev-server": "^4.7.4"
//설치

• 추후 webpack.config.js 링크

map

• 리액트에서의 반복문

• key값은 고유해야함(i는 쓰면 안됨)

{[
    { fruit:'사과', taste:'맛있다' },
    { fruit:'사과', taste:'맛없다' }
].map((v, i) => {
    return (
        <li key={v.fruit + v.taste}><b>{i + v.fruit}</b> - {v.taste}</li>
    );
})}

props

props 공식문서

React 성능향상

• React DavTools

• class 사용 시 shouldComponentUpdate(nextProps, nextState, nextContext)

  • true면 렌더링, false면 렌더링X

  • 렌더링 타이밍을 선택할 수 있음

• class 사용 시 PureComponent 사용

• hooks 사용 시 React.memo 사용

  • 컴포넌트를 memo()로 감싸줌

• 자식컴포넌트가 모두 PureConponent or memo()면 부모도 적용 가능

• props는 부모가 바꿔야함. 자식X

  • 바꿔야 한다면 자식 컴포넌트에서 props를 state에 넣어줌

• jsx안에서는 for, if 사용 불가

  • 삼항연산자로 작성

• hooks에서는 this의 속성들을 Ref로 표현

• 비동기함수에서 바깥쪽 변수를 참조하면 클로저 발생

• useMemo : 복잡한 함수 결과값을 기억

• useCallback : 함수 자체를 기억

  • 함수 자체의 생성이 너무 오래 걸릴 경우 기억

• useRef : 일반 값을 기억

state와 ref의 차이

• state는 set하게 되면(바뀌면) 다시 렌더링

• ref는 바뀌어도 렌더링 되지 않음

  • ref는 항상 ref.current로 접근

라이프사이클 LifeCycle

Class

• componentDidMount() : 처음 컴포넌트 렌더가 성공적으로 실행된 직후 (비동기요청을 많이함)

• componentWillUnmount() : 컴포넌트가 제거되기 직전 (비동기요청 정리)

  • 위 두가지가 보통 쌍으로

• componentDidUpdate() : 리렌더링 후

hooks

• useEffect() : 두번째 인자에 들어가는 값이 바뀔 때마다 함수 내용이 다시 실행됨

  • 아무런 값도 안들어가면 맨 처음에만 실행되고 다시 실행되지 않음

  • useEffct를 여러번 쓸 수도 있음

useEffect(() => { // componentDidMount, componentWillUnmount 역할(1대1 대응은 아님)
    return () => { // componentWillUnmount 역할
        
    }
}, []) // closer 해결(배열에 넣은 값들이 바뀔때 useEffect가 실행)

useReducer (hooks)

• state는 직접 변경 불가능

  • 이벤트 발생을 통해 action을 dispatch해서 변경

  • 어떻게 바꾸는지는 reducer에 기록

const initialState = {
    winner: '',
    turn: 'O',
};

const SET_WINNER = 'SET_WINNER';

const reducer = (state, action) => {
    switch (action.type) {
        case SET_WINNER:
            return {
                ...state, // 기존 state 얕은 복사
                winner: action.winner,
            }
    }
};
.
.
.
    const onClickTable = useCallback(() => {
        dispatch({ type: SET_WINNER, winner: 'O' }); // action 객체를 dispatch
    }, []);