43일차(1)/React(2) : React App 생성, React 기초

43일차(1)/React(2) : React App 생성, React 기초

 

* React JS 홈페이지 : https://ko.reactjs.org/

- 어떤 동작을 하는 유저 인터페이스를 만들려면 javascript 가 필요하다.
- React는 이 javascript를 좀더 체계적으로 쉽게, 그리고 대규모로 만들더라도 체계적인 구성으로 만들 수 있도록 도와주는 라이브러리!

 

- React 와 비교되는 비슷한 js 라이브러리: Angular, Vue, React 등

- 자주 쓰이는 순서는 react > vue > angular

 

- 클래스 : 객체 생성을 위한 설계도. 상속받아서 사용 가능. 안에 메소드가 있음 (java에서의 클래스와의 공통점)

 

- jsx의 구조를 보면 javascript임에도 java같이 생긴 부분이 있다.
- javascript 의 좀 더 확장된 개념이라고 보면 된다.

- jsx : javascript + xml 이 함께 존재하는것.

- 하지만 이 jsx는 웹브라우저가 해석을 못한다. 에러로 인식!
- jsx로 만든 파일을 컴파일해서 웹브라우저가 인식할 수 있는 javascript로 바꾸어야 한다.
 바꾼 다음에 웹브라우저에 로딩을 해야만 페이지가 작동하고 함수가 실행되는 것
- jsx→javascript 로 바꿔주는 컴파일러가 필요하다.

  효과적으로 개발하고, 컴파일링하는 환경을 만들어주는 시스템이 필요.

 

- node.js가 나오기 전에는 javascript로 서버 프로그래밍을 하는 것은 불가능했다.

 (node.js도 언어이다. java, python, c, c++, 등과 같이... 단 javascript로 된 언어인 것!)

- 하지만 이제 javascript 가 브라우저를 탈출했다! 탈출해서 pc를위한 앱을 만들 수 있게 된 것이다.
- 아직까지 node.js에는 어떤 UI는 없다. 그냥 명령 프롬프트 창에서 사용한다.

  (원래 모든 어플리케이션이 ui가 있는 것은 아니다.)

 

- node js (언어) 를 설치해서,

- 이 node 환경 안에서 create-react-app (node.js라는 언어로 만든 응용프로그램) 을 만든 것이다.

 

create-react-app hello
- 현재 위치한 폴더에 react 앱인 hello 폴더(프로젝트)를 만들어주는 명령어.
- node.js를 사용해 react 개발 환경을 자동으로 구성해주는 것이다! 이것이 create-react-app 이라고 할 수 있다.


- node js로 만든 application은 어디에서 찾을 수 있나? → npmjs.com
- 어떻게 설치하나? → npm install -g app이름 (or npx)
- npm : node package manager

 

---

 

- 폴더 하나 새로 만들 예정
cd C:\acorn202210\react_test 로 이 위치로 이동(cd=change directory)

 

- nodejs에서 hello2라는 프로젝트를 만들어주는 것이다.

 

- jsx라는 프로젝트를 만들어서 컴파일해서(변환해서)

 웹브라우저가 해석 가능한 javascript로 만들어준다.(지금은 알아듣지 못하므로)

- create-react-app 으로 만드는 것은 그런 목적을 가진 환경이다.

 

- 앱이 어떻게 보이는지 웹브라우저에 로딩을 해서 테스트해야 한다.

- 이클립스에서 하려면 매우 불편할 것이다. 파일완성→컴파일→톰캣 서버연결→전달 등등의 과정이 필요하므로...

- 이 React 개발환경은 서버 환경도 갖추고 있다.

  톰캣 서버를 따로 돌리지 않고 테스트 가능하도록 자체 서버 환경도 갖추고 있다.(node.js로 만든 서버이다)

- 실시간 라이브로 컴파일해서 바로 웹브라우저에 로딩을 해서 개발자들이 결과를 확인할 수 있도록 도와주는 환경이다.

- 실행하면 서버가 시작되고, 작성한 내용을 라이브로 컴파일해서 웹브라우저에 전송해준다.

 

- 이런 환경을 web pack이라고한다.(웹환경이 내장되어 있다)

 

 

- 폴더 생성 완료. 그안에서 몇가지 커맨드를 실행할 수 있다.

 

npm start : 개발환경 시작

npm run build : 결과물을 얻어내려면 빌드를 해서 배포해야 함

npm test : 테스트하기

npm run eject : 내부 설정을 빼내고 싶을 때

 

- 명령 프롬프트에서 cd hello2 로 폴더 안으로 들어간 위치에서
C:\acorn202210\react_test\hello2> npm start 를 입력하면 시작되어 브라우저가 열린다.

- 서버환경. 포트는 3000번을 사용한다.(기본값)

 

- 브라우저에 index에 해당하는 웰컴 페이지가 나온다.

 

- 소스를 보면 javascript를 로딩하는데, 이미 한번 해석되어서 javascript로 변환이 된 것이다.

- 이 변환된 javascript를 웹브라우저에 로딩한 것이다. 이미 javascript 가 div 안에 조작을 가하고 있다.

 

