02/17 [React] 진짜 React 환경설정 및 문법정리

SPA (single page Application) - 페이지 1개(그리고 엄청난 js파일)로 웹을 만듦!!!

angular.js   >   react.js   >   vue.js

 

 

[React.js 라이브러리]

페이지 단위로 개발하는 경우는 주로 다른 프레임워크나 라이브러리를 함께 사용하면서 
 부분 페이지에 React를 적용할 때 주로 사용하는 방식이다.

 

1. 개발환경 구축

1-1. Node.js 설치( 자바스크립트를 실행하는 환경  , JVM같은 역할 )

-https://nodejs.org/ko/ 에서 Stable 버젼 다운로드 
-NPM(Node Package Manager)는 모듈의 설치 및 모듈간 의존성 관리를 위한
 자바스크립트의 패키지 매니저이다  ( 파이선에 pip같은거)

 

1-2. YARN 설치(옵션사항) -- 이건 설치 안함 
-페이스북이 만든 NPM과 같은 자바스크립트 패키지 매니저로로 더욱 더 빠르고 캐쉬 및 자바스크립트 라이브러리 의존성 체크에  있어서 NPM보다 성능이 우수하다

 

 

1-3. 코드 에디터(Visual Studio Code)

 

 

1-4. Create React App(CRA)  -- Spring boot같은 아이임

      Create React App은 리액트에서 공식적으로 지원되는 SPA React 애플리케이션을 만드는 방법이다. 
      Webpack(모듈 번들러-수많은 js를 묶는놈)이나 Babel(transFiler-- ES5->ES6로 변환)l과 같은 설정이 필요 없는 최신 빌드 설정을 제공한다.

 

[가상환경연결하기]

1.cnd 창 열기 

2.D:

3.cd D:\CDW\WORKPLACE\React.js\react-hooks-example 

4.npm start

경로는 꼭 폴더까지 들어가기!!!!

그러면 가상환경이 실행됩니다 !!!!!

 

npx create-react-app 프로젝트명
프로젝트명에 해당하는 폴더가 생기면 해당 디렉토리로 이동후
npm [run] start로 실행  
cd 프로젝트명
npm start

 

1-5. 리액트 어플리케이션의 주요 구성파일

src/index.js : 브라우저의 실제 DOM 내부에 리액트 컴포넌트(화면을 구성하는 기준공간 ? )를 렌더링하는 소스가 있다.
               즉 id 가 root 인 <div>라는 DOM 을 선택하고 리액트 컴포넌트의 렌더링(그안에 쏙 들어간다구....) 결과가 위 div 내부에 렌더링 된다

 

src/App.js : 리액트 앱의 화면 컴포넌트를 정의하는 최상위 컴포넌트이다. 
                 실제로 화면에 표시되는 내용 등은 여기에서 정의한다.

 

pulic/index.html : index.js에 의해 렌더링된 결과가 표시되는 HTML 템플릿 파일이다 

※PUBLIC_URL는 리액트에서 제공하는 접두어로 배포시 사이트 URL이 설정된다.

   리액트 앱에서 public폴더를 나타낸다 즉 정적인 자원 .css 나 .js 혹은 이미지 파일들을 public폴더에
   저장하고 HTML태그에서 링크를 걸때는 process.env.PUBLIC_URL 을 사용한다 

 

 

---

[JSX 문법]

 

2.JSX

   얘도 문법도 있음 

예)

<React.StrictMode>
    <App />
</React.StrictMode>

 <img src={logo} className="App-logo" alt="logo" />

- index.js의 root.render()에 의해 렌더링되는(쉽게 말해 '실제 화면으로 구성이 된다' 는 뜻) 리액트 엘리먼트(자바스크립트 객체, 즉 화면을 구성하는 컴포넌트!)를 쉽게  만들기 위한 자바스크립트 확장 문법이다(또 쉽게 예를 들면 자바스크립트안에 html 태그가 들어가도 에러가 안난다 !!!!  오?)
- 리액트는 JSX 사용이 필수가 아니지만 JavaScript 코드 내부의 UI 작업을 할 때 시각적 도움 때문에 많이 사용한다.

