React.js 이용하기

※2021-하계-학교-스터디※
<<목차>>

• HTML, CSS, JS
• React.js란?

0. 디렉토리 구성

1. HTML/CSS/JavaScript

1.웹 사이트 개발 시 필수 요소

① HTML: 웹 사이트의 뼈대를 구성
// 중요한 태그

<div></div>: 다른 태그를 담을 수 있는 박스
<h1></h1> : 제목 등을 작성하는 태그
ex) <h1>안녕하세요</h1>
<span></span>: 글을 담는 박스
ex) <span>안녕하세요</span>
<b></b> : 볼드체로 만들어줌
ex) <b>안녕하세요</b>
<button></button> : 버튼
ex) <button onClick=“”>버튼</button>
② CSS: 웹 사이트에 미적요소를 추가
③ JS: 웹 사이트에 기능을 추가

2. React.js

1. React.js란?

• 웹 애플리케이션을 좀 더 편하게 만들 수 있는 라이브러리
• 리액트는 컴포넌트로 구성된다.

  

2. 컴포넌트란?

• 어떤 기능이나 목적을 갖고 있는 한 요소 또는 집합

구글 사이트에서, 로고, 검색창, 마이크 버튼, 키보드 버튼 등 모든 것을 컴포넌트라고 부를 수 있다.&nbsp;

3. 리액트 시작하기
프로젝트를 만드려는 위치의 터미널에서

npx create-react-app 프로젝트명

위의 명령어를 친다.
자동으로 패키지가 설치되고, 해당 위치에서

npm start

위의 명령어를 터미널에 입력하면 아래와 같은 새로운 사이트가 뜬다.

4.컴포넌트를 만들어보자. (hello.js)

//hello.js 코드 
import React from 'react'; //여기서 react를 불러줘야 한다 
function Hello() { 
  return ( 
  	<div> 안녕하세요 </div> 
	); 
} 
export default Hello;

• 이때, return에서 <div>태그를 사용하고 있다. 그 이유는 리턴값이 1 indent로 묶여서 존재해야 한다.
• 그러니까, 아래와 같이 1 indent 코드가 2개 이상 존재해서는 안된다.

import React from 'react'; //여기서 react를 불러줘야 한다 
function Hello(){ 
  return ( 
    <Counter />
    <Launch /> 
  ); 
} 
export default Hello;

• export default Hello; 는 해당 hello.js 코드를 밖에서도 사용할 수 있음을 의미한다.

5.컴포넌트 사용하기(App.js)

• 다음과 같이 App.js에서 hello.js코드를 불러온 뒤, return에서 Hello를 반환한다.

다음과 같이 작성한다.

6. 결과 확인하기
아까 띄웠던 React App 사이트를 가보면
다음과 같이 출력되고 있음을 확인할 수 있다!react 실행을 종료하고 싶다면 터미널에서 Ctrl+C를 누르면 된다.

실행결과