- 페이지 소스: 최초 로딩 시점에서 브라우저가 읽은 원본 소스 

- 검사: 브라우저가 변화를 가한 결과

 

- javascript가 관여하여 바꾼 페이지의 내용을 볼 수 있다!

 

---

 

- 서버 개발을 위한 개발 툴은? 우리는 VS Code 사용예정

 

- 보통은 src 폴더 안에 코딩한다.

 

App.js (기본 생성)

- 이 박스가 jsx객체라고 할 수 있다.

- 괄호() 로 감싸져 있는 html 마크업이다. (필요시 javascript 코딩도 할 수 있다)

 

export default App; : App함수를 수출하기(밖으로 빼내기)

- 브라우저로 내보내려면 필수적인 코드!

 

- src폴더안에 index.js 가 있다. 여기서 App.js를 import해서 사용하고 있다.

 

- Rendering렌더링 : 비어있는 곳에다가 뭔가 문서객체를 채워넣는 것이라고 생각하면 된다.

 ex) id가 root인 div와 같은 것

 

 

- 기본 html문서는 public/index.html 에 있다. (기본 index.jsp라고 생각하면 된다)

 

- node는 public/index.html을 해석해서 응답한다.

- 내용 그대로 응답하지는 않는다. node서버가 해석하는 부분이 있다. (초록색박스 부분)

  jsp에서 EL로 context 경로를 출력하듯이!

 

 

- 위 세가지 파일의 관계를 기억하기

- App.js→index.js→index.html 로 내용을 가져다 쓴다. 이 결과가 클라이언트 브라우저에 출력되는 것이다.

 

bundle.js

- 웹브라우저가 이해할 수 있는 javascript 로 작성된 내용이 들어 있다.

- react는 이것을 바꿔주는 역할을 하는 환경이다.

 이 bundle.js를 만들어주는것이 목적이다.

- 코드를 즉석에서 테스트할 수 있도록 우리가 만들때도 이 번들로 전환해서 보여준다.

 

- 원래 html 에서 클래스 작성은 div class="App"

- jsx에서는 div className="App" → 컴파일하면 자동으로 위와 같이 바뀌는데 왜 이렇게 써야 하는지?

 

- javascript 영역에서 class는 예약어이다.(function과 마찬가지로)

- className이라고 쓰지 않으면 예약어로 인식되어서 컴파일시 오류를 일으킨다.

- jsx는 전체를 문자열(``) 로 인식하도록 적어주지 않았기 때문에,

 예약어로 인식되지 않게 하기 위해서 className 으로 적어주기로 약속한 것!

 

---

 

app.js

import logo from './logo.svg';

//css를 로딩시킬때는 import 하는것만으로도 로딩이 가능하다.
import './App.css';

/*
  App이라는 이름의 함수가 리턴하는 jsx 객체를 이용해서 화며 구성을 한다.  
*/
function App() {
  //myName 이라는 변수를 만들고 초기값 대입
  let myName="바나나";
  
  //jsx 영역 안에서 주석 작성은 조금 불편하다.
  return (
    <div>
      {
        //이렇게 한 줄 주석을 만드는 방법
      }
      
      {/*이렇게 한 줄 주석을 만드는 방법*/}

      {/*
        여러줄 주석
        하나
        둘
      */}

      {/* ctrl+slash를 활용해서 주석 영역을 편리하게 만들 수 있다. */}
      
      <h1>인덱스 페이지 입니다.</h1>      
      <p>내이름은 <strong>{myName /*주석*/}</strong> </p>
      <img src={logo} alt="React 이미지" />
    </div>
  );
}

//App.js를 어디에선가 import 하게 되면 여기에 정의된 함수를 default로 사용하게 한다.
export default App; //App함수를 수출하기(밖으로 빼내기)

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

//html 문서에서 id가 root인 요소에 렌더링할 준비 하기
const root = ReactDOM.createRoot(document.getElementById('root'));

//import 한 App.js를 활용해서 실제 렌더링 하기
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

- 회전하는 로고 이미지, 배경 색상, .. 등등을 App.css에 넣어두었다.

- 이 css를 로딩하고싶으면 import만 하면 된다.

 

- 변수 안에 있는 내용을 return에서 참조한다. {} 안에 넣어주면 된다.

- { } 안은 javascript 영역이다.

 

- div 안에서는 // 으로 주석 처리 불가능. <!-- --> 도 안 된다.

 

- div의 { } 안에서는 /* */ 으로 주석처리 가능

 

 

- {} 안에서 // 한줄 주석을 사용하기 (한줄)

- {} 안에서 /* */ 주석을 사용하기 (한줄, 여러줄)

 

- ctrl+/ 를 누르면 자동으로 { /* */ }가 만들어진다.

 

 

- 명령 프롬프트에서 ctrl+c 하면 서버가 꺼진다.

- 브라우저를 새로고침하면 서버에 연결되어 있지 않다고 나옴!

 

---

 

- 새 react 폴더 만들기 create-react-app basic

- 그 폴더로 들어가서 npm start

 