- JSX는 문자열도 HTML도 아닌 태그 형태의 자바스크립트 확장 문법으로 자바스크립트 객체(object) 이다.

   JSX Syntax를 입력하면 babel 이 JSX 를 JavaScript 로 변환을 해준다. 

 

왼쪽에 <h1> 이게 절대 태그가 아님!! 자바스크립트객체다 !!! 오른쪽 보다 왼쪽처럼 저렇게 태그작성하듯 사용하는게 쉽겠죠????

 

- JSX 태그는 HTML 태그 뿐만 아니라 사용자 정의의 임의 태그(컴포넌트 , ex.  <App /> )로도 구성이 될 수 있다.

 

예. js파일 

import './App.css';

function App() {
  const tag=<h2>Hello React</h2>  
  			/*이게 JSX 래.. <h2>가 태그가 아님 태그쓰는것 처럼 사용하는거 뿐임!*/
  return <>   {/*이건 루드엘리먼트래 반드시 존재해야 한다고 함...*/}
    {tag}    {/*변수를 이렇게 넣어서 사용할 수도 있고! 자바스크립트를 쓸땐 저렇게 {}로 감싸야 한다!!*/}
  </>;
}
export default App;

 

- JSX내에 자바스크립트 코드를 작성할때는 JSX Expression인 {자바스크립트코드}를 사용하여 작성한다 {} 로 감싸야 한다고..
- JSX에서 주석처리는 {/* 주석 */}으로 처리한다
- JSX의 속성은 속성값이 자바스크립트 변수일때는 속성명={자바스크립트변수} 식이나 일반 값일때는 속성명="속성값"으로 한다

- JSX를 if명령문과 for루프 안에서 사용할 수 있고 , 변수에 할당하고, 인수로 받아 들여 함수에서 반환 할 수 있다.  
  단, JSX를 반환하는 return 문에서는 제어문을 사용할 수 없다(if , for return 에다가는  못쓴다구!! )

- JSX는 HTML보다 자바 스크립트에 가깝기 때문에 React DOM은 camelCase 형태의 HTML 속성 이름을 사용한다.
  예를 들어 class대신 className 그리고 onclick대신 onClick를 속성명으로 사용한다 

- JSX에 HTML태그 처럼 style속성을 적용하려면 style="color:red"방식대로 하면 에러난다
  JSX내에서 위처럼 스타일을 주려면 style={{camelCase형태의 css속성명:변수 혹은 스트링}}
  이때 바깥쪽 {}는 JSX에서 자스를 사용하기 위함이고 안쪽 {}는 자스 객체이다. 

import './App.css';

function App() {
  const hi ='HI React!!!'
 // console.log('tag:',tag,typeof tag)
  return<>
    <h2 title={hi} onClick={alert('클릭이벤트발생') <h2 title={hi} style={{color:'red'}}>Hello React!!</h2> 
             {/*카멜케이스형태로 넣어야 하고 자바스크립트 쓰려면 {} 감싸야 한다, style 속성도 저렇게{{}} 넣어야한다!!*/}
    </> 
}

export default App;

 

- JSX태그에는 자식을 포함 할 수 있는데 없는 경우는 Self closing />을 통해 닫고
  자식이 있는 경우에는 반드시 최상위 태그 하나로 감싸야 한다
  즉 항상 루트 엘리먼트가 있어야한다
<div>로 감쌀시 div의 스타일  영향을 받을 수 있으므로

     import  React  from  "react";
    <React.Fragment> </React.Fragment>혹은
     import  {Fragment}  from  "react";
    <Fragment></Fragment>로 감싸거나  <></>로 감싸면 
  렌더링시 index.html에 요소가 추가 안되고  JSX에러를 피할 수 있다

근데 그럼 

<React.StrictMode></React.StrictMode> 이건 뭐얌??

use Strict같은거! JSX문법을 엄격하게 적용 하겠다는 의미임!