[React]리액트 구조 & JSX

리액트 프로젝트 만들기

yarn create react-app 'project_name'

npm create-react-app 'project_name'

---

디렉터리 구조

node_modules - Node.js 기본 도구 모음 - npm, yarn으로 설치한 패키지 파일 모음.

public  - 실제 화면에 보여지는 파일 - Index.html          : 화면에 출력되는 HTML          : jsx에서 리턴한 가상 DOM을 <div id="root"></div>에 추가해서 실행. - manifest.json : 앱의 홈화면에 보여지는 아이콘, 이름 등을 설정 - Robots.txt : 사이트맵 설정

src - React를 구현할 폴더 - Index.js : 프로젝트 실행 시 제일 처음 접근하는 파일. 경로(route) 설정 - App.js : 프로젝트 실행 시 최상위 컴포넌트 (테스트환경 : app.test.js, reportWebvitals.js, setupTests.js)

.gitIgnore - 입력되어 있는 파일을 git 커밋에서 배제 - Git에 올라가면 안되는 정보(비밀번호, 인증키 등)에 사용

Package.json - 사용하고 있는 패키지와 버전을 관리하는 파일

README.md - 프로젝트 설명을 작성하는 파일 - Github에 커밋했을 때 설명으로 나오는 부분

yarn.lock, package-lock.json - 패키지 의존성 관리 - 패키지를 다시 install했을 때 기존의 버전을 유지하기 위한 잠금장치

yarn-error.log - yarn 명령 중 에러 로그를 보관

 

---

 

JSX란? 

XML형식의 javascript 의 확장 문법

브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 코드로 변환됨.

 

번들러
브라우저에는 모듈을 나눠서 실행하는 기능이 없기 때문에
파일(모듈)들을 하나로 만들어 브라우저에서 실행 가능한 환경을 만들어주는 작업이 필요.
(webpack : 편의성과 확장성이 다른 도구보다 뛰어남.)

바벨
최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드를 변환

ellen92.tistory.com/44?category=900805

 

 

 

jsx 장점

- 스크립트에서 HTML태그를 사용하여 가독성이 높고 작성하기 쉬움. 

- 컴포넌트를 JSX안에서 사용하여 활용도가 높음.

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
// 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.js

import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;
 

---

 

jsx문법

1. 태그닫기, 노드 감싸기

function App() {
  return (
    <div>
        <h1>JSX문법</h1>
        <p>태그 닫기</p>
        <br/>
    </div>
  );
}

 

2. 주석, 조건문 처리

  - jsx밖에서 조건문을 사용하여 사전에 값을 처리하거나

  - jsx에서 {}를 사용하여 조건문 처리

주석

return(
 {/* 주석은 여기에 */}

 //이런 주석이나
 /* 이런 주석은 페이지에 그대로 나타납니다. */
)

---

3항 연산자

name = '리액트'일 떄

return(
 {name === '리액트'? (<p>리액트입니다. </p>): ( <p>리액트가 아닙니다. </p>) }
)
의 결과는 : 리액트입니다.

---

AND(&&)연산

name = '리액트'일 떄

return(
 {name === 'react'?(<p>리액트입니다.</p>):null}
)
의 결과는 :

return(
 {name === 'react'&& <p>리액트입니다.</p>}
)
의 결과는 :

name === 'react'의 결과가 true이면 <p>리액트입니다.</p>를 반환합니다.

---

OR(||)연산산

value = undefined; 일 때

return(
 {value||'리액트'}
)
의 결과는 : 리액트
value가 undefined이면 '리액트'표시, 아니면 공백

return undeinfed; 이면 에러,
return <div>undefined</div> 이면 공백

 

 

3. 인라인 스타일링

- DOM요소에 스타일을 적용할 때 객체형태로 입력

- 스타일명을 카멜표기법으로 작성 (background-color => backgroundColor)

import react from 'react';
 
function App() {
    const style ={
      backgroundColor:'black',
      color:'aqua',
      fontSize : '30px',
      fontWeight: 'bold'
    }
  return (
    <>
      <div style={style}>BOX1</div>
 
      <div style={{
            backgroundColor:'black',
            color:'aqua',
            fontSize : '30px',
            fontWeight: 'bold'
          }}>
            BOX2</div>
    </>
  );
}
 
export default App;
 
 

4. class -> className

.box{
  color:#fff;
  size: 30px;
  font-weight: bold;
  background-color: #000;
}

import react from 'react';
import './App.css';
 
function App() {
  return (
      <div className="box">className</div>
  );
}
 
export default App;
 
 

 

---

참조 : 리액트를 다루는 기술(김민준 / 길벗)

developer-alle.tistory.com/297

swdevelopment.tistory.com/238