01 React란?

React란?

React는 페이스북사에서 만든 자바스크립트 라이브러리이다.
실제 페이스북에서 자체적으로 사용하며 많은 웹 어플리케이션에 적용되어 있다.

유저 인터페이스를 만드는 라이브러리로, View 레이어를 담당한다.

React(웹 어플리케이션), React Native(모바일 어플리케이션), React Electron(PC 어플리케이션)

React의 특징

Component로 이루어진 UI 라이브러리
Component는 한 가지의 기능을 수행하는 UI 단위
리액트 어플리케이션은 꼭 하나이상의 Component로 이루어져 있음
최상위 Component는 Root
virtual DOM tree를 가지고 있음

위에서 말하는 Component는 무엇일까?

리액트에서 Component는 레고 조각처럼 조합하여 프로그래밍 할 수 있도록 만든 모듈 단위이다.

한마디로, 하나의 HTML 코드만으로 작성하는 것이 아니라 HTML 코드를 분할하여 사용하는 것이다.

이렇게 하면, 코드를 재사용할 수 있고 유지보수성을 증가시킬 수 있다.

아래 예시를 보며 이해해보자 : )

import React from "react";

function hello(props){
    return(
        <div>
        안녕하세요. {props.name}님!
        </div>
    )
}

function App() {
 return (
    <Wrapper>
      <Hello/>
      <Hello name="김사과"/> {/* 재사용 */}
      <Hello name="반하나"/> {/* 재사용 */}
      <Hello name="오렌지"/> {/* 재사용 */}
    </Wrapper>
  );
}

Component 이름은 "Hello"이고, Component에 각각의 name 매개변수를 전달한다.

위의 결과를 보면, 전달한 값에 따라 각각의 Hello 컴퍼넌트 내용이 호출되는걸 확인할 수 있다.

React를 위한 툴

1. 터미널 ( cmd를 자주 사용하는데, 기본 프로그램보다 이쁘다 ㅎㅎ... 꼭 필요한건 아닙니다!)
cmder 다운로드
https://cmder.net/

Cmder | Console Emulator

Total portability Carry it with you on a USB stick or in the Cloud, so your settings, aliases and history can go anywhere you go. You will not see that ugly Windows prompt ever again.

cmder.net

2. 노드
자바스크립트를 실행할 수 있는 환경
https://nodejs.org/ko/

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

3. 크롬 확장 프로그램
- React Developer Tools
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools. Created from revision f58bbcf9a on 9/1/2021.

chrome.google.com

4. 비주얼스튜디오 코드
- Reactjs code snippets 확장프로그램 설치

리액트 설치

1. cdn을 이용하는 방법(잘 사용하지 않음)

- 구글에서 react cdn으로 검색

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

- babel : 과거 브라우저에 맞도록 스크립트를 자동으로 변환(트랜스 컴파일러)

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. create-react-app

- 페이스북에서 만든 리액트를 개발하는 개발자들이 공통적으로 사용하는 유용한 툴을 한번에 자동으로 설치할 수 있게 해주는 툴이다.

저는 yarn을 사용할거라 yarn 설치부터 하도록 하겠습니다 :)

yarn 이란?
- facebook이 만든 javascript의 의존성 관리 패키지 매니저
- npm과 유사
- 속도 향상, 보안, 신뢰성

[ yarn 설치 ]

cd 설치하고 싶은 폴더위치 경로
cd C:\1900_FRONTEND_LYJ\React\Test

npm i -g yarn

[ yarn으로 react project 생성하기]

yarn create react-app 프로젝트명
yarn create react-app testproject

[ 실행하기 ]

cd 프로젝트명
cd testproject

yarn start

순차적으로 하면 ! 아래와 같은 화면이 반겨준다

React 프로젝트 구조

파일명	설명
.gitignore	gitignore 파일안에 기술한 파일등을 github에 푸시하지 않음
package.json	npm에서 버전을 관리할 때 프로젝트에서 외부적으로 쓰고 있는 라이브러리의 버전들과 스크립트들을 명시
README.Model	github에서 프로젝트에 대해 설명하는 파일
public 디렉토리	사용자에게 배포할 때 외부적으로 보여지는 리소스들을 포함
src 디렉토리	리액트 소스코드를 포함

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>

저작자표시 비영리 변경금지

윤지의 프로그래밍 공부 노트