[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 16회차 미션

패스트캠퍼스 프론트엔드 인강 16일차 리액트를 설치하는방법을 알아보고 리액트 컴포넌트를 만들어보았다.

nodejs는 브라우저 환경이 아닌곳에서도 자바스크립트를 실행할수있게 도와주는 자바스크립트 런타임이다. 리엑트도구들 웹팩 바벨등도 자바스크립트 노드js기반으로 만들어져있다.

yarn같은경우는 자바스크립트 패키지를 매니징하는 도구인데 노드js를 설치하면 npm이 자동 설치되는데 yarn을 사용하면 더 빠른속도로 다운받을수있게해준다.

vs code는 에디터이다. 그밖에 git도 설치를하여 준비를 하자.

설치는 구글에 공식홈페이지를 이용하여 본인운영체제에 맞춰 다운받는다. 무료로 다운받을수있다.

npx create - react app 리엑트프로젝트명

cmd창에서 리엑트를 설치할 파일로 이동한다(d:엔터시 d드라이브로 이동, 뒤로가기 ../엔터)

 

vscode를 열고 터미널창(ctrl+~)을 열어 yarn start혹은 npm run start를 입력해 엔터를 누르면 만들어진 리액트가 실행된다.

리액트 프로젝트 생성

이제 리액트에 함수형 컴포넌트를 만들어보자.

src폴더에 hello.js를 만들고 아래코드처럼 친다.

import React from 'react' //리엑트를 불러와서 사용했다

//함수형컴포넌트
function Hello(){
	return <div>안녕하세요</div> //html로 보이지만jsx
}
export default Hello;

그리고 App.js로 가서 Hello라는 함수형컴포넌트를 import 하자

import React from "react";
import "./styles.css";
import Hello from "./hello";

export default function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  );
}

 import할때 .js는 생략할수있어서 ./hello만 입력하였다.

App컴포넌트 <div>태그내에 <Hello />만 입력하면 끝.

 

index.js파일을 열어보자 ReactDOM이 사용되어있는데 페이지에서(document) id가 root인것을 찾아 리액트에 넣겟다는뜻이다

public에 index.html을 폴더를 열어보면  <div id="root"></div>를 찾을수있다.

결국 리액트컴포넌트가 랜더링될때 html형태로만들어져 이곳에 삽입이 되는것이다.

 

컴포넌트의 재사용

컴포넌트는 여러번 재사용이 가능해 만약 <Hello/>를 3번쓰면 안녕하세요가 3번출력된다.

 

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스