오징옆의 IT

필자가 접한 react 튜토리얼을 보면

리액트의 프톤트에서 백엔드로 요청을 할때

중간에  proxy서버를 두고 요청한다.

"proxy": "http://localhost:7080",   //package.json

처음에는 단순히 리액트는 3000에 실행되어있고

서버의 경우 7080포트(필자의 백엔드 서버)에 실행되어있으니

CORS( cross-origin requests)를 방지하기 위함인줄 알고 개발을 진행했다. 

 cors는 웹개발시 무조건 만나는 기초 내용이니 검색해보자!

* 간단하게 추가 설명을 보태면 3000에서 실행된 리액트가 보낸 요청을 프록시 서버인 7080이 가로챈 뒤 백엔드서버인 7080으로 요청을 보내기 때문에 CORS가 발생하지 않는다.

허나 한가지 이유가 더있다.

axios.get('http://localhost:3001/users?email=${email}')
    .then(res => {
        console.log(res);
    }
         
fetch('http://localhost:3001/auth/login',{
    method:"post",
    body : JSON.stringify(loginInfo),
})

proxy 설정을 하지 않고 ajax를 요청하면 위와 같이 코딩이  될 것이다.

프론트에서 요청하는 부분이 한부분도 아니고 만약 주소가 바뀌거나 

서비스를 실제 디플로이한다면 고객사마다 주소가 다르고 포트가 다르고 등등의 상황이 생길 것이다.

그러면 react 프로젝트 내 모든 ajax 부분의 주소를 다 바꾸어야한다.

유지보수가 똥망이 된다.

axios.get('/users?email=${email}')
    .then(res => {
        console.log(res);
    }
         
fetch('/auth/login',{
    method:"post",
    body : JSON.stringify(loginInfo),
 })

"proxy": "http://localhost:7080",   //package.json

이를 위와 같이 수정하고 package.json에 프록시를 추가한다.

처음 코드와 똑같이 작동할 것이다.

위와 같이 하면 proxy부분만 수정하면 된다.

일반적인 컴포넌트 렌더링으로 변수(props)를 넘길때

<DashboardView param1={parameter}/>

 이런식으로 넘긴다.

<컴포넌트이름 파라미터이름={값}> 과 같은 형태 !!

그런데 Router 를통해 라우팅할때는 

<Route path="/admin/DashboardView" exact component={DashboardView} />

이런 형태로 component를 호출한다.
그럼 변수는 어떻게 넘긴단 말인가?

<Route path="/admin/DashboardView" exact component={() => <DashboardView param1={parameter} />}/>

이런식으로 넘기면 넘길 수 있다.

그리고 해당 컴포넌트에서는 

// DahboardVeiw.js
export default function DashboardView(props) {
	console.log(props.param1);
	render(<div>리액트 배워보자</div>)
}

이와 같이 기존 props를 전달받듯이 받으면 된다.

사내 신규 프로젝트를 맡게 되어 React를 사내 서비스에 최초 도입하고자 한다.

Front : React 

Back-End : SpringBoot

DB : HSQLDB

(node 및 npm 선행 설치는 필수이다.) 

설치

먼저 React를 시작하기 위해서는 

npx create-react-app react-todo

을 실행한다.

해당 명령어는 react를 바로 사용할 수 있도록 초기 설정을 모두 진행해준다.

명령어를 실행하고 잠시 기다리면

"your project name"
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

과 같은 구조로 파일들이 생성될 것 이다.

README.md : React 앱에 대한 설명 파일

node_modules : npm install ~ 로 설치한 모듈들 모여있는 폴더

package.json : 프로젝트에 의존성 관리

index.html : 최초 로딩되는 html 파일 , 해당 파일의 <div id="root"></div> 주목!

index.js : ReactDOM.render(JSX 태그, document.getElementById("root") : 바로 위 설명한 root에 jsx 태그들이 렌더링 된다고생각하면 된다.

App.js : 보통 기본 react 프로젝트는 jsx 태그 내용에 <App></App>이 들어가 있을 것이다.

App.js의 파일 이름이 (정확히 말하면 import한 이름이) 태그 안에 들어간 것이다. 

즉 App.js는 하나의 컴포넌트이고, 이 컴포넌트가 사용된 것이다.

즉 App.js 의 내용이 root부분에 들어가(?) 렌더링 된다고 생각하면 된다.

컴포넌트

앞서 말한 컴포넌트에 대해 전문적인 글을 인용한뒤 필자의 설명을 붙이겠다.

컴포넌트는 우리가 UI를 독립적이고 재사용 가능하게 나눌 수 있게 해줍니다. 그리고 각각을 독립적으로 생각할 수 있게도 만들어줍니다. 
개념적으로, 컴포넌트는 자바스크립트 함수입니다. 컴포넌트는 임의의 props라 불리는 인풋을 받아서 화면에 무엇이 보여질지 기술(describing)하는 리액트 엘리먼트를 반환합니다.

무슨 말인지,, 너무 어렵다.

역시 개발자는 코드로 이야기해야 빠르지 않은가

바로 코드를 보자

import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello;

------------------------------------

import React from 'react';

class Hello extends Component {
  render() {
  	return <div>안녕하세요</div>
  }
}

export default App;

어찌됬건 React도 java script 이기때문에 js를 다뤄봤다면 익숙하면서도 이상한 문법을 볼 수 있을 것이다.

점선으로 구분된 두 코드는 동일한 코드이다. 

첫번째로 작성된 함수형 컴포넌트가 추천된다고하니 함수형으로 진행하겠다.

(함수형 컴포넌트 vs 클래스형 컴포넌트가 궁금하신 분들은 직접 검색을 해보시길..

기회가 되면 필자도 글을 통해 다뤄보겠다)

위와 같은 js 파일 하나가 하나의 컴포넌트가 되고,

앞서 index.js에서 <App></App> 으로 불러온 것 처럼

Hello.js를 임포트 후 <Hello></Hello>로 집어넣으면

Hello파일의 return 부분에 있는 태그가 렌더링 되는 것이다.

기초적인 리액트 시작 방법을 알아보았다.

다음 글에 계속