- 생성시 그 폴더 자체로 깃 저장소까지 만들어준다.(readme.md도 있다)

 

- 만들었을 때의 basic 폴더 자체가 commit 을 1번 한 깃 저장소이다.

 

- git bash로 확인하기. create로 만들면서 commit을 한번 진행한 것!

 

package.json : 외부 라이브러리를 모아놓은 것

- 기본으로 만들어진 json파일도있다.(key:value, ...) 로 저장되어 있다.

- xml이나 json문서는 어플리케이션이 해석하는 문서이다.

 

- start: 리액트를 시작한 것

- dependencies: Web pack 을 구성하기 위해 필요한 라이브러리의 목록

  (nodejs 외부 라이브러리. 이것까지 폴더 생성시에 함께 설치된 것이다.)

 

- 이 외부 라이브러리는 자동 다운로드되어서

  node_modules 폴더에 들어가 있다 (외부 nodejs 모듈)

 

- 외부 라이브러리 파일이 너무 많기 때문에... gitignore에 들어가 있다.

 깃허브 업로드시 배제시키도록 표시된 것!

 

- 즉, 깃허브에서 다운받을 때는 해당 외부 라이브러리들이 없다.

 이 경우 npm install 하면 이 의존 dependencies에 들어있는 것을 자동으로 설치해준다.

 

- 생성될 때 같이 만들어지는 각각의 폴더, 파일이 어떤 역할을 하는지 알아두기.

- src가 메인 코딩 공간이라고 생각하면 된다.

 

 

---

 

- CSS 적용시 public/index.html 에 적용해도 된다. 단 이렇게하면 모든 영역에 적용된다.

- import해서 쓰면 된다.

 

- index.html 에 bootstrap cdn 을 넣고, index.jsp에서 class 부여해서 css적용하기

 

 

** VS Code에서 git 적용하기

 

- 깃 환경으로 가면 변화된 내용을 볼 수 있다.

 (좌측 working tree모양 아이콘)

 

- 파일 옆의 + 가 add 이다.(stage에 올리는 것)

 

- add하여 Staged Changes에 올라온 것을 확인하고, 위 창에 commit메시지 입력하고 commit 하면 된다.

 

---

 

App.js(클래스형)

import { Component } from "react";

//함수형 component에서 클래스형 component로 변경하기
class App extends Component{

  //render() 메소드에서 리턴해주는 jsx를 활용해서 화면 구성이 된다.
  render(){
    let myName="바나나";
    //요소에 적용할 인라인 css를 object로 정의하고 적용할 수 있다.
    const boxStyle={
      width:"100px",
      height: "100px",
      border:"1px solid red",
      backgroundColor:"yellow" //여러 단어로 구성된 속성은 camel case를 사용한다.
    };

    return(
      <div className='container'>
        <h1>인덱스 페이지입니다.</h1>
        {/* myName이라는 변수안에 있는 내용 사용하기 */}
        <p>내이름은 <strong>{myName}</strong></p>
        {/* 
          [ 이벤트 처리 ]

          onEventName={ 화살표 함수 }

          처럼 on 다음에 이벤트명을 camel case로 작성한다.
          화살표 함수는 해당 이벤트가 발생하면 자동으로 호출된다.
          예) onClick, onMouseOver, onChange, onInput, onKeyDown, onFocus ...
        */}
        <button className='btn btn-primary' onClick={()=>{
          alert("버튼을 눌렀네요?");
        }}>눌러보셈</button>
        {/* css가 정의된 object를 이용해서 inline css를 적용시킬 수가 있다. */}
        <div style={boxStyle}>box</div>
      </div>
    );
  }
}

export default App;

 

 

- 기본으로 작성되어 있는 이것은 함수형 컴포넌트이다. 클래스형으로 바꿔보기!

 

- react의 component 를 상속한다.

 

 

- 보라색 사각형들은 메소드, 파란색 사각형들은 필드라고 생각하면 된다.

- 위에서 component를 상속받아서 사용 가능하게 된 것!

 

 

- 부모의 render 메소드를 overrride 해줘야 한다.

- 위 return에 있던 내용을 그대로 복사해주고 render 메소드 안에 myName 변수 정의하기

 

- 함수형일 때와 화면 구성에는 변화가 없다!

 

---

 

- React에서 이벤트 처리는 어떻게 할까?

- 버튼을 눌렀을때 어떤 동작이 일어나도록 할 예정

 

 

- className, onClick 등은 jsx에서만 사용하는 속성이다.

 

- 어제 플러그인을 여러개 설치해서 이렇게 자동완성되는 것이다...

 

onClick={()=>{}}

- 화살표함수 형태로 작성해보기

- 이것은 클릭시 호출되는 함수이다.

 

- 클릭하면 알림창 호출됨

 

---

 

- boxStyle 추가

- 위에서 const(상수) 로 boxStyle CSS를 object 형태로 작성한다.

- css가 정의된 object를 이용해서 inline css를 적용시킬 수가 있다. 

 

- 검사에서 박스에 적용된 CSS 내용 확인 가능!