[React] 컴포넌트 사용해보기

---

Bootstrap 추가

웹개발을 더욱 편안하게 해주는 UI 틀을 제공하는 Bootstrap을 추가해보자

 

 

 1) bootstrap 다운로드

 - 간단하게 npm을 이용해 bootstrap을 추가할 수 있다.

npm install bootstrap

 

  2) 사용 등록

 - App.js에 아래 내용을 추가해준다.

<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"crossorigin="anonymous"></script>

 

 

---

컴포넌트 사용해보기

 - App.js, Login.js, Header.js 세 가지 컴포넌트로 만들었다.

 

 

 1) 컴포넌트 폴더를 생성해 파일을 구분한다. 

  > 필수는 아니지만 파일의 분류가 직관적이기 위해 생성했다.

  >  App.js가 있는 폴더에 컴 App.js가 있는 폴더에 컴포넌트가 있는 components 폴더를 생성했다.

  > 컴포넌트 이름은 대문자로 시작해야 JSX에서 잡아준다.

  >  tmi : vue에서는 컴포넌트 이름이 두 가지 단어로 구성되어야한다.

 

 

 2) 생성하고자 하는 컴포넌트를 생성한다. - Login.js

import React from 'react';
function Login() {
return (
<>
<form>
{/* <fieldset disabled> 이거 쓰면 전체 비활성화 됨 */}
<fieldset>
<legend>Bingo~! 즐길 준비가 되었나요?</legend>
<div class="form-group">
<label for="disabledTextInput">게임 아이디.</label>
<input type="text"id="disabledTextInput"class="form-control"placeholder="ID"></input>
</div>
<div class="form-group">
<label for="disabledSelect">게임 비밀번호</label>
<input type="text"id="disabledTextInput"class="form-control"placeholder="PW"></input>
</div>
<button type="submit"class="btn btn-primary">로그인</button>
</fieldset>
</form>
</>
 )
}
export default Login;

  > import React from ‘react’; : 컴포넌트 파일이면 필수 추가

  > function 컴포넌트파일명() {} : 실행할 동작 모음

  > return(출력될 내용) : 컴포넌트로 분리될 UI

  > export default 반환할이름 : 현재 작성된 내용을 반환

 

 

 3) App.js에 컴포넌트 등록 및 사용 : App.js

import Login from './components/login/Login';

  > 등록 : import 컴포넌트이름 from “컴포넌트 경로”;

 

<Login />

  > 사용 : <컴포넌트이름 />

  > 출력될 위치를 고려해 불러온다.

 

 

  > 전체코드 : App.js

import './App.css';
import Login from './components/login/Login';
import Header from './components/header/Header';


function App() {
return (
<>
{/* bootstrap 사용 */}
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"crossorigin="anonymous"></link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"crossorigin="anonymous"></script>
<div>
<Header />
<Login />
</div>
</>
 );
}
export default App;

 

 

 

 - 첫 사용 특이점

  > input, link 등의 본래 닫는 태그(</>)가 필요 없는 태그들도 닫아주어야 작동한다.

  > 전체 출력될 내용의 앞 뒤에 <></>가 없다면, 부모 태그가 있어야 한다면서 오류가 발생한다.

  > 3)에서 등록만 하면 사용하지 않았다면서 에러가 발생한다.

  > 컴포넌트 사용이나 데이터 전송을 위한 props등이 아직까진 유사해서 견딜만 하다.