React , React의 시작, npm start !

리액트란 ?

 

웹 프레임 워크 , 

자바스크립트의 라이브러리의 하나.

싱글페이지 애플리케이션(SPA)을 제작한다.

 

리액트는 왜 쓰는걸까 ?

html,CSS,javascript를 상호적으로 한꺼번에 사용할수 있다.

 

 

---

리액트의 설치 ,  node.js

 

node.js 를 설치하여 리액트를 사용한다.

node.js 란 , 브라우저 외에서 자바스크립트를 실행 할 수 있도록 도와주는 자바스크립트 엔진.

 

node 의 패키지 매니져 , npm

패키지란 ? 라이브러리들의 묶음.

 

1. node.js 설치 이후 리액트 설치 가능
2. react 전용 작업 폴더 생성하여 vscode 탐색기에 로드
3. vscode 터미널 설정
4. npm install create-react-app - 리액트 프로젝트 생성을 위한 앱 설치
5. npx create-react-app myapp - 리액트 프로젝트(앱) 생성
6. myapp : 작업 폴더 내 새로 생성할 앱명(새로운 앱 폴더 생성) 앱명은 대문자 포함 불가함에 주의.
7. cd myapp - 생성한 앱 폴더로 진입
8. npm start - 앱을 리액트 서버를 통해 브라우저에 로드 → vs코드 실행할때 미리 터미널에서실행.

 

 

npm 기본 명령어

• npm init : package.json 파일 생성 ( package.json 의 기본 옵션을 모두 입력 해야 함 )
• npm init –y : 위와 동일하지만 package.json 의 기본옵션을 default값으로 설정 ( y 는 yes )
• npm install : 패키지명을 명시하지 않고 package.json 파일을 참조하여 의존성을 설치 (만일 package-lock.json과 package.json 모두 존재하면 package-lock.json 파일을 참조함)
• npm install 패키지명 : 패키지명을 명시해 설치
• npm remove 패키지명 : 패키지 제거

npm은 패키지 다운로드 및 관리에 특화된 도구이고, npx 는 패키지 실행에 특화된 도구

 

웹팩(Webpack) 이란?

 

자바스크립트로 만들어주는 컴파일러.

프런트 앤드 프레임워크에서 가장 많이 사용되는 모듈 번들러.

번들러란 ? = 컴파일러 , 빌드 , 변환 이라는 단어로 대체 사용되기도 한다.

리액트를 모듈 번들 하여 자바스크립트로 변환.

 

- 바벨

자바스크립트의 실행을 브라우저 버젼에 맞춰 버젼을 낮춰주는 컴파일러.

 

- React-app : 하나의 웹 어플리케이션

package.json 을 번들링을 할 때 기반으로 만들어짐. → 반드시 있어야하는 파일.

(의존성과 버전을 관리하는 파일. → 라이브러리의 목록을 확인 가능함.

→ npm이라는 기능의 명세표같은 역할.→ 배포에 필요한 정보)

 

---

리액트를 편리하게 사용 가능하게 만들어 줄 확장팩 설치

 

• ES7+ React/Redux/React-Native snippets 

자주 쓰이는 Snippet들을 단축키로 간단히 생성할 수 있게 해줍니다.( 현재 적용 ) - exp, rfc 와 같은 약어 사용 가능

ex)

exp => export default first

imp => import second from 'first'

rfc => export default function index() {

 

• Auto Close Tag

VS Code 에서 태그 자동 닫기를 지원해주긴 하나 XML, PHP, Vue, JavaScript, JSX등은 지원하지 않기 때문에 이 플러그인을 설치하고 사용하면 좋습니다.

 

• npm Intellisense 

import 문에서 npm 모듈을 자동 완성합니다.

 

• JSX HTML <tags/> 

JSX 태그 자동완성

 

• Auto Import - ES6, TS, JSX, TSX

모듈명(파일명) 입력후 어시스트 창에서 탭으로 자동완성

 

• 크롬 확장팩 크롬에서 검색후 설치 React Developer Tools

새로고침하고 개발자 도구로 보면

components 눌러서 설정 highlight ~ 체크박스 체크하기

---

React 실행과 구조.

실행을 하고 나면 , public 폴더와 src 폴더 크게 두가지가 보인다.

 

• public 

 

실제 문서에 나타내는 화면처리를 위한 폴더.

index.html 과 사진파일 로 구성.

 

-index.html 의 noscript

 

페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트 비활성화일때 클라이언트에게 보여주기 위한 메세지

---

• src

애플리케이션의 소스 코드가 있는곳.→  우리가 이제 작업을 해야하는 작업 공간.

 

- index.js 

index.html 와 함께 가장먼저 실행되는 js 코드 , 앱의 진입점.

이코드가 React Component 를 root 영역에 추가한다.

 

-app.js

기본으로 생성된 React Component

함수형 Component로  App() 함수가 정의 되어있음.

 

-Component Name 의 주의

대문자로 시작하는 표기법을 이용함.

왜 대문자로 시작하게 되었을까 ? →  컴포넌트가 html의 태그와 다르다는것을 시각적으로 표현하기 위함.

 

-변수의 주의

나만 알 수 있는 이름을 짓지 말것.

객관적이며 직관적인 영어로 이름을 지을것.

낙타 표기법을 통해 가독성을 올릴것.

 

---

 

index.js 훑어보기

 

const root = ReactDOM.createRoot(document.getElementById('root'));

 

ReactDOM.createRoot

인수로 전달 받은 요소를 리액트 앱의 root로 return 함.

root : React 에서 DOM 트리의 가장 최상위 요소. 

 

 

 

 

root.render(

 <React.StrictMode>

    <App />

  </React.StrictMode>

);

 

React.StrictMode 

엄격모드의 태그.

콘솔 로그 메세지가 더블로 발생하여 신입 개발자 입장에서 불편한 태그.

 

 

 

root.render(

    <App />

);

 

 

render

React 코드를 DOM에 붙이는 역할

 

 

컴포넌트의 관리

 

src 안에 컴포넌트를 보관 관리할 폴더를 만들고,

파일이름을 컴포넌트 형식으로 만들어 준다.

하나의 컴포넌트를 하나의 파일에 담는 형식이 일반적이다

→ 그러므로 export default 를 많이 사용

 

 

app.js

import MyHeader from './components/Header.jsx';
import MyFooter from './components/Footer.jsx'
import { React } from 'react';


function App() {
  return (
    <div className="App">
      <MyHeader />
      <div>
        <h2>
          ** 요리 백과 **
        </h2>
      </div>
      <MyFooter />
    </div>
  );
}

export default App;

Header.jsx

export default function Header(){
    return(
        <header>
            <h1>
                ** header **
            </h1>
            <p>
                안녕하세요 !!
            </p>
        </header>
    );
};

Footer.jsx

function Footer(){
    return(
        <footer>
            <h2>
                ** Footer **
            </h2>
            <p>
                문의 : 013 - 1234 - 4561 , e-mail : dfsa@fdsfa.com
            </p>
        </footer>
    );
};

export default Footer;

결과

내용별로 구분지어 컴포넌트를 형성.

리턴값이 한덩어리라면 , 리턴을 생략