React 서버 배포, React 기초 (React.js)

# IDLE: vscode

 

* 다른 사람의 react파일을 가져올 경우 npm install을 하면 package-json파일과 package-lock.json파일을 기반으로 필요한 파일(라이브러리 등)을 설치해서 사용할 수 있음

 

#01. 리액트 서버 배포해보기

 

[리액트 배포하기]

배포: 서버에 올리는 것은 배포의 한 과정. 개발하고 있는 환경들을 실제 운영서버로 올리기 위해 build하고 build한 결과물을 운영 서버에서 접속할 수 있게 하는 일련의 과정. 테스트 또한 해당 과정에 포함됨.

 

1. build하기 

코드는 소스. 실제 서버에서 돌아갈 수 없음. build 해야함.

npm run build

 

위 코드 실행하면 build파일 생성됨. 

 

2. nginx 다운로드

- nginx: 웹 서버 소프트웨어. 리눅스 기반. 이벤트 방식. 가볍다. (아파치는 스레드 방식)

https://nginx.org/en/download.html

- window stable 버전 다운받아서 압축 풀기

 

3. 내부 살펴보기

/conf/nginx.conf 설정파일. 기본적으로 아래 경로의 파일이 실행된다.

 

* 실무에서는 서버가 분리되어 있음

- 실습 환경에서는 서버 한 대에 자바와 톰캣을 함께 설치하고 그 안에서 app실행 시킴

- 실제 회사에서는 웹 서버와 WAS환경이 따로 떨어져 있음(웹 서버는 아파치, WAS는 톰캣과 같은 방식으로)

(HTML, CSS, JS는 아파치, JAVA, JSP등은 was에서 관리)

- 실제 사용자는 아파치로 접속하게 됨  -> 아파치에서 톰캣 서버로 요청을 보내는 등 역할이 분할 되어있음

- 아파치는 정적인 것만 처리, was는 서버에 관련된 것 관리

 

 

4. 실행

지금은 localhost에 배포함

ec2 배포 방식: ec2에 nginx설치하고 해당 ec2에서 배포를 하는 것.

build한 파일을 html경로 안에 이동시켜주면 개발한 코드를 서버에 올릴 수 있음

 

 

#02. 리액트 활용하기

 

[여러 개의 state값 변경]

    // const [name2, setName2] = useState('');
    // const [gender, setGender] = useState('');
    // const [birth, setBirth] = useState('');
    // const [bio, setBio] = useState('');

    // const onChangeName = (e) => {
    //     setName2(e.target.value);
    // };
    // const onChangeGender = (e) => {
    //     setGender(e.target.value);
    // };
    // const onChangeBirth = (e) => {
    //     setBirth(e.target.value);
    // };
    // const onChangeBio = (e) => {
    //     setBio(e.target.value);
    // };

    // 위처럼 각각 처리해도 되지만 아래와 같이 한번에 처리 가능함
    const [state, setState] = useState({
        name: '',
        gender: '',
        birth: '',
        bio: '',
    });

    const handleOnChange = (e) => {
        console.log('현재 수정 대상:' + e.target.name);
        console.log('수정값: ' + e.target.value);
        setState({
            ...state,
            [e.target.name]: e.target.value,
        });
    };

 

아래는 return 안의 body 안 내용

<div>
                <input
                    type="text"
                    name="name"
                    value={state.name}
                    onChange={handleOnChange}
                    placeholder="이름"
                />
            </div>
            <div>
                <select
                    value={state.gender}
                    name="gender"
                    onChange={handleOnChange}
                >
                    <option key={''}></option>
                    <option key={'남성'}>남성</option>
                    <option key={'여성'}>여성</option>
                </select>
            </div>
            <div>
                <input
                    type="date"
                    name="birth"
                    value={state.birth}
                    onChange={handleOnChange}
                />
            </div>
            <div>
                <textarea
                    value={state.bio}
                    name="bio"
                    onChange={handleOnChange}
                />
            </div>

 

* 전개 연산자를 사용하는 이유: 아래와 같이 값을 변경하게 된다면, state 객체 자체의 주소값이 변경되지 않으므로(객체 안에서 각 값을 가리키는 주소값이 변경될 뿐 객체 자체의 주소 변경은 없음) setter를 사용해도 랜더링이 일어나지 않음.

        // 리액트에서 값의 변화를 인지해야 랜더링이 새로 발생하기 때문

        // 따라서 아래와 같이 객체 재정의 하지 않고 전개 연산자를 사용해서 재정의를 하는 것임.

        state[e.target.name] = e.target.value;

        console.log(state);

        setState(state);

 

 

* 아래 확장프로그램 추가하면 실시간으로 변경된 state 값을 확인할 수 있음. 개발자 도구에서 실시간 정보 확인 가능

 

[컴포넌트 간의 state변경 및 리랜더링]

- 부모 컴포넌트의 state가 바뀌면 해당 state를 상속받은 자식 컴포넌트의 state도 함께 변경됨

// 첫 글자가 대문자면 컴포넌트

function Viewer({ number }) {

    console.log('Viewer 랜더링');

    return Viewer;

    // return <div>{number % 2 === 0 ? <h3>짝수</h3> : <h3>홀수</h3>}</div>;

}

// 아래 return속 내용

<h2>{number}</h2>

            <Viewer number={number} />

            <div>

                <button onClick={onDecreaseFunc}>-</button>

                <button onClick={onIncreaseFunc}>+</button>

            </div>

- 부모 컴포넌트가 랜더링이 되면 props와 관계 없이 자식 컴포넌트도 함께 다시 랜더링됨

* use~~~ : 리액트 훅: 리액트 컴포넌트 기능들을 이용하도록 도와주는 함수 

 

[Ref 사용하기]

Ref를 이용해서 작성완료를 누르면 input란에 내용 사라지게 만들기

- Ref import

import { useState, useRef } from 'react';

 

- Ref 코드 추가

const handleOnClick2 = (e) => {

        alert(text2);

        textRef.current.value = '';

    };

{/* ref사용하기 (return 안의 내용)*/}

            <div>

                <input value={text2} ref={textRef} onChange={handleOnChange2} />

                <button onClick={handleOnClick2}>작성 완료</button>

            </div>

 

 

[Hooks]

- 데이터 관련: useState, useCallback, useMemo, useReducer

- 메서드 관련: useRef, useImperativeHandle

- 생명주기 관련: useEffect, useLayoutEffect

- 데이터 공유: useContext

 

[map 함